html {
  height: 100%; }

body {
  margin: 0;
  padding: 0;
  font-size: 16px;
  font-family: "Open Sans", sans-serif;
  font-weight: 400;
  background-color: #465b60;
  background-image: url("../img/blackboard.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  color: white;
  height: 100%; }

.logo {
  background: url("../img/ISQ-kompetenzbrowser_logo.svg") no-repeat;
  background-size: 100%;
  display: block;
  width: 247px;
  height: 32px;
  margin-top: 2.5rem;
  margin-left: 2.875rem;
  margin-right: 2.875rem;
  margin-bottom: 7.0625rem;
  cursor: pointer; }

a {
  text-decoration: none;
  color: white; }

.header {
  position: relative; }
  .header .navi {
    position: absolute;
    right: 2.875rem;
    top: 2.5rem;
    display: none; }

.title {
  text-align: center;
  font-size: 2.625rem;
  line-height: 3rem; }
  .title .innerTitle {
    display: inline-block; }
    .title .innerTitle .text {
      padding-left: 1.25rem;
      padding-right: 1.25rem;
      font-family: "Open Sans", sans-serif;
      font-weight: 700; }
    .title .innerTitle hr {
      border: 0 none;
      border-bottom: 4px solid white;
      margin-top: 0.8125rem;
      margin-bottom: 3.375rem; }

.page {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: row;
      flex-direction: row;
  height: 100%; }
  .page .pageContent {
    -ms-flex: 1 0 0%;
        flex: 1 0 0%;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
        flex-direction: column; }
    .page .pageContent .view {
      -ms-flex: 1 0 0%;
          flex: 1 0 0%;
      overflow: hidden; }
  .page .pageContext {
    width: 30%;
    display: none;
    min-width: 360px; }

.homeView {
  display: none;
  text-align: center; }
  .homeView .innerHomeView {
    position: relative;
    max-width: 450px;
    display: inline-block; }
  .homeView .tobrowser, .homeView button.nocolor {
    font-family: "Open Sans", sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    color: white;
    padding: 0.969rem;
    border-radius: 2rem;
    cursor: pointer; }
  .homeView .tobrowser {
    margin-top: 2.75rem;
    font-size: 0.8125rem;
    line-height: 0.8125rem;
    background-color: #c13046;
    border: 0 none; }
    .homeView .tobrowser:hover {
      background-color: #a01f38; }
  .homeView button.nocolor {
    margin-top: 2.75rem;
    background-color: transparent;
    border: 1px solid white;
    font-size: 0.75rem;
    line-height: 0.75rem; }
    .homeView button.nocolor:hover {
      background-color: #02475d;
      border-color: transparent; }
  .homeView .content {
    font-size: 1.0625rem;
    margin-bottom: 4em; }
    .homeView .content p {
      margin: 0;
      padding: 0; }

.page-homeView {
  background-image: url("../img/teacher.jpg");
  background-color: #516752; }
  .page-homeView .page .pageContent .view {
    overflow: auto; }
  @media screen and (max-width: 1024px) {
    .page-homeView .innerHomeView {
      max-width: 500px; } }
  @media screen and (max-width: 1024px) {
    .page-homeView .innerHomeView .content {
      font-size: 0.9375rem; } }
  @media screen and (max-width: 1024px) {
    .page-homeView .title {
      font-weight: 600;
      font-size: 1.75rem; } }
  @media screen and (max-width: 1024px) {
    .page-homeView .title .text {
      font-weight: 600; } }
  @media screen and (min-width: 1025px) {
    .page-homeView .title .text {
      width: 430px; } }
  @media screen and (max-width: 1024px) {
    .page-homeView .title hr {
      margin-bottom: 2rem;
      margin-top: 0.69rem; } }
  @media screen and (max-width: 1024px) {
    .page-homeView .header .logo {
      margin-bottom: 3rem; } }

.graphView {
  display: none;
  height: 75vh; }
  .graphView canvas {
    width: 100%;
    /* for ios tablet */
    -webkit-tap-highlight-color: transparent; }
  .graphView .centerArea {
    width: 99.5%;
    text-align: center;
    height: 75vh; }
    .graphView .centerArea svg {
      width: 100%;
      display: inline-block;
      background-color: transparent;
      max-height: 75vH; }
      .graphView .centerArea svg circle.dot {
        stroke: #ffffff;
        fill: #526569; }
      .graphView .centerArea svg circle.innerDot.Ma_Primar {
        fill: #11579b; }
      .graphView .centerArea svg circle.innerDot.Ma_Sek_I {
        fill: #3794a8; }
      .graphView .centerArea svg circle.innerDot.Eng_Sek_I {
        fill: #66a04a; }
      .graphView .centerArea svg circle.innerDot.Frz_Sek_I {
        fill: #946a9e; }
      .graphView .centerArea svg circle.innerDot.Deu_Primar {
        fill: #d55356; }
      .graphView .centerArea svg circle.innerDot.Deu_Sek_I {
        fill: #d87c36; }
      .graphView .centerArea svg circle.notdot {
        fill: #03475e; }
      .graphView .centerArea svg circle.breadcrumb.Ma_Primar {
        fill: #11579b; }
      .graphView .centerArea svg circle.breadcrumb.Ma_Sek_I {
        fill: #3794a8; }
      .graphView .centerArea svg circle.breadcrumb.Eng_Sek_I {
        fill: #66a04a; }
      .graphView .centerArea svg circle.breadcrumb.Frz_Sek_I {
        fill: #946a9e; }
      .graphView .centerArea svg circle.breadcrumb.Deu_Primar {
        fill: #d55356; }
      .graphView .centerArea svg circle.breadcrumb.Deu_Sek_I {
        fill: #d87c36; }
      .graphView .centerArea svg circle.focus {
        stroke-width: 2px;
        stroke-opacity: 1;
        stroke: white; }
      .graphView .centerArea svg .breadcrumb .nodeText {
        font-family: 'Open Sans', SansSerif;
        font-size: 15px;
        font-weight: 700;
        fill: #ffffff;
        transform: translateX(0);
        /* Fix Edge text-anchor:middle issue */ }
      .graphView .centerArea svg .breadcrumb rect {
        display: none; }
      .graphView .centerArea svg .notdot rect {
        display: none; }
      .graphView .centerArea svg .notdot .nodeText {
        font-family: 'Open Sans', SansSerif;
        font-size: 15px;
        font-weight: 400;
        fill: #ffffff;
        transform: translateX(0);
        /* Fix Edge text-anchor:middle issue */ }
      .graphView .centerArea svg .alias circle {
        display: none; }
      .graphView .centerArea svg .alias rect {
        fill: #526569; }
      .graphView .centerArea svg .alias text {
        font-family: 'Open Sans', SansSerif;
        font-size: 15px;
        font-weight: 400;
        fill: #ffffff;
        transform: translateX(0);
        /* Fix Edge text-anchor:middle issue */ }
      .graphView .centerArea svg .node {
        cursor: pointer; }

.graphViewContext .centerArea, .graphViewContext .rightArea {
  display: inline-block;
  vertical-align: top; }

.graphViewContext .rightArea {
  background-color: white;
  color: black;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  height: 100%;
  overflow: hidden;
  position: relative; }
  .graphViewContext .rightArea.Ma_Primar .subtitle h1 {
    background-color: #11579b; }
  .graphViewContext .rightArea.Ma_Sek_I .subtitle h1 {
    background-color: #3794a8; }
  .graphViewContext .rightArea.Eng_Sek_I .subtitle h1 {
    background-color: #66a04a; }
  .graphViewContext .rightArea.Frz_Sek_I .subtitle h1 {
    background-color: #946a9e; }
  .graphViewContext .rightArea.Deu_Primar .subtitle h1 {
    background-color: #d55356; }
  .graphViewContext .rightArea.Deu_Sek_I .subtitle h1 {
    background-color: #d87c36; }
  .graphViewContext .rightArea.Ma_Primar .directchildren .open .foldablePanel {
    background-color: #d1e0e5; }
  .graphViewContext .rightArea.Ma_Sek_I .directchildren .open .foldablePanel {
    background-color: #d6e6ea; }
  .graphViewContext .rightArea.Eng_Sek_I .directchildren .open .foldablePanel {
    background-color: #dce5d8; }
  .graphViewContext .rightArea.Frz_Sek_I .directchildren .open .foldablePanel {
    background-color: #e3dde5; }
  .graphViewContext .rightArea.Deu_Primar .directchildren .open .foldablePanel {
    background-color: #edd9da; }
  .graphViewContext .rightArea.Deu_Sek_I .directchildren .open .foldablePanel {
    background-color: #efe5d4; }
  .graphViewContext .rightArea .directchildren .open .foldablePanel .task {
    padding: 0.625rem 1rem 0.625rem 1rem;
    background-color: white; }
  .graphViewContext .rightArea.Ma_Primar .task .taskTitle:before {
    background-image: url("../img/plus_1.svg"); }
  .graphViewContext .rightArea.Ma_Sek_I .task .taskTitle:before {
    background-image: url("../img/plus_2.svg"); }
  .graphViewContext .rightArea.Eng_Sek_I .task .taskTitle:before {
    background-image: url("../img/plus_3.svg"); }
  .graphViewContext .rightArea.Frz_Sek_I .task .taskTitle:before {
    background-image: url("../img/plus_4.svg"); }
  .graphViewContext .rightArea.Deu_Primar .task .taskTitle:before {
    background-image: url("../img/plus_5.svg"); }
  .graphViewContext .rightArea.Deu_Sek_I .task .taskTitle:before {
    background-image: url("../img/plus_6.svg"); }
  .graphViewContext .rightArea.Ma_Primar .videoPlayer {
    background-color: #11579b; }
  .graphViewContext .rightArea.Ma_Sek_I .videoPlayer {
    background-color: #3794a8; }
  .graphViewContext .rightArea.Eng_Sek_I .videoPlayer {
    background-color: #66a04a; }
  .graphViewContext .rightArea.Frz_Sek_I .videoPlayer {
    background-color: #946a9e; }
  .graphViewContext .rightArea.Deu_Primar .videoPlayer {
    background-color: #d55356; }
  .graphViewContext .rightArea.Deu_Sek_I .videoPlayer {
    background-color: #d87c36; }
  .graphViewContext .rightArea .innerTitle {
    min-width: 132px; }
  .graphViewContext .rightArea .nodescription {
    margin-top: 1rem; }
  .graphViewContext .rightArea.Ma_Primar .directchildren li.hovered .taskTitle {
    background-color: #bbcadb; }
  .graphViewContext .rightArea.Ma_Sek_I .directchildren li.hovered .taskTitle {
    background-color: #c2dadd; }
  .graphViewContext .rightArea.Eng_Sek_I .directchildren li.hovered .taskTitle {
    background-color: #ceddc7; }
  .graphViewContext .rightArea.Frz_Sek_I .directchildren li.hovered .taskTitle {
    background-color: #dacfdb; }
  .graphViewContext .rightArea.Deu_Primar .directchildren li.hovered .taskTitle {
    background-color: #eac9ca; }
  .graphViewContext .rightArea.Deu_Sek_I .directchildren li.hovered .taskTitle {
    background-color: #ebd4c2; }

.graphViewContext .upperPart {
  margin-top: 0rem; }

.graphViewContext .lowerPart {
  margin-bottom: 0.5rem; }

.graphViewContext .upperPartWrapper {
  padding-left: 1.875rem;
  padding-right: 1.875rem; }
  @media screen and (max-width: 1024px) {
    .graphViewContext .upperPartWrapper {
      padding-left: 0.9375rem;
      padding-right: 0.9375rem; } }
  .graphViewContext .upperPartWrapper a {
    color: #238cab; }

.graphViewContext .subtitle {
  text-align: left; }
  .graphViewContext .subtitle h1 {
    margin: 0;
    padding-top: 1rem;
    padding-bottom: 1rem;
    padding-left: 1.875rem;
    padding-right: 1.875rem;
    display: block;
    text-align: left;
    font-size: 1.1875rem;
    font-family: "Open Sans", sans-serif;
    font-weight: 700;
    color: white;
    line-height: 1.25rem; }
    @media screen and (max-width: 1024px) {
      .graphViewContext .subtitle h1 {
        padding-left: 0.9375rem;
        padding-right: 0.9375rem; } }
    .graphViewContext .subtitle h1.closed {
      padding: 0;
      margin: 0;
      color: transparent;
      height: 1px; }

.graphViewContext .title {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: row;
      flex-direction: row;
  -ms-flex-align: center;
      align-items: center;
  height: 5.25rem;
  padding-left: 1.875rem;
  padding-right: 1.875rem;
  margin-bottom: 0;
  text-align: left;
  line-height: 5.25rem; }
  @media screen and (max-width: 1024px) {
    .graphViewContext .title {
      padding-left: 0.9375rem;
      padding-right: 0.9375rem; } }
  .graphViewContext .title h1 {
    font-size: 1.1875rem;
    line-height: normal;
    font-weight: 700;
    text-transform: uppercase;
    text-align: left;
    margin: 0;
    padding: 0;
    color: #02475d; }
  .graphViewContext .title h2 {
    font-size: 1.0625rem;
    line-height: normal;
    font-weight: 400;
    text-align: left;
    margin: 0;
    padding: 0;
    color: #02475d;
    letter-spacing: 0.03rem; }
  .graphViewContext .title .innerTitle {
    display: inline-block; }
  .graphViewContext .title .spacer {
    -ms-flex: 1 0 0%;
        flex: 1 0 0%; }
  .graphViewContext .title .navi {
    width: 150px;
    margin-left: 10%;
    background: url("../img/menu.svg") no-repeat right transparent;
    border: 0 none;
    color: transparent;
    max-height: 20px;
    cursor: pointer; }

.graphViewContext .directchildren {
  padding-left: 0;
  margin-bottom: 0; }
  .graphViewContext .directchildren li {
    margin-bottom: 2px;
    line-height: 0; }
    .graphViewContext .directchildren li > * {
      line-height: normal; }

.graphViewContext .task .taskTitle, .graphViewContext .leaf .taskTitle {
  padding-left: 1.875rem;
  padding-right: 3.25rem;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
  color: #03475a;
  font-size: 1.0625rem;
  font-weight: 600;
  background-color: #f1f1f1; }
  @media screen and (max-width: 1024px) {
    .graphViewContext .task .taskTitle, .graphViewContext .leaf .taskTitle {
      padding-left: 0.9375rem; } }
  @media screen and (max-width: 1024px) {
    .graphViewContext .task .taskTitle, .graphViewContext .leaf .taskTitle {
      padding-right: 3.25 / 2rem; } }

.graphViewContext .task .taskHeader {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
  font-size: 1.0625rem;
  font-weight: 600;
  padding-left: 1.875rem;
  padding-right: 1.875rem; }
  @media screen and (max-width: 1024px) {
    .graphViewContext .task .taskHeader {
      padding-left: 0.9375rem;
      padding-right: 0.9375rem; } }

.graphViewContext .task .taskTitle {
  cursor: pointer;
  position: relative;
  overflow: hidden; }
  .graphViewContext .task .taskTitle:before {
    position: absolute;
    width: 40px;
    height: 40px;
    content: "";
    top: 15px;
    right: 20px;
    background-repeat: no-repeat;
    background-color: transparent;
    background-size: 20px 20px;
    background-position: center center;
    transition-duration: 1s; }

.graphViewContext .task.open .taskTitle {
  margin-bottom: 0px; }
  .graphViewContext .task.open .taskTitle:before {
    transform: rotate(45deg);
    transition-duration: 1s; }

.graphViewContext .task .toTaskBrowser {
  padding-left: 1.875rem;
  padding-right: 1.875rem; }
  @media screen and (max-width: 1024px) {
    .graphViewContext .task .toTaskBrowser {
      padding-left: 0.9375rem;
      padding-right: 0.9375rem; } }

.graphViewContext .videoPlayer {
  display: none;
  overflow: hidden; }
  .graphViewContext .videoPlayer .paused .control {
    background: url("../img/video-play.svg") no-repeat center; }
  .graphViewContext .videoPlayer .playing .control {
    background: url("../img/video-pause.svg") no-repeat center; }
  .graphViewContext .videoPlayer .videoTitle .toggle {
    padding-left: 1.875rem;
    padding-right: 1.875rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
    text-transform: uppercase;
    text-align: left;
    width: 100%;
    border: 0 none;
    background: url("../img/video_close.svg") no-repeat center right 1.875rem;
    background-size: 25px 25px;
    color: white;
    cursor: pointer;
    font-size: 1.0625rem;
    font-weight: 600; }
    @media screen and (max-width: 1024px) {
      .graphViewContext .videoPlayer .videoTitle .toggle {
        padding-left: 0.9375rem;
        padding-right: 0.9375rem; } }
    .graphViewContext .videoPlayer .videoTitle .toggle:hover {
      background-color: #02475d; }
  .graphViewContext .videoPlayer.open .videoTitle .toggle {
    background-image: url("../img/video_open.svg"); }
  .graphViewContext .videoPlayer video {
    clear: both;
    width: 100%;
    z-index: 1;
    display: block; }
  .graphViewContext .videoPlayer .video {
    position: relative;
    overflow: hidden;
    display: none;
    text-align: center; }
    .graphViewContext .videoPlayer .video .videoLoading {
      position: absolute;
      width: 50px;
      height: 50px;
      content: "";
      top: 45%;
      left: 45%;
      background: url("../img/video_loader.svg") no-repeat center;
      background-repeat: no-repeat;
      background-color: transparent;
      background-size: 50px;
      background-position: center center;
      z-index: 1;
      animation-name: rotate360;
      animation-duration: 1s;
      animation-iteration-count: infinite;
      animation-timing-function: linear; }
    .graphViewContext .videoPlayer .video .videoWrapper {
      z-index: 10;
      position: relative; }
    .graphViewContext .videoPlayer .video .control {
      z-index: 15;
      display: none;
      position: absolute;
      width: 100%;
      height: 50px;
      top: 41%; }
    .graphViewContext .videoPlayer .video > iframe {
      display: inline-block; }

.graphViewContext .innerContent {
  overflow-y: auto;
  -ms-flex: 1 0 0%;
      flex: 1 0 0%;
  position: relative;
  font-size: 0.9375rem;
  font-family: "Open Sans", sans-serif;
  font-weight: 400;
  color: #205f71; }
  .graphViewContext .innerContent h3 {
    font-weight: 600; }

.graphViewContext .topGradient {
  display: none;
  height: 3rem;
  margin-bottom: -3rem;
  z-index: 10;
  /* FF3.6-15 */
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to top, rgba(255, 255, 255, 0) 0%, white 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ }

.graphViewContext .bottomGradient {
  display: none;
  height: 3rem;
  margin-top: -3rem;
  z-index: 10;
  /* FF3.6-15 */
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, white 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ }

.graphViewContext .toTaskBrowserButton, .graphViewContext .pdfDownload a {
  border-radius: 2rem;
  font-size: 0.75rem;
  background-color: rgba(2, 71, 93, 0.85);
  padding: 0.969rem;
  cursor: pointer;
  margin-top: 15px;
  margin-bottom: 15px;
  text-transform: uppercase;
  display: inline-block;
  color: white;
  background-repeat: no-repeat;
  background-position: center right 15px;
  background-size: 25px 25px;
  padding-right: 50px;
  font-weight: 700; }
  .graphViewContext .toTaskBrowserButton:hover, .graphViewContext .pdfDownload a:hover {
    background-color: #02475d; }

.graphViewContext .toTaskBrowserButton {
  background-image: url("../img/link_aufgabenbrowser.svg"); }

.graphViewContext .pdfDownload a {
  background-image: url("../img/download.svg"); }

.graphViewContext .foldablePanel .excerpt, .graphViewContext .foldablePanel .previewMainTitle {
  font-size: 0.9375rem;
  color: #1d1d1b; }

.graphViewContext .foldablePanel .previewMainTitle {
  font-weight: 700; }

.graphViewContext .foldablePanel .excerpt {
  font-style: italic; }

.graphViewContext .foldablePanel .competences, .graphViewContext .foldablePanel .ideas {
  padding-left: 1.875rem;
  padding-right: 1.875rem; }
  @media screen and (max-width: 1024px) {
    .graphViewContext .foldablePanel .competences, .graphViewContext .foldablePanel .ideas {
      padding-left: 0.9375rem;
      padding-right: 0.9375rem; } }

.graphViewContext .foldablePanel .competences ul, .graphViewContext .foldablePanel .ideas ul {
  padding: 0; }

.graphViewContext .foldablePanel .competences h3, .graphViewContext .foldablePanel .ideas h3 {
  font-size: 0.875rem;
  color: #02475d;
  font-weight: 600;
  margin-bottom: 3px;
  margin-top: 10px; }

.graphViewContext .foldablePanel .competences li, .graphViewContext .foldablePanel .ideas li {
  list-style: none;
  padding-bottom: 3px; }
  .graphViewContext .foldablePanel .competences li a, .graphViewContext .foldablePanel .ideas li a {
    font-size: 0.8125rem;
    font-weight: 400;
    color: #02475d;
    background-color: white;
    border-radius: 1rem;
    padding-left: 0.8rem;
    padding-right: 0.8rem;
    padding-top: 2px;
    padding-bottom: 2px;
    display: inline-block; }
    .graphViewContext .foldablePanel .competences li a:hover, .graphViewContext .foldablePanel .ideas li a:hover {
      background-color: rgba(2, 71, 93, 0.85);
      color: white; }

.graphViewContext .foldablePanel .ideas {
  padding-top: 2px; }

.graphViewContext .foldablePanel .task {
  margin-left: 0.9375rem;
  margin-right: 0.9375rem; }
  @media screen and (max-width: 1024px) {
    .graphViewContext .foldablePanel .task {
      margin-left: 0.46875rem;
      margin-right: 0.46875rem; } }

.graphViewContext .foldablePanel hr {
  margin-left: 0.9375rem;
  margin-right: 0.9375rem;
  border: 0 none;
  border-bottom: 2px dotted #aec4cb;
  margin-top: 15px;
  margin-bottom: 0px; }
  @media screen and (max-width: 1024px) {
    .graphViewContext .foldablePanel hr {
      margin-left: 0.46875rem;
      margin-right: 0.46875rem; } }

.graphViewContext .naviOverlay {
  display: none;
  overflow: auto;
  min-width: 360px;
  z-index: 30;
  height: 100vh;
  width: 30%;
  position: absolute;
  right: 0px;
  top: 0px;
  background-color: white;
  font-size: 1.0625rem;
  color: #02475d;
  font-weight: 400; }
  .graphViewContext .naviOverlay .innerNaviOverlay {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
        flex-direction: column;
    height: 100vh; }
  .graphViewContext .naviOverlay a {
    font-size: 1.0625rem;
    color: #02475d;
    font-weight: 400; }
  .graphViewContext .naviOverlay .header {
    margin-top: 2.25rem;
    margin-left: 2.25rem;
    margin-bottom: 1.75rem; }
  .graphViewContext .naviOverlay .overlayTitle {
    font-size: 1.1875rem;
    color: #02475d;
    font-weight: 700; }
  .graphViewContext .naviOverlay .closeButton {
    background: url("../img/menu_close.svg") no-repeat transparent;
    position: absolute;
    right: 25px;
    top: 3px;
    color: transparent;
    border: 0 none;
    cursor: pointer; }
  .graphViewContext .naviOverlay a {
    font-size: 1.0625rem;
    color: #02475d;
    position: relative;
    top: -2px;
    cursor: pointer; }
  .graphViewContext .naviOverlay ul {
    margin-left: 2.25rem;
    padding-left: 1.75rem; }
  .graphViewContext .naviOverlay .contextNavi {
    padding-bottom: 1rem; }
    .graphViewContext .naviOverlay .contextNavi li {
      margin-bottom: 0.8125rem; }
      .graphViewContext .naviOverlay .contextNavi li.Ma_Primar {
        list-style-image: url("../img/bullet_1.svg"); }
      .graphViewContext .naviOverlay .contextNavi li.Ma_Sek_I {
        list-style-image: url("../img/bullet_2.svg"); }
      .graphViewContext .naviOverlay .contextNavi li.Eng_Sek_I {
        list-style-image: url("../img/bullet_3.svg"); }
      .graphViewContext .naviOverlay .contextNavi li.Frz_Sek_I {
        list-style-image: url("../img/bullet_4.svg"); }
      .graphViewContext .naviOverlay .contextNavi li.Deu_Primar {
        list-style-image: url("../img/bullet_5.svg"); }
      .graphViewContext .naviOverlay .contextNavi li.Deu_Sek_I {
        list-style-image: url("../img/bullet_6.svg"); }
  .graphViewContext .naviOverlay .subNavi {
    background-color: #f1f1f1;
    padding-top: 1.25rem;
    -ms-flex: 1 0 0%;
        flex: 1 0 0%; }
    .graphViewContext .naviOverlay .subNavi li {
      margin-bottom: 0.8125rem;
      list-style-image: url("../img/bullet_0.svg"); }

@keyframes rotate360 {
  from {
    transform: rotate(0deg); }
  to {
    transform: rotate(360deg); } }

.page-graphView .logo {
  margin-bottom: 1rem; }

.page-graphView .pageContext {
  height: 100%;
  display: block; }
  .page-graphView .pageContext .graphViewContext {
    height: 100%; }

.selectionView {
  display: none;
  text-align: center; }
  .selectionView .selection {
    text-align: center;
    display: inline-block; }
    @media screen and (max-width: 1330px) {
      .selectionView .selection {
        width: 700px; } }
    .selectionView .selection .hoverWrapper {
      display: inline-block;
      border: 12px solid transparent;
      width: 11.25rem;
      height: 11.25rem;
      border-radius: 8rem;
      position: relative; }
      .selectionView .selection .hoverWrapper:hover.Ma_Primar {
        border-color: #11579b; }
      .selectionView .selection .hoverWrapper:hover.Ma_Sek_I {
        border-color: #3794a8; }
      .selectionView .selection .hoverWrapper:hover.Eng_Sek_I {
        border-color: #66a04a; }
      .selectionView .selection .hoverWrapper:hover.Frz_Sek_I {
        border-color: #946a9e; }
      .selectionView .selection .hoverWrapper:hover.Deu_Primar {
        border-color: #d55356; }
      .selectionView .selection .hoverWrapper:hover.Deu_Sek_I {
        border-color: #d87c36; }
      .selectionView .selection .hoverWrapper.rightPadding {
        margin-right: 0.8125rem; }
    @media screen and (max-width: 1330px) {
      .selectionView .selection .hoverWrapper {
        width: 9.5625rem;
        height: 9.5625rem;
        border-radius: 6.8rem; } }
    .selectionView .selection .option {
      display: inline-block;
      width: 11.5rem;
      height: 11.5rem;
      text-align: center;
      border-radius: 8rem;
      padding: 0;
      margin: 0;
      border: 0 none;
      cursor: pointer;
      color: white;
      position: absolute;
      top: -1px;
      left: -1px; }
      .selectionView .selection .option .innerOption {
        /* center vertically */
        font-family: "Open Sans", sans-serif;
        margin-left: 0.9rem;
        margin-right: 0.9rem; }
        @media screen and (max-width: 1330px) {
          .selectionView .selection .option .innerOption {
            margin-left: 0.765rem;
            margin-right: 0.765rem; } }
        .selectionView .selection .option .innerOption .subject, .selectionView .selection .option .innerOption .context {
          text-transform: uppercase; }
        .selectionView .selection .option .innerOption .subject {
          font-weight: 700;
          font-size: 1.25rem; }
          @media screen and (max-width: 1330px) {
            .selectionView .selection .option .innerOption .subject {
              font-size: 1.0625rem; } }
        .selectionView .selection .option .innerOption .context {
          margin-top: 1px;
          font-size: 1rem; }
          @media screen and (max-width: 1330px) {
            .selectionView .selection .option .innerOption .context {
              font-size: 0.85rem; } }
      .selectionView .selection .option.Ma_Primar {
        background-color: #11579b; }
      .selectionView .selection .option.Ma_Sek_I {
        background-color: #3794a8; }
      .selectionView .selection .option.Eng_Sek_I {
        background-color: #66a04a; }
      .selectionView .selection .option.Frz_Sek_I {
        background-color: #946a9e; }
      .selectionView .selection .option.Deu_Primar {
        background-color: #d55356; }
      .selectionView .selection .option.Deu_Sek_I {
        background-color: #d87c36; }
    @media screen and (max-width: 1330px) {
      .selectionView .selection .option {
        width: 9.775rem;
        height: 9.775rem;
        border-radius: 6.8rem; } }

.page-selectionView .page .pageContent .view {
  overflow: auto; }

.page-selectionView .title hr {
  margin-bottom: 4.875rem; }

@media screen and (max-width: 1330px) {
  .page-selectionView .title {
    font-weight: 600;
    font-size: 1.75rem; } }

@media screen and (max-width: 1330px) {
  .page-selectionView .title .text {
    font-weight: 600; } }

@media screen and (min-width: 1331px) {
  .page-selectionView .title .text {
    width: 430px; } }

@media screen and (max-width: 1330px) {
  .page-selectionView .title hr {
    margin-bottom: 2rem;
    margin-top: 0.69rem; } }

@media screen and (max-width: 1330px) {
  .page-selectionView .header .logo {
    margin-bottom: 3rem; } }

@media screen and (max-width: 1330px) {
  .page-selectionView .header .logo {
    margin-bottom: 3rem; } }

.page-selectionView .header .navi {
  display: inline-block;
  background: url("../img/pfeil_back.svg") no-repeat center left 1rem #c23047;
  background-size: 25px 60px;
  border-radius: 2rem;
  border: 0 none;
  color: white;
  font-size: 0.8125rem;
  line-height: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  padding: 0.969rem 0.969rem 0.969rem 3rem;
  cursor: pointer; }

.helpView {
  display: none;
  margin-left: 2.875rem;
  margin-right: 2.875rem;
  font-size: 1.0625rem;
  text-align: center; }
  .helpView .text {
    display: inline-block;
    width: 60%; }
  .helpView p {
    text-align: left; }
  .helpView ul {
    text-align: left; }
  .helpView a {
    text-decoration: underline;
    font-weight: 600; }

.page-helpView .page .pageContent .view {
  overflow: auto; }

.page-helpView .logo {
  margin-bottom: 1rem; }

.page-helpView .header .navi {
  display: inline-block;
  background: url("../img/pfeil_back.svg") no-repeat center left 1rem #c23047;
  background-size: 25px 60px;
  border-radius: 2rem;
  border: 0 none;
  color: white;
  font-size: 0.8125rem;
  line-height: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  padding: 0.969rem 0.969rem 0.969rem 3rem;
  cursor: pointer; }

.footer {
  margin-left: 2.875rem;
  margin-right: 2.875rem;
  text-transform: uppercase;
  font-size: 0.625rem;
  font-family: "Open Sans", sans-serif;
  font-weight: 700;
  height: 4.75rem;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: row;
      flex-direction: row;
  -ms-flex-align: center;
      align-items: center; }
  @media screen and (max-width: 1024px) {
    .footer {
      height: 3.5rem; } }
  .footer .left {
    float: left;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: row;
        flex-direction: row;
    -ms-flex-align: center;
        align-items: center; }
    .footer .left a {
      display: inline-block;
      margin-right: 2.8125rem; }
      .footer .left a.text {
        border-top: 2px solid transparent;
        border-bottom: 2px solid transparent; }
        .footer .left a.text:hover {
          border-bottom-color: white; }
      .footer .left a.isqbb {
        margin-right: 2.375rem; }
      .footer .left a.twitter {
        margin-right: 0.5rem; }
  .footer .right {
    float: right; }
    .footer .right a {
      margin-left: 1rem; }
  .footer .clear {
    clear: both; }
  .footer .twitter, .footer .facebook {
    width: 16px;
    height: 14px;
    display: inline-block;
    padding: 7px; }
  .footer .twitter {
    background: url("../img/twitter_off.svg") no-repeat center;
    background-size: 100%; }
    .footer .twitter:hover {
      background: url("../img/twitter_hover.svg") no-repeat center; }
  .footer .facebook {
    background: url("../img/facebook_off.svg") no-repeat center;
    background-size: 100%; }
    .footer .facebook:hover {
      background: url("../img/facebook_hover.svg") no-repeat center; }