/**
 *  CSS for the Nord Theme
 *  @author Gwyneth Llewelyn (20210427)
 *
 * Copyright (c) 2016-present Arctic Ice Studio <development@arcticicestudio.com>
 * Copyright (c) 2016-present Sven Greb <development@svengreb.de>
 *
 * Project:	Nord
 * Version:	0.2.0
 * Repository: https://github.com/arcticicestudio/nord
 * License:	MIT
 * References:
 *   https://www.w3.org/TR/css-variables
 *   https://www.w3.org/TR/selectors/#root-pseudo
 *   https://drafts.csswg.org/css-variables
 *   https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables
 *   http://warpspire.com/kss
 *   https://github.com/kss-node/kss-node
 */
/*
An arctic, north-bluish color palette.
Created for the clean- and minimal flat design pattern to achieve a optimal focus
and readability for code syntax highlighting and UI.
It consists of a total of sixteen, carefully selected, dimmed pastel colors for a
eye-comfortable, but yet colorful ambiance.
*/

/* Reference colours from the official Nord palette (v0.2.0)
:root {
  /* Polar Night
  --nord0:  #2e3440;  /* background and area coloring
  --nord1:  #3b4252;  /* elevated, more prominent or focused UI elements like status bars and text editor gutters; panels, modals and floating popups like notifications or auto completion; user interaction/form components like buttons, text/select fields or checkboxes; more inconspicuous and passive elements like borders or as dropshadow between different components
  --nord2:  #434c5e;  /* currently active text editor line as well as selection- and text highlighting color
  --nord3:  #4c566a;  /* UI elements like indent- and wrap guide marker. In the context of code syntax highlighting it is used for comments and invisible/non-printable characters.
  /* Snow Storm
  --nord4:  #d8dee9;  /* UI elements like the text editor caret. In the context of syntax highlighting it is used as text color for variables, constants, attributes and fields.
  --nord5:  #e5e9f0;  /* more subtle/inconspicuous UI text elements that do not need so much visual attention. Other use cases are also state animations like a more brighter text color when a button is hovered, active or focused.
  --nord6:  #eceff4;  /* elevated UI text elements that require more visual attention. In the context of syntax highlighting it is used as text color for plain text as well as reserved and structuring syntax characters like curly- and square brackets.
  /* Frost
  --nord7:  #8fbcbb;  /* UI elements that should, next to the primary accent color nord8, stand out and get more visual attention. In the context of syntax highlighting it is used for classes, types and primitives.
  --nord8:  #88c0d0;  /* primary UI elements with main usage purposes that require the most visual attention. In the context of syntax highlighting it is used for declarations, calls and execution statements of functions, methods and routines.
  --nord9:  #81a1c1;  /* secondary UI elements that also require more visual attention than other elements.
  In the context of syntax highlighting it is used for language specific, syntactic and reserved keywords as well as: support characters; operators; tags; units; punctuations like (semi)colons, points and commas
  --nord10: #5e81ac;  /* tertiary UI elements that require more visual attention than default elements. In the context of syntax highlighting it is used for pragmas, comment keywords and pre-processor statements.
  /* Aurora
  --nord11: #bf616a;  /* UI elements that are rendering error states like linter markers and the highlighting of Git diff deletions. In the context of syntax highlighting it is used to override the highlighting of syntax elements that are detected as errors.
  --nord12: #d08770;  /* more advanced or dangerous functionality. In the context of syntax highlighting it is used for special syntax elements like annotations and decorators.
  --nord13: #ebcb8b;  /* UI elements that are rendering warning states like linter markers and the highlighting of Git diff modifications. In the context of syntax highlighting it is used to override the highlighting of syntax elements that are detected as warnings as well as escape characters and within regular expressions.
  --nord14: #a3be8c;  /* UI elements that are rendering success states and visualizations and the highlighting of Git diff additions. In the context of syntax highlighting it is used as main color for strings of any type like double/single quoted or interpolated.
  --nord15: #b48ead;  /* Rarely used for UI elements, but it may indicate a more uncommon functionality. In the context of syntax highlighting it is used as main color for numbers of any type like integers and floating point numbers. */
}


/* dotPROJECT REQUIRED CLASSES */
body, body.loginform {
  background-color: #2e3440; /* var(--nord0); */
  color: #e5e9f0; /* var(--nord5); */
  margin-top: 0px;
  margin-left: 0px;
  margin-right: 0px;
  margin-bottom: 10px;
  font-family: Inter, Sans-Serif;
  font-optical-sizing: auto;
  font-size: 14px;
}

ul {
  margin-left: 25px;
}

dl {
  margin-top: 0px;
  padding-left: 1px;
}
dt {
  margin-top: 0.5rem;
  color: #8fbcbb; /* var(--nord7); */
  font-weight: bold;
}
dd {
  margin-bottom: 0px;
  margin-left: 1.5rem;
}

em,
i {
  font-weight: normal;
  text-decoration: none;
  font-style: italic;
}

a,
a:link,
a:visited {
  color: #88c0d0; /* var(--nord8); */
  text-decoration: none;
  border-radius: 0.25rem;
  transition: color 200ms ease-in-out 0s, background-color 200ms ease-in-out 0s;
  background-color: transparent;
}
a:hover {
  color: #88c0d0; /* var(--nord8); */
  text-decoration: none;
  background-color: rgba(76, 86, 106, 0.8);
}
a:active {
  color: #88c0d0; /* var(--nord8); */
  text-decoration: none;
  background-color: transparent;
}

input,
select {
  color: #d8dee9; /* var(--nord1); */
  background-color: #434c5e; /* var(--nord2); */
  border-radius: 0.1rem;
  cursor: pointer;
  font-family: Inter, Sans-Serif;
}

td {
  font-size: 0.8rem;
  color: #e5e9f0; /* var(--nord5); */
}

tr {
  font-size: 0.8rem;
}

h1,
.title {
  font-size: 1.5rem;
  font-weight: bold;
  color: #eceff4; /* var(--nord6); */
  margin-bottom: 0px;
  margin-top: 5px;
}

h2,
.subtitle {
  font-size: 1.25rem;
  font-weight: bold;
  color: #eceff4; /* var(--nord6); */
  margin-bottom: 0px;
  margin-top: 15px;
}

h3 {
  font-size: 1.1rem;
  font-weight: bold;
  color: #eceff4; /* var(--nord6); */
  margin-bottom: 0px;
  margin-top: 35px;
}

.bordertable {
  border: 1px #3a4252 solid; /* var(--nord1); */
  border-radius: 0.1rem;
  background-color: #434b5e; /* var(--nord2); */
}
table.bordertable td {
  background-color: #4b556a; /* var(--nord3); */
}
table.bordertable td.companyName {
  background-color: #5e81ac; /* var(--nord10); */
}

/* standard classes to avoid in-line HTML styling (gwyneth 20210504) */
.align-right {
  text-align: right;
}
.align-left {
  text-align: left;
}
.align-center {
  text-align: center;
}
.align-justify {
  text-align: justify;
}

/* not defined anywhere... :-( (gwyneth 20210501) */
.smallNorm {
  font-weight: normal;
  font-size: small;
}

button,
.button {
  border: 1px #4c566a solid; /* var(--nord3); */
  font-size: 0.8rem;
  color: #d8dee9; /* var(--nord4); */
  background-color: #3b4252; /* var(--nord1); */
  border-radius: 0.25rem;
  /*width: 100px; too small for some translations*/
  transition: color 200ms ease-in-out 0s, background-color 200ms ease-in-out 0s;
  cursor: pointer;
}

button:hover,
.button:hover {
  color: #d8dee9; /* var(--nord4); -- same as non-hover */
  background-color: #4c566a; /* var(--nord3); - swapping border with background colour, etc. */
  border: 1px #3b4252 solid; /* var(--nord1); */
}

.item {
  color: #5e81ac; /* var(--nord10); */
}

.ok {
  color: #a3be8c; /* var(--nord14); */
}

.text {
  border: 1px #4c566a solid; /* var(--nord3); */
  font-family: Inter, Sans-Serif;
  font-size: 0.8rem;
  color: #e5e9f0; /* var(--nord5); */
  /*height: 12pt; Select boxes are too small in Mozilla */
}

textarea,
.textarea {
  font-family: Inter, Sans-Serif;
  font-size: 0.8rem;
  color: #d8dee9; /* var(--nord4); */
  background-color: #3b4252; /* var(--nord1); */
  border-radius: 0.1rem;
}

textarea.small {
  border: 1px #4c566a solid; /* var(--nord3); */
  font-family: Inter, Sans-Serif;
  font-size: 0.7rem;
}

/* dotProject Top Banner and Top Nav Customization */
table.banner {
  width: 100%;
  border: none;
  border-spacing: 0;
}
table.banner tr {
  background-image: linear-gradient(to right, #2e3440, #5e81ac); /* var(--nord0) to var(--nord10) */
  font-size: 1rem;
}
table.banner td,
table.banner th {
  border: none;
  padding: 3px;
}
table.banner th.title {
  background-color: transparent; /* var(--nord10); */
  color: #eceff4; /* var(--nord6); */
  text-align: left;
  font-weight: bold;
  font-size: 1rem;
}
table.banner a,
table.banner a:hover {
  color: #eceff4; /* var(--nord6); */
  text-decoration: none;
  background-color: transparent;
}
table.banner th.logo {
  background-color: transparent; /* var(--nord10); */
  text-align: right;
}
table.banner th.logo a,
table.banner th.logo a:link,
table.banner th.logo a:visited,
table.banner th.logo a:hover,
table.banner th.logo a:active {
  color: transparent;
  background-color: transparent; /* var(--nord10); */
  text-decoration: none;
}
table.banner th.logo img {
  /* height: 100%; */
  width: 8rem;
  border: none;
}

td.nav {
  border: 1px solid #4c566a; /* var(--nord3); */
  background-color: #3b4252; /* var(--nord1); */
  color: #eceff4; /* var(--nord6); */
}

/*
**********************************
Begin IE TD buttonizing
**********************************
*/

td.clsBtnUp {
  cursor: hand;
  color: #3b4252; /* var(--nord1); */
  padding: 0 3;
  border: inset 2px;
}

td.clsBtnDown {
  cursor: hand;
  color: #2e3440; /* var(--nord0); */
  padding: 0 3;
  border: inset 2px;
}

td.clsBtnOn {
  cursor: hand;
  color: #2e3440; /* var(--nord0); */
  padding: 0 3;
  border: outset #4c566a 2px; /* var(--nord3); */
}

td.clsBtnOff {
  color: #eceff4; /* var(--nord6); */
  padding: 0 3;
  /* tab-index: 0; /* not valid for td */
  border: solid #8fbcbb 2px; /* var(--nord7); */
}

td.topBtnOff {
  color: #2e3440; /* var(--nord0); */
  padding: 0 3;
  /* tab-index: 0; /* not valid for td */
  border: solid #3b4252 2px; /* var(--nord1); */
}

td.nav {
  color: #3b4252; /* var(--nord1); */
}

/* Standard table 'spreadsheet' style */
table.tbl {
  background: #2e3440; /* var(--nord0); */
}
table.tbl th {
  background-color: #5e81ac; /* var(--nord10); */
  color: #eceff4; /* var(--nord6); */
  list-style-type: disc;
  list-style-position: inside;
  border: outset #e5e9f0 1px; /* var(--nord5); */
  font-weight: normal;
  text-align: center;
}
table.tbl tr:nth-child(odd) {
  background-color: #2e3440; /* var(--nord0); */
}
table.tbl tr:nth-child(even) {
  background-color: #3b4252; /* var(--nord1); */
}
table.tbl td {
  background-color: transparent;
}
table.tbl tfoot tr td:last-child {  /* Last element on the footer usually has a button to the right (gwyneth 20210504) */
  text-align: right;
  background-color: #5e81ac; /* var(--nord10); */
}

/* a 'standard' table */
table.std {
  border: solid #5e81ac 2px; /* var(--nord10); */
  background-color: #2e3440; /* var(--nord0); */
}
table.std th {
  background-color: #5e81ac; /* var(--nord10); */
  color: #eceff4; /* var(--nord6); */
  list-style-type: disc;
  list-style-position: inside;
  border: outset #e5e9f0 1px; /* var(--nord5); */
}

table.std td.hilite {
  background-color: #434c5e; /* var(--nord2); */
}

/* contacts table */
table.contacts {
  background-color: #5e81ac; /* var(--nord10); */
}

table.contacts td {
  background-color: #3b4252; /* var(--nord1); */
}

table.contacts td.hilite {
  background-color: #434c5e; /* var(--nord2); */
}

/* links in header blocks */
a.hdr,
a.hdr:link,
a.hdr:visited {
  color: #88c0d0; /* var(--nord8); */
  text-decoration: none;
  border-radius: 0.25rem;
  transition: color 200ms ease-in-out 0s, background-color 200ms ease-in-out 0s;
  background-color: transparent;
}
a.hdr:hover {
  color: #5e81ac; /* var(--nord10); */
  text-decoration: none;
  background-color: rgba(76, 86, 106, 0.8);
}
a.hdr:active {
  color: #88c0d0; /* var(--nord8); */
  text-decoration: none;
  background-color: transparent;
}

/* tabbed boxes */
td.tabon {
  background: #3b4252; /* var(--nord1); */
  border-top: outset #2e3440 2px; /* var(--nord0); */
  border-left: outset #2e3440 2px; /* var(--nord0); */
  border-right: outset #3b4252 2px; /* var(--nord1); */
  border-bottom: none;

  /* background-image: url('./style/default/images/tabSelectedBg.png');*/
  /* background-image: url('images/tabSelectedBg.png');   /* TBD (probably can be a fill) */
}
td.taboff {
  background: #434c5e; /* var(--nord2); */
  border-top: solid #3b4252 1px; /* var(--nord1); */
  border-left: solid #3b4252 1px; /* var(--nord1); */
  border-right: solid #3b4252 1px; /* var(--nord1); */
  border-bottom: solid #3b4252 2px; /* var(--nord1); */

  /* background-image: url('./style/default/images/tabBg.png'); */
  /* background-image: url('images/tabBg.png');   /* TBD (probably can be a fill) */
}
td.tabsp {
  border-bottom: solid #3b4252 2px; /* var(--nord1); */
}
td.tabox, .tabox-bottom {
  background-color: #5e81ac; /* var(--nord10); */
  border-left: solid #5e81ac 2px; /* var(--nord10); */
  border-right: solid #5e81ac 2px; /* var(--nord10); */
  border-bottom: solid #3b4252 2px; /* var(--nord1); */
}

/* Message styles */
.warning {
  color: #d08770; /* var(--nord12); */
}
.error {
  color: #bf616a; /* var(--nord11); */
}
.message {
  color: #b48ead; /* var(--nord15); */
}

.no_ {
  color: #bf616a; /* var(--nord11); */
}

/* Task colours */
.task-color-fg {
  color: #2e3440; /* var(--nord0); */
}
.task-future-bg {
  background-color: #eceff4; /* var(--nord6); */
}
.task-started-bg {
  background-color: #d8dee9; /* var(--nord4); */
}
.task-late-bg {
  background-color: #ebcb8b; /* var(--nord13); */
}
.task-overdue-bg {
  background-color: #bf616a; /* var(--nord11); */
}
.task-done-bg {
  background-color: #a3be8c; /* var(--nord14); */
}
/* used only on vw_tasks.php */
.task-unknown-bg {
  background-color: #4c566a; /* var(--nord3); */
}
/* used only on vw_tasks.php */
.task-border {
  border-style: solid;
  border-width: 1px;
}

/* Popup calendar */
body.popcal {
  background-color: #2e3440; /* var(--nord0); */
}

table.poptitle {
  background-color: #3b4252; /* var(--nord0); */
}
table.poptitle td {
  background-color: #3b4252; /* var(--nord0); */
}
table.poptitle th {
  background-color: #3b4252; /* var(--nord0); */
  color: #eceff4; /* var(--nord6); */
  font-size: 1rem;
  font-weight: bold;
}

table.popcal {
  background-color: #3b4252; /* var(--nord0); */
}

table.popcal th {
  background-color: #3b4252; /* var(--nord0); */
  color: #eceff4; /* var(--nord6); */
  font-size: 0.9rem;
  font-weight: normal;
}

table.popcal td {
  background-color: #3b4252; /* var(--nord0); */
  font-size: 0.8rem;
  text-align: center;
}

table.popcal td.empty {
  background-color: #3b4252; /* var(--nord1); */
}

table.mocal td.day {
  background-color: #3b4252; /* var(--nord1); */
  text-align: center;
}

table.popcal td.today {
}

table.popcal td.weekend {
  background-color: #bf616a; /* var(--nord11); */
}

table.popcal a,
table.popcal a:link,
table.popcal a:visited {
  color: #5e81ac; /* var(--nord10);, but also see the defaults for <a> above */
  text-decoration: none;
  border-radius: 0.25rem;
  transition: color 200ms ease-in-out 0s, background-color 200ms ease-in-out 0s;
}
table.popcal a:hover {
  color: #81a1c1; /* var(--nord9); */
  text-decoration: none;
  background-color: rgba(76, 86, 106, 0.8);
}

table.popcal a.today,
table.popcal a.today:link,
table.popcal a.today:visited {
  color: #81a1c1; /* var(--nord9); */
  font-weight: bold;
  text-decoration: none;
  border-radius: 0.25rem;
  transition: color 200ms ease-in-out 0s, background-color 200ms ease-in-out 0s;
}
table.popcal a.today:hover {
  color: #5e81ac; /* var(--nord10); */
  text-decoration: none;
  background-color: rgba(76, 86, 106, 0.8);
}

table.popcal a.weekend,
table.popcal a.weekend:link,
table.popcal a.weekend:visited {
  color: #bf616a; /* var(--nord11); */
  text-decoration: none;
  border-radius: 0.25rem;
  transition: color 200ms ease-in-out 0s, background-color 200ms ease-in-out 0s;
}
table.popcal a.weekend:hover {
  color: #d08770; /* var(--nord12); */
  text-decoration: none;
  background-color: rgba(76, 86, 106, 0.8);
}

table.popcal a.empty,
table.popcal a.empty:link,
table.popcal a.empty:visited {
  color: #d08770; /* var(--nord12); */
  text-decoration: none;
  border-radius: 0.25rem;
  transition: color 200ms ease-in-out 0s, background-color 200ms ease-in-out 0s;
}
table.popcal a.empty:hover {
  color: #ebcb8b; /* var(--nord13); */
  text-decoration: none;
  background-color: rgba(76, 86, 106, 0.8);
}

/* month calendar - title area */
table.motitle {
  background-color: #3b4252; /* var(--nord1); */
  border: 1px #4c566a solid; /* var(--nord3); */
}
table.motitle td {
  background-color: #434c5e; /* var(--nord2); */
}
table.motitle th {
  background-color: #434c5e; /* var(--nord2); */
  font-size: 0.9rem;
}

table.mocal {
  background-color: #3b4252; /* var(--nord1); */
}
table.mocal th {
  background-color: #434c5e; /* var(--nord2); */
  color: #eceff4; /* var(--nord6); */
}
table.mocal td {
  border: 1px #4c566a solid; /* var(--nord3); */
}
table.mocal td.week {
  vertical-align: top;
  background-color: #3b4252; /* var(--nord1); */
  height: 80px;
}
table.mocal td.empty {
  background-color: #3b4252; /* var(--nord1); */
  color: #d8dee9; /* var(--nord4); */
  text-align: left;
  vertical-align: top;
  height: 80px;
}
table.mocal td.day {
  background-color: #2e3440; /* var(--nord0); */
  color: #8fbcbb; /* var(--nord7); */
  text-align: left;
  vertical-align: top;
  height: 80px;
}
table.mocal td.today {
  background-color: #3b4252; /* var(--nord1); */
  color: #88c0d0; /* var(--nord8); */
  text-align: left;
  vertical-align: top;
}

table.mocal td.weekend {
  background-color: #bf616a; /* var(--nord11); */
  text-align: left;
  vertical-align: top;
}

table.mocal .event {
}

/* mini calendar - title area */
table.minititle {
  border: 1px #4c566a solid; /* var(--nord3); */
}
table.minititle td {
}
table.minititle th {
  font-weight: normal;
}

table.minical {
  border: 1px #4c566a solid; /* var(--nord3); */
}
table.minical th {
  font-weight: normal;
}
table.minical td {
}
table.minical td.week {
}
table.minical td.empty {
  color: #3b4252; /* var(--nord1); */
}
table.minical td.day {
  text-align: center;
}
table.minical td.today {
  background-color: #3b4252; /* var(--nord1); */
  text-align: center;
}
table.minical td.weekend {
  text-align: center;
}
table.minical .event {
}

/* daily calendar */
table.tbl td.event {
  background-color: #ebcb8b; /* var(--nord13); */
}

table.tbl td.event td {
  background-color: #ebcb8b; /* var(--nord13); */
}

.hidden {
  display: none;
}

th strong {
  float: left;
  margin-top: 2px;
}
th form {
  float: right;
  padding: 0;
  margin: 0;
  margin-top: 1px;
}

.disabled {
  color: #3b4252; /* var(--nord1); */
}

/* Folder module */
#folder-list {
  background-color: #2e3440; /* var(--nord0); */
  /* layer-background-color: #2e3440; /* obsolete property */
}

#folder-list ul {
  padding: 0;
  margin: 0;
}
#folder-list ul li {
  list-style: none;
  margin-top: -1px;
  margin-bottom: 0px;
  border: 0px solid #3b4252; /* var(--nord1); */
}
#folder-list ul li ul li {
  margin-left: 25px;
}

.folder-name {
  display: block;
  height: 16px;
  padding-top: 0px;
  background: #2e3440; /* var(--nord0); */
  border-bottom: 1px solid #4c566a; /* var(--nord3); */
  border-right: 1px solid #4c566a; /* var(--nord3); */
  margin-bottom: 0px;
}

.folder-name-current {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
  border-bottom: 1px solid #4c566a; /* var(--nord3); */
}

.has-files {
  font-weight: bold;
}

#folder-list .tbl {
  margin-top: 2px;
}
#folder-list .tbl th {
  border: none;
}

#folder-list p {
  padding: 3px 5px;
  margin-top: -5px;
  margin-left: 25px;
  margin-right: 25px;
  border: 1px solid #3b4252; /* var(--nord1); */
  border-top: none;
  background: #434c5e; /* var(--nord2); */
}
