/********************************
General
 *************************************/
@font-face {
  font-family: Handlee;
  src: url(Handlee-Regular.ttf);
}

#contentwrap {
  margin: 20px !important;
}
/********************************
Multilevel navbar dropdown per https://codepen.io/lublak/pen/mdmEdKN
*********************************/

.navbar-item.is-hoverable:hover .navbar-dropdown .navbar-dropdown {
  display: none;
}

.navbar-dropdown .navbar-item.is-hoverable:hover > .navbar-dropdown {
  display: block;
}
.navbar-dropdown .navbar-item .navbar-dropdown {
  top: -10px;
  margin-left: 100%;
  box-shadow: 0 16px 8px -8px rgba(10,10,10,.1), 8px 0 8px -8px rgba(10,10,10,.1);
}

.navbar-dropdown .navbar-item.has-dropdown {
  padding: 0;
}

.navbar-dropdown .navbar-item.has-dropdown > .navbar-link {
  width: 100%;
  padding: .375rem 1rem;
  background-color: #fff;
}

.navbar-dropdown .navbar-item.has-dropdown:hover > .navbar-link {
  background-color: #f5f5f5;
}

.navbar-dropdown .navbar-item.has-dropdown > .navbar-link:not(.is-arrowless) {
  padding-right: 2.5em;
}

/*******************************
Table
 ****************************/
table {
  font-size: small;
  border-collapse: collapse; /*collapse;*/
  border:1px solid #FF0000;
}

table td, th{
  border:1px solid #FF0000;
  color: black;
}

.table-container {
  overflow: auto;
  max-height: 600px;
}

.headcol {
  /* Keep row headings when scrolling */
  position: sticky;
  left: 0;

  /* Thick right border when unscrolled, thin border when scrolled. 2nd element maintains border at left when scrolling */
  box-shadow: inset -1px 0 #FF0000, -1px 0 #FF0000; /* phpStorm error but seems to work ok*/
}

.headrow {
  /* Keep column headings when scrolling */
  position: sticky;
  top: 0;
  height: 2em;
  font-size: 1em;
  background-color: white;
  /* Necessary to prevent the left-hand th from being obscured by vertical scrolling */
  z-index: 1;

  /* Thick bottom (inset) border when unscrolled, thin border when scrolled. 2nd element maintains border at top when scrolling */
  box-shadow: inset 0 -1px #FF0000, 0 -1px #FF0000;
}
.headrow2 {
  /* Keep column headings when scrolling */
  position: sticky;
  top: 2em;
  background-color: white;
  /* Necessary to prevent the left-hand th from being obscured by vertical scrolling */
  z-index: 1;

  /* Thick bottom (inset) border when unscrolled, thin border when scrolled. 2nd element maintains border at top when scrolling */
  box-shadow: inset 0 -1px #FF0000, 0 -1px #FF0000;
}
 .top-corner {
   /* Necessary to prevent the top left corner th from being obscured by horizontal scrolling */
   z-index: 2;
 }




/******************************
For rows to be compacted, .compact-row needs to ba assigned to tr
.table-cell-inner needs to be assigned to a div within any td that may be compacted
 ************************/
.compact-row {
  max-height: 50px;
}

.compact-row .table-cell-inner {
  max-height: 50px;
  overflow: hidden;
}

/***************************
Tooltip
 *****************************/
.tooltip {
  width: 0px;
  height: 0px;
  background-image: linear-gradient(to top right, transparent, transparent 90%, red);
}

/******************************
Classes derived from field tags
 **************************************/
.quantity {
  background-color: #fcefa1;
}

.gravity {
  background-color: #8dbdf1;
}

.acidity {
  background-color: #de9abb;
}

.sulphite {
  background-color: #85c1a8;
}

.other {
  background-color: #d4b46c;
}

.alcohol {
  background-color: #b1d059;
}

.package {
  background-color: #9e91bf;
}

.editable, .quantity .editable, .gravity .editable {
  background-color: wheat;
}

/********************************
Other sheet classes
 *********************************/
.calculated {
  font-style: italic;
  color: blue;
}

.date-seq-err {
  font-weight: bold;
  color: red;
}

.header {
  font-weight: bold;
  color: darkred;
  background-color: white;
}

.notapplicable {
  background-color: lightgrey;
}

.logoName {
  font-size: 3rem;
  font-family: Handlee, serif;
  font-style: italic;
  font-weight: bold;
}

/*********************
Harvest classes
 ***********************/
.fruitStandard {
  font-style: italic;
  color: red;
}

.fruitSeasonal {
  color: darkgreen;
  font-weight: bold;
}


/***********************************
  body initially set to partly transparent to minimise 'flashiness' when loading
**********************************/
body {
  opacity: 0.2;
}

/*************************
Other
 ***********************/

.url {
 color: lightblue;
  text-decoration: underline;
}

/*******************************
Print
 **********************************/
@media print {

  /*html * { float: none !important; }*/
  /* Remove headers and footers */ /* todo Not sure what this was for, but it messes up print display of forms */
  @page { margin: 0; }
  body {
    /*margin: 1.6cm;*/
  }

  .no_print {
    display: none !important;
  }

  #TracyEnableButton, #tracy-debug, .tracy-debug {
    visibility: hidden;
  }

  /* For mailings, only print the letter itself */
  /* Note that this means that emails and other page elements will not print */
  .ProcessPageEdit * {
    visibility: hidden;
  }
  .ProcessMailings * {
    visibility: hidden;
  }


  /* For booking-confirmation form */

  #cookie-warning {
    display: none !important;
  }

  #html-body.InputfieldColumnWidthsInit {
    margin: 10px;
  }

  #Inputfield_page_break {
    page-break-after: always;
  }

  label.InputfieldHeader {
    font-style: italic;
  }

  /* To prevent  menus and front-end 'Edit' link appearing in print version */
  a:first-of-type :not(.item-description) , .navbar{
    display: none !important;
  }

  a, a:visited {
    text-decoration: none;
  }

  .FormBuilder-booking-confirmation {
    width: 100%
  }

  .Inputfield_booking-confirmation_submit {
    visibility: hidden;
  }

  /* do not show radio buttons in print view */
  .Inputfield_payment_method, Inputfield_bacs_notes, Inputfield_cheque_notes, Inputfield_paypal_notes    {
    display: none !important;
  }

  .Inputfield_payment_instructions  p {
    width: 50%;
  }

  .Inputfield_payment_instructions > div > div:first-child {
    width: 50%;
    float: left;
  }

  .Inputfield_payment_instructions > div > div:not(:first-child) {
    width: 50%;
    float: right;
    margin-top: 0;
  }

  .InputfieldHeader {
    padding-top: 0;
    margin-bottom: 0;
  }

  .InputfieldForm .Inputfield {
    margin-bottom: 0;
  }

  .card-header {
    padding: 0;
  }

  h1 {
    font-size: 2rem !important;
  }


  /***********************************/

  .letter * {
    visibility: visible;
  }
  .letter {
    position: absolute;
    left: 0;
    top: 1.5cm;
    /*padding-left: 1.2em;*/
    /*padding-right: 1.2em;*/
    font-size: 11pt; /*0.9em;*/
    line-height: 14pt; /*1.3em;*/
    font-family: Georgia, Times, "Times New Roman", serif;
    width: 19cm;
    margin-left: 1.5cm;
    margin-right: 1.5cm;
  }

  .letter table {
    font-size: medium;
  }

  .letter-content {
    position: absolute;
    right: 0;
    top: 11cm;

  }
  
  .letter-content td, th {
    padding: 5px;
  }
  
  p :not(.addressee){
    margin-top: 10pt !important; /*.9em*/
    margin-bottom: 0 !important;
  }
  .letterhead-wrapper {
    visibility: visible;
    position: absolute;
    top: 0;
    left: 0;
  }
  .letter-content .letterhead-wrapper {
    position: relative;
    top: 0;
    left: 0;
  }

  .letterhead {
    padding-top: 1.5cm;
  }
  .letterhead .logo {
    height: 3cm;
    vertical-align: top;
  }
  .letterhead .logo-left {
    width: 12cm;
    text-align: left;
  }
  .letterhead .logo-centre {
    width: 2cm;
    text-align: center;
  }
  .letterhead .logo-right {
    width: 7cm;
    text-align: right;
  }

  table, table td {
    border: none;
  }

  .invoice-number {
    padding-top: 10pt;
  }

  .addressee {
    font-size: 12pt; /*1em;*/
    line-height: 16pt; /*1.5em;*/
    padding-left: 0.5cm;
  }
  .sender {
    font-size: 12pt; /*0.9em;*/
  }
  .sender-extra {
    font-size: 10pt; /*0.8em;*/
  }
  .fold-mark {
    display: flex;
    position: absolute;
    top: 0;
    height: 11cm;
    width: 21cm;
    text-decoration-color: lightgrey;

  }
  .fold-mark span {
    align-self: flex-end;
    width: 21cm;
    text-align: right;
  }
  .letter-content .fold-mark {
    display: none;
  }
  .subject {
    text-align: center;
    width:  18cm;
  }
  .letter-padding {
    visibility: visible;
    display: inline;
  }
  .letter-box {
    visibility: visible;
    display: block;
    clear: both;
    position:absolute;
    /*top: 11cm;*/
    width: 19cm;
  }
  .page-break {
    page-break-before: always;
    display: block;
    float: none;
    position: relative;
    padding-top: 3.2cm; /* = body margin + letter padding to get same top padding as first header */
  }
  .td {
    padding: 0 !important;
  }


}