#main-navigation {
    margin-bottom: 20px;
    box-shadow: 0px 1px 5px darkgrey;
}

div#footer-main {
    margin-top: 20px;
}

div#footer-copyright {
    background-color: #416a96;
}

th.province-title {
    width: 46px;
}

img.province-icon {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}

#mapid {
    width: 320px;
    height: 240px;
}

/* For Vue.js transitions */
.fade-enter-active, .fade-leave-active {
    transition: opacity .5s;
}

.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */
{
    opacity: 0;
}

/* Province grapes */
.province {
    stroke-width: 1.5;
    fill: lightgrey;
    stroke: red;
}

.activeProvince {
    stroke: green !important;
    stroke-width: 2.5 !important;
}

.activeText {
    font-weight: bold;
}

[data-toggle="collapse"].collapsed .if-not-collapsed {
  display: none;
}
[data-toggle="collapse"]:not(.collapsed) .if-collapsed {
  display: none;
}

.indent-except-first {
    padding-left: 10px;
    text-indent: -10px;
}

/* IE11 fix for Lightbox */
.ekko-lightbox .modal-dialog {
  flex: 100%!important;
  margin-left: 0;
  margin-right: 0;
}

th.active {
  text-decoration: underline;
}

th.active .arrow {
  opacity: 1;
}

.arrow {
  display: inline-block;
  vertical-align: middle;
  width: 0;
  height: 0;
  margin-left: 5px;
  opacity: 0.66;
}

.arrow.asc {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 4px solid #000;
}

.arrow.dsc {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid #000;
}

/* Tooltips, for https://www.npmjs.com/package/v-tooltip */

.vue-tooltip {
  display: block !important;
  z-index: 10000;
}

.vue-tooltip .tooltip-inner {
  background: black;
  color: white;
  border-radius: 16px;
  padding: 5px 10px 4px;
}

.vue-tooltip .tooltip-arrow {
  width: 0;
  height: 0;
  border-style: solid;
  position: absolute;
  margin: 5px;
  border-color: black;
  z-index: 1;
}

.vue-tooltip[x-placement^="top"] {
  margin-bottom: 5px;
}

.vue-tooltip[x-placement^="top"] .tooltip-arrow {
  border-width: 5px 5px 0 5px;
  border-left-color: transparent !important;
  border-right-color: transparent !important;
  border-bottom-color: transparent !important;
  bottom: -5px;
  left: calc(50% - 5px);
  margin-top: 0;
  margin-bottom: 0;
}

.vue-tooltip[x-placement^="bottom"] {
  margin-top: 5px;
}

.vue-tooltip[x-placement^="bottom"] .tooltip-arrow {
  border-width: 0 5px 5px 5px;
  border-left-color: transparent !important;
  border-right-color: transparent !important;
  border-top-color: transparent !important;
  top: -5px;
  left: calc(50% - 5px);
  margin-top: 0;
  margin-bottom: 0;
}

.vue-tooltip[x-placement^="right"] {
  margin-left: 5px;
}

.vue-tooltip[x-placement^="right"] .tooltip-arrow {
  border-width: 5px 5px 5px 0;
  border-left-color: transparent !important;
  border-top-color: transparent !important;
  border-bottom-color: transparent !important;
  left: -5px;
  top: calc(50% - 5px);
  margin-left: 0;
  margin-right: 0;
}

.vue-tooltip[x-placement^="left"] {
  margin-right: 5px;
}

.vue-tooltip[x-placement^="left"] .tooltip-arrow {
  border-width: 5px 0 5px 5px;
  border-top-color: transparent !important;
  border-right-color: transparent !important;
  border-bottom-color: transparent !important;
  right: -5px;
  top: calc(50% - 5px);
  margin-left: 0;
  margin-right: 0;
}

.vue-tooltip.popover .popover-inner {
  background: #f9f9f9;
  color: black;
  /*padding: 24px;*/
  border-radius: 5px;
  box-shadow: 0 5px 30px rgba(black, .1);
}

.vue-tooltip.popover .popover-arrow {
  border-color: #f9f9f9;
}

.vue-tooltip[aria-hidden='true'] {
  visibility: hidden;
  opacity: 0;
  transition: opacity .15s, visibility .15s;
}

.vue-tooltip[aria-hidden='false'] {
  visibility: visible;
  opacity: 1;
  transition: opacity .15s;
}

div.v-popover {
    text-align: right;
}

.VueCarousel-slide {
  position: relative;
  color: #fff;
  font-family: Arial;
  font-size: 24px;
  text-align: center;
  min-height: 100px;
}

.label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.publication-details {
    padding-left: 40px;
}