:root {
    /* Our colours */
    --dp-font-size: 14px;
    --dp-green: #26822b;
    --dp-nav-background-color: #f7f7f7;
}

body {
    overflow-y: scroll;
    font-family: verdana, tahoma, arial, helvetica, sans-serif !important;
    font-size: var(--dp-font-size);
}

#header {
    background-color: var(--dp-nav-background-color);
    border-bottom: 1px solid #cfcfcf;
    position: relative;
}

.nav#left-nav {
    --dp-left-nav-colour: var(--bs-nav-link-color);
    background-color: var(--dp-nav-background-color);
    font-weight: bold;
    border-right: 1px solid #cfcfcf;
}
.nav#left-nav > a.nav-link {
    transition: initial;
    white-space: nowrap;
    padding: var(--bs-nav-link-padding-y) calc(2 * var(--bs-nav-link-padding-x));
    margin-bottom: 1px;
    background-color: var(--dp-nav-background-color);
}
.nav#left-nav > a.nav-link.submenu {
    margin-left: calc(3.25 * var(--bs-nav-link-padding-x));
    padding-left: 1rem;
    padding-right: 1rem;
}
.nav#left-nav > a.nav-link:not(.active) {
    color: var(--dp-left-nav-colour) !important;
}
.nav#left-nav > a.nav-link:not(.active):hover {
    color: var(--dp-left-nav-colour) !important;
    background-color: #e7e7e7;
}
.nav#left-nav > a.nav-link.active {
    background-color: var(--dp-left-nav-colour);
    color: white;
}
.nav#left-nav > a.nav-link > i {
    min-width: 16px;
}

.alert-warning {
    --bs-alert-border-color: #e7c45c;
}

.alert-sm {
    --bs-alert-padding-y: 0.75rem;
}

#content-area {
    background-color: white;
}

footer {
    font-size: 85%;
}

fieldset, fieldset > legend {
   all: revert;
   margin: 0;
}
fieldset {
    border: 1px solid var(--bs-border-color);
    border-radius: 0.25rem;
}
fieldset > legend {
    font-weight: bold;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

.card > img.card-img.homepage-icon {
  max-width: 120px;
  align-self: center;
}

.no-border {
  border-width: 0px;
}

.greyed-out {
    filter: grayscale(100%);
}

a[disabled], a[disabled] * {
    filter: grayscale(1);
    pointer-events: none;
    opacity: 0.6;
}

ul#top-tabs > a.nav-link:not(.active) {
  isolation: isolate;
  border-color: var(--bs-nav-tabs-link-hover-border-color);
  margin-top: 3px;
}
ul#top-tabs > a.nav-link.active {
  font-weight:bold;
}

ul.dropdown-menu > li > hr {
  margin: 0.5rem 0;
}

.dropdown-item.disabled > img {
    opacity: 0.5;
}

td.actions-icons-column {
  font-size: 16px;
  white-space: nowrap;
  width: 1px;   /* This suggested width is only to make the <td> as narrow as possible. Use of white-space:nowrap makes the <td> fit it's content. */
}

td.actions-icons-column img {
  max-width: 16px;
  height: auto;
  vertical-align: middle;
}

td.actions-icons-column i {
  color: #26822b;
}

tbody#original_licences_section > tr > td.actions-icons-column > a {
  visibility: hidden;
}

div.modal {
  overflow-y: scroll !important;
}

/*img.action-icon-16 {
  max-width: 16px;
  height: auto;
}*/

th.column-fit-content, td.column-fit-content {
  white-space: nowrap;
  width: 1px;   /* This suggested width is only to make the <td> as narrow as possible. Use of white-space:nowrap makes the <td> fit it's content. */
}

.font-size-normal {
  font-size: inherit !important;
}

.font-size-small {
    font-size: 80%;
}

.text-dinkey-green {
  color: #26822b;
}

.twitter-typeahead {
    width: 100%;
}

.form-select {
    font-size: var(--dp-font-size);
}

.form-control.form-control-xs {
    font-size: 0.75rem;
    padding: 0.12rem 0.25rem;
    border-radius: 0.2rem;
    min-height: unset;
}

.btn-xs {
    --bs-btn-padding-y: 0.25rem;
    --bs-btn-padding-x: 0.5rem;
    --bs-btn-font-size: 0.75rem;
}

/**************************************************/
/****           DONGLE HISTORY STUFF           ****/
/**************************************************/

.dongle-history-entry:not(:last-child), .later-items-button-container {
  background-image: url('/dinkey-oms/images/timeline-line.png'); background-repeat: repeat-y; background-position: center;
}

#btnShowLaterHistoryItems {
    --bs-btn-bg: white;
}

.dongle-history-entry .dongle-history-entry-datetime {
  background-color: #26822b;
  color: white;
}

.dongle-history-entry .dongle-history-event-bubble {
  border: 1px solid #26822b;
  padding: var(--bs-card-spacer-y) var(--bs-card-spacer-x);
  position: relative;
}

.dongle-history-entry .dongle-history-event-bubble.dongle-history-event-bubble-right {
  margin-left: 5px;
}

.dongle-history-entry .dongle-history-event-bubble.dongle-history-event-bubble-left {
  margin-right: 5px;
}

.dongle-history-entry .dongle-history-event-bubble.dongle-history-event-bubble-right > img.dongle-history-event-bubble-pointer-right {
  position: absolute;
  left: -12px;
}

.dongle-history-entry .dongle-history-event-bubble.dongle-history-event-bubble-right > img.dongle-history-event-bubble-pointer-left {
  display: none;
}

.dongle-history-entry .dongle-history-event-bubble.dongle-history-event-bubble-left > img.dongle-history-event-bubble-pointer-left {
  position: absolute;
  right: -12px;
}

.dongle-history-entry .dongle-history-event-bubble.dongle-history-event-bubble-left > img.dongle-history-event-bubble-pointer-right {
  display: none;
}

#txtDongleHistoryDateFrom, #txtDongleHistoryDateTo {
    width: 120px;
    font-size: 90%;
}

/******************************************************/
/****           end DONGLE HISTORY STUFF           ****/
/******************************************************/

section#help > section {
    margin-top: 1.5rem;
}

section#help section {
    padding: 0.5rem;
}

section#help section:target {
    background-color: #e7f0fe;
}

section#help > section > section {
    margin: -0.5rem;
}

section#help section :last-child {
    /*margin-bottom: 0px;*/
}

/******************************************************/
/****               Data Area Viewer               ****/
/******************************************************/

.data-area-col-offsets {
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */
}

.data-area-char-field {
    /*border-left: 1px solid rgba(255,255,255,1.0);
    border-right: 1px solid rgba(255,255,255,1.0);*/
}

/******************************************************/
/****             end Data Area Viewer             ****/
/******************************************************/