/* FONTS */
@font-face {
  font-family: Frutiger;
  src: url(../fonts/frutiger/FrutigerLTStd-Cn_0.otf);
}
@font-face {
  font-family: FrutigerBlack;
  src: url(../fonts/frutiger/FrutigerLTStd-Black_0.otf);
}
@font-face {
  font-family: FrutigerRoman;
  src: url(../fonts/frutiger/FrutigerLTStd-Roman_0.otf);
}
@font-face {
  font-family: FrutigerLight;
  src: url(../fonts/frutiger/FrutigerLTStd-LightCn_0.otf);
}

/*===================
        PAGE
===================*/
body {
  font-family: FrutigerLight, Verdana, Geneva, Tahoma, sans-serif;
  font-size:14px;
  background: linear-gradient(90deg, #ffffff 0%, #e5e7ea 100%) 0 0 fixed;
}

div.pageWrapper {
  margin: auto;
  max-width: 1100px;
}

/* CURSUS TABLE */
.pdeTable {
  width: 100%;
  border-collapse: collapse;
  text-align: center;
}

.pdeTable tr td:first-child { text-align: left; }

.pdeTableTitle td, tfoot td {
  font-family: Frutiger;
  font-weight: normal;
  background-color: #00858C;
  color: white;
  border: 1px solid #00858C;
}

.ueName {
  border-left: 1px solid black;
  border-right: 1px solid black;
}

.ueName span {
  padding-left: 10px;
  color: #0a58ca;
  text-underline-offset: 3px;
  text-decoration: underline;
}

.ueName span:hover { cursor: pointer; }

.pdeTable tbody tr td { padding: 10px 5px; }
.pdeTable tfoot tr td { padding: 5px; }

.ueCredits { border-right: 1px solid black; }

/* Modal */
::backdrop {
  background-color: black;
  opacity: 0.50;
}

dialog[open] { opacity: 1; }

dialog {
  width: 800px;
  padding: 0 5 5 5;
  border: none;
  opacity: 0;
  transition: all 0.5s allow-discrete;
}

@starting-style {
  dialog[open] {
    opacity: 0;
  }
}

dialog > div {
  padding: 0 10 0 10;
  text-align: right;
  padding-right: 10px;
}

dialog h1 {
  text-transform: none !important;
  margin-top: 0;
  margin-left: 10px;
  font-size: 24px;
  font-weight: normal;
  text-align: left;
  font-size: 1.6rem;
}

dialog > div > span {
  font-size: 25px;
  cursor: pointer;
}

dialog .ueTable {
  width: 100%;
  border-collapse: collapse;
  text-align: center;
  table-layout: fixed;
}

dialog .ueTable thead th {
  font-family: Frutiger;
  font-weight: normal;
  background-color: #00858C;
  color: white;
  border: 1px solid #00858C;
  padding: 5px 0;
}

dialog .ueTable tbody tr td { padding: 5px; }

dialog .ueTable tbody tr td p { margin: 5px 0; }

dialog .ueTable tbody tr td.aaName {
  max-width: 50%;
  width: 50%;
}

dialog .ueTable tbody tr td ul {
  list-style-type: none;
  padding: 0;
}

@media screen and (max-width: 800px) {
  table.ueTable {
    border: 0;
  }

  table.ueTable thead {
    border: none;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }

  table.ueTable tr {
    border-bottom: 3px solid #ddd;
    display: block;
    margin-bottom: .625em;
  }

  table.ueTable td {
    border-bottom: 1px solid #ddd;
    display: block;
    font-size: .8em;
    text-align: right;
  }

  table.ueTable tbody tr td.aaName {
    max-width: 100%;
    width: 100%;
  }

  table.ueTable td::before {
    /*
    * aria-label has no advantage, it won't be read inside a table
    content: attr(aria-label);
    */
    content: attr(data-label);
    float: left;
  }

  table.ueTable td:last-child {
    border-bottom: 0;
  }
}