@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');

.overlay {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background: rgba(51,51,51,0.7);
  z-index: 1900;
}

html, body {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

p{
  font-size: .9em;
}

h2 {
  font-size: 18px;
}

a, .btn-link {
  color: #0366d6;
}

.btn-primary {
  color: #fff;
  background-color: #1b6ec2;
  border-color: #1861ac;
}

.btn-success {
  color: #fff;
  background-color: #28a745;
  border-color: #28a745;
}

app {
  position: relative;
  display: flex;
  flex-direction: column;
}

.top-row {
  height: 3.5rem;
  display: flex;
  align-items: center;
}

.main {
  flex: 1;
}

.title h1 {
  text-align: center;
  color: #0c377b;
  margin-top: 40px;
}

.page-container {
  min-height: 100vh;
}

.footer {
  position: relative;
  padding: 1rem;
  text-align: center;
  background-color: #002147;
  bottom: 0;
  width: 100%;
}

.footer_top {
  padding: 0;
}

.footer_bottom {
  padding: 0 0 10px 0;
  margin-left: auto;
  margin-right: auto;
}

.footer_bottom p {
  margin: 0;
  text-align: center;
  font-size: 0.85em;
  font-weight: 300;
}

.video80 {
  width: 80vw;
}

.video60 {
  width: 60vw;
}

.videoContainer {
  text-align: center;
  margin-top: 2vw;
}

.videoTitle {
  top: 50%;
  position: absolute;
  margin: 0;
}

.staticImage {
  max-width: 100%;
}

.centeredImage {
  margin-left: auto;
  margin-right: auto;
}

.flags {
  padding: 0 0 10px 0;
  margin-left: auto;
  margin-right: auto;
}

.flags p {
  margin: 0;
  text-align: center;
  font-size: 12px;
  color: white;
}

.copy p {
  margin: 0;
  text-align: center;
  font-size: 12px;
  color: white;
}


.home {
  padding: 1vw;
}

.indented-text {
  margin-left: 5vw;
}

/*.filter-form-control {
  padding: .3vw !important;
  font-size: .8vw !important;
}
*/
.filter-form-control span span {
  float: right;
}


th.rotate {
  height: 140px;
  white-space: nowrap;
}

  th.rotate > div {
    transform: translate(0px, 51px) rotate(270deg);
    width: 30px;
  }

tr.row-borders td {
  border-style: solid;
  border-width: 1px;
  border-color: gray;
}

tr.row-no-borders {
  border-style: solid;
  border-width: 1px;
  border-color: gray;
}

.gray-back {
  background-color: #e3e3e3;
}

.td-centre {
  text-align: center;
}

.navbar {
  background-color: #002147 !important;
}

.nav-oi-person {
  color: white;
}

.main .top-row {
  background-color: #f7f7f7;
  border-bottom: 1px solid #d6d5d5;
  justify-content: flex-end;
}

  .main .top-row > a, .main .top-row .btn-link {
    white-space: nowrap;
    margin-left: 1.5rem;
  }

  .main .top-row a:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
  }

.content {
  padding-top: 1.1rem;
}

.leftImage {
  float: left;
  padding: 0 20px 20px 0;
}

.rightImage {
  float: right;
  padding: 0 20px 20px 0;
}

.footnotes {
  font-size: xx-small;
}

.navbar-toggler {
  background-color: rgba(255, 255, 255, 0.1);
}

.valid.modified:not([type=checkbox]) {
  outline: 1px solid #26b050;
}

.invalid {
  outline: 1px solid red;
}

.validation-message {
  color: red;
}

.impersonating {
  text-align: center;
  background: orange;
/*  margin-top: -15px;
*/  color: white;
}

.nav-profile-person {
  padding-top: 8px;
  padding-bottom: 8px;
  color: white;
}

.nav-profile-caret {
  padding-top: 12px;
  padding-bottom: 8px;
  padding-right: 8px;
  font-size: xx-small;
  color: white;
}

.header-textbox {
  width: 8em !important;
  display: inline-block;
}

#blazor-error-ui {
  background: lightyellow;
  bottom: 0;
  box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
  display: none;
  left: 0;
  padding: 0.6rem 1.25rem 0.7rem 1.25rem;
  position: fixed;
  width: 100%;
  z-index: 1000;
}

#blazor-error-ui .dismiss {
  cursor: pointer;
  position: absolute;
  right: 0.75rem;
  top: 0.5rem;
}

.ta-centre{
  text-align: center;
}

.spinner-parent {
  height: 90vh;
  position: relative;
}

.sk-circle {
  position: absolute;
  top: 40%;
  left: 45%;
  transform: translate(50%,50%);
}

.tooltip-wrapper {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
  cursor: help;
}

span.tooltip-inner {
  visibility: hidden;
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: 25vw;
  background-color: #363636;
  color: #fff;
  text-align: center;
  padding: 15px 10px;
  border-radius: 6px;
  z-index: 10000;
  font-size: 0.9em;
  text-align: left;
}

.right-of-screen-tooltip-wrapper span.tooltip-inner {
  transform: translateX(-90%);
}

.left-of-screen-tooltip-wrapper span.tooltip-inner {
  transform: translateX(-10%);
}

span.tooltip-inner > ul > li {
  list-style: disc;
  list-style-position: inside;
}

span.tooltip-inner > ul > li > ul > li {
  list-style: circle;
  list-style-position: inside;
  margin-left: 10px;
}

span.tooltip-inner::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

.right-of-screen-tooltip-wrapper span.tooltip-inner::after {
  left: 90%;
}

.left-of-screen-tooltip-wrapper span.tooltip-inner::after {
  left: 10%;
}

.tooltip-wrapper:hover span.tooltip-inner {
  visibility: visible;
}

.submit {
  padding: 30px;
}

.submit > textarea {
  width: 100%;
  height: 250px;
}

.alert-success {
  background-color: #3ecc71;
  color: white;
  padding-bottom: 0.75rem;
}
.alert-success h2 {
  color: white;
}

.blazored-typeahead__clear {
  color: #495057 !important;
}

@media (max-width: 991.9px) {
  .table-responsive {
    white-space: break-spaces;
    text-align: left;
    font-size: 1.6vw;
  }

  .table-responsive-button {
    white-space: break-spaces;
    text-align: left;
    font-size: 1.6vw;
  }
}

@media (min-width: 992px) {
  .table-responsive {
    white-space: break-spaces;
    text-align: left;
    font-size: .9vw;
  }

  .table-responsive-button {
    white-space: break-spaces;
    text-align: left;
    font-size: .9vw;
  }
}

  /*
  Members Homepage
*/
  .notificationDiv {
    padding: 0.75rem 1.25rem 1.75rem 1.25rem;
  }

    .notificationDiv > h2 {
      margin: 10px 0 0 0;
    }

    .notificationDiv > p {
      margin-bottom: 0;
    }

  .notificationDate {
    font-size: 70%;
  }

  .notificationButton {
    float: right;
    color: #fff;
    background-color: #1d2124;
    border-color: #171a1d;
  }

  .main-filters {
    margin-left: 2px;
    margin-right: 2px;
  }

  .assessment-table {
    font-size: small !important;
    border-style: solid !important;
    border-width: 2px !important;
    border-color: #002147;
    border-radius: 5px !important;
  }

    .assessment-table tr th {
      text-align: center;
    }

    .assessment-table tr td {
      text-align: center;
      padding: .25em;
    }

  /*
  Members Homepage
*/
  .in-progress-filter-field {
    width: 10vw;
  }



  /* 
    below styles were copied from bootstrap 4.5.0 and renamed to be compatible with blazor
    - '.validation-message' == bootstrap '.invalid-feedback'
    - '.invalid' == bootstrap '.is-invalid'
*/
  .validation-message {
    width: 100%;
    margin-top: 0.25rem;
    font-size: 80%;
    color: #dc3545;
  }

  .invalid ~ .validation-message {
    display: block;
  }

  .form-control.invalid {
    border-color: #dc3545;
    padding-right: calc(1.5em + 0.75rem);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23dc3545' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
  }

    .form-control.invalid:focus {
      border-color: #dc3545;
      box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
    }

  textarea.form-control.invalid {
    padding-right: calc(1.5em + 0.75rem);
    background-position: top calc(0.375em + 0.1875rem) right calc(0.375em + 0.1875rem);
  }

  .form-check-input.invalid ~ .form-check-label {
    color: #dc3545;
  }

  .form-check-input.invalid ~ .validation-message {
    display: block;
  }

  .ECLogo {
    width: 250px;
  }

  .red {
    color: red;
  }

  .pagination {
    cursor: pointer;
  }

  /* 30% width image if larger than -lg- */
  .img30vw {
    max-width: 30vw;
  }

  /*
 CSS for tree folder structure
*/
  summary {
    /*  display: block;
*/ cursor: pointer;
    outline: 0;
  }

    summary::-webkit-details-marker {
      display: none;
    }

  .tree-nav__item {
    /*  display: block;
*/ white-space: nowrap;
    /*  color: #ccc;
*/ position: relative;
  }

    .tree-nav__item.is-expandable::before {
      border-left: 1px solid #333;
      content: "";
      height: 100%;
      left: 0.8rem;
      position: absolute;
      top: 2.4rem;
      height: calc(100% - 2.4rem);
    }

    .tree-nav__item .tree-nav__item {
      margin-left: 2.4rem;
    }

    .tree-nav__item.is-expandable[open] > .tree-nav__item-title::before {
      font-family: "ionicons";
      transform: rotate(90deg);
    }

    .tree-nav__item.is-expandable > .tree-nav__item-title {
      padding-left: 2.4rem;
    }

      .tree-nav__item.is-expandable > .tree-nav__item-title::before {
        position: absolute;
        will-change: transform;
        transition: transform 300ms ease;
        font-family: "ionicons";
        color: #fff;
        font-size: 1.1rem;
        content: "\f125";
        left: 0;
        display: inline-block;
        width: 1.6rem;
        text-align: center;
      }

  .tree-nav__item-title {
    cursor: pointer;
    display: block;
    outline: 0;
    color: #fff;
    font-size: 1.5rem;
    line-height: 3.2rem;
  }

    .tree-nav__item-title .icon {
      display: inline;
      padding-left: 1.6rem;
      margin-right: 0.8rem;
      color: #666;
      font-size: 1.4rem;
      position: relative;
    }

      .tree-nav__item-title .icon::before {
        top: 0;
        position: absolute;
        left: 0;
        display: inline-block;
        width: 1.6rem;
        text-align: center;
      }

    .tree-nav__item-title::-webkit-details-marker {
      display: none;
    }

  .tree-nav {
    text-align: left;
  }

  details {
    margin-left: 20px;
  }

  .namebox {
    margin-left: 20px;
  }

  @media (max-width: 991.98px) {
    .img30vw {
      max-width: 100vw;
    }
  }

  /* Absolute Center Spinner */
  .loading {
    position: fixed;
    z-index: 999;
    height: 2em;
    width: 2em;
    overflow: visible;
    margin: auto;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
  }

    /* Transparent Overlay */
    .loading:before {
      content: '';
      display: block;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0,0,0,0.1);
    }

    /* :not(:required) hides these rules from IE9 and below */
    .loading:not(:required) {
      /* hide "loading..." text */
      font: 0/0 a;
      color: transparent;
      text-shadow: none;
      background-color: transparent;
      border: 0;
    }

      .loading:not(:required):after {
        content: '';
        display: block;
        font-size: 10px;
        width: 1em;
        height: 1em;
        margin-top: -0.5em;
        -webkit-animation: spinner 1500ms infinite linear;
        -moz-animation: spinner 1500ms infinite linear;
        -ms-animation: spinner 1500ms infinite linear;
        -o-animation: spinner 1500ms infinite linear;
        animation: spinner 1500ms infinite linear;
        border-radius: 0.5em;
        -webkit-box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.5) -1.5em 0 0 0, rgba(0, 0, 0, 0.5) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
        box-shadow: rgba(0, 0, 0, 0.75) 1.5em 0 0 0, rgba(0, 0, 0, 0.75) 1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) 0 1.5em 0 0, rgba(0, 0, 0, 0.75) -1.1em 1.1em 0 0, rgba(0, 0, 0, 0.75) -1.5em 0 0 0, rgba(0, 0, 0, 0.75) -1.1em -1.1em 0 0, rgba(0, 0, 0, 0.75) 0 -1.5em 0 0, rgba(0, 0, 0, 0.75) 1.1em -1.1em 0 0;
      }

  /* Animation */

  @-webkit-keyframes spinner {
    0% {
      -webkit-transform: rotate(0deg);
      -moz-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      transform: rotate(0deg);
    }

    100% {
      -webkit-transform: rotate(360deg);
      -moz-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
      -o-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }

  @-moz-keyframes spinner {
    0% {
      -webkit-transform: rotate(0deg);
      -moz-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      transform: rotate(0deg);
    }

    100% {
      -webkit-transform: rotate(360deg);
      -moz-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
      -o-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }

  @-o-keyframes spinner {
    0% {
      -webkit-transform: rotate(0deg);
      -moz-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      transform: rotate(0deg);
    }

    100% {
      -webkit-transform: rotate(360deg);
      -moz-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
      -o-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }

  @keyframes spinner {
    0% {
      -webkit-transform: rotate(0deg);
      -moz-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      transform: rotate(0deg);
    }

    100% {
      -webkit-transform: rotate(360deg);
      -moz-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
      -o-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }

  @media (max-width: 992.9px) {
    .main .top-row:not(.auth) {
      display: none;
    }

    .main .top-row.auth {
      justify-content: space-between;
    }

    .main {
      margin-bottom: 2em;
      min-height: 82vh;
    }

      .main .top-row a, .main .top-row .btn-link {
        margin-left: 0;
      }

    .header-container {
      width: 100%;
    }

    .navbar-toggler-right {
      float: right;
    }
  }

  @media (min-width: 992px) {
    app {
      flex-direction: row;
    }

    .main .top-row {
      position: sticky;
      top: 0;
    }

    .main {
      margin-bottom: 2em;
      min-height: 82vh;
    }

      .main > div {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
      }

    .navbar-toggler {
      display: none;
    }

    .navbar {
      padding: 0;
    }

    .header-container {
      width: 90vw;
      margin-left: auto;
      margin-right: auto;
    }

    .navbar-brand {
      float: left;
    }

    .header-menu-height {
      height: 56px;
      max-height: 56px;
    }

    h6.dropdown-header {
      color: #428bca;
      font-size: 1vw;
      padding: 3px 0px;
    }

    a.dropdown-item {
      padding: .25rem .25rem;
    }

    .main-dropdown-menu {
      margin-left: -340px;
      width: 70vw;
      margin-right: 0;
      padding: 20px 0;
      font-size: .9vw;
      box-shadow: 4px 4px 5px 6px rgba(0, 0, 0, 0.15);
    }
  }

  @media (max-width: 449.9px) {
    p {
      font-size: 2.5vw;
    }

    h3.ec {
      margin-top: 2em !important;
      font-size: 4vw !important;
    }

    h5.ec {
      margin-top: 1em !important;
      font-size: 3.5vw !important;
    }

    .blazored-typeahead__input {
      font-size: 3.5vw !important;
    }

    button.ec {
      font-size: 3.5vw !important;
    }

    .ec-input-header {
      font-size: .8em !important;
    }

    .ec-input-text {
      font-size: .8em !important;
    }

    .ec-li-text {
      font-size: .8rem !important;
    }

    .text-09vw {
      font-size: .8rem !important;
    }

    .ec-input-button {
      font-size: .8em !important;
    }

    .ec-input-text > span {
      font-size: 1.2em !important;
    }

    .ec-small-card-margin {
      margin-top: 1em;
    }
  }

  @media (min-width: 450px) and (max-width: 992px) {
    h3.ec {
      margin-top: 2em !important;
      font-size: 2vw !important;
    }

    h5.ec {
      margin-top: 1em !important;
      font-size: 1.5vw !important;
    }
  }

  @media (min-width: 992px) {
    h3.ec {
      margin-top: 2em !important;
      font-size: 1.5em !important;
    }

    h5.ec {
      margin-top: 1em !important;
      font-size: 1em !important;
    }
  }


.en-gb {
  background: url('/images/flags/flag-s-en-GB.png');
  width: 36px !important;
  height: 20px !important;
}

.fr-fr {
  background: url('/images/flags/flag-s-fr-FR.png');
  width: 36px !important;
  height: 20px !important;
}

.et-ee {
  background: url('/images/flags/flag-s-et-EE.png');
  width: 36px !important;
  height: 20px !important;
}