/*-----------------*\
|                   |
|       GRID        |
|                   |
\*-----------------*/

#introduction_text {
  grid-column: span var(--nr_columns_half);
  padding-top: 2rem;
  padding-right: 1rem;
}

#introduction_image {
  grid-column: span var(--nr_columns_half);
}

/*-----------------*\
|                   |
|       TABS        |
|                   |
\*-----------------*/

@media (max-width: 767px) {
  #main_header {
    padding-bottom: 3rem;
  }
}

@media (min-width: 768px) {
  #main_header {
    padding-bottom: 0rem;
  }
}

#plantinfo_tabs,
#kweekinfo_tabs {
  margin-bottom: 0;
  padding-left: 0;
  grid-column: span var(--nr_columns);
}

#plantinfo_tabs {
  margin-top: -2.3rem;
  padding-bottom: 0.75rem;
}

@media (min-width: 768px) {
  #plantinfo_tabs {
    margin-top: -2.3rem;
  }
}

@media (max-device-width: 1024px) {
  .text_area_intro {
    grid-column: span var(--nr_columns);
  }
}
@media (min-device-width: 1025px) {
  .text_area_intro {
    grid-column: span var(--nr_columns_two_third);
  }
}

#kweekinfo_tabs {
  margin-bottom: 1rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px dashed rgb(100, 100, 100);
}

#plantinfo_tabs li,
#kweekinfo_tabs li {
  display: inline-block;
  list-style-type: none;
  margin: 0 1.5rem 0 0;
  padding: 0px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.8rem;
  font-weight: 600;
}

#kweekinfo_tabs .active a {
  padding-bottom: 0.55rem;
}

#plantinfo_tabs li:last-child,
#kweekinfo_tabs li:last-child {
  margin-right: 0;
}

#plantinfo_tabs li a {
  color: rgba(0,0,0, 0.5);
}

#kweekinfo_tabs li a {
  color: rgb(0,0,0);
}

#plantinfo_tabs .active a, #plantinfo_tabs li a:hover,
#kweekinfo_tabs .active a, #kweekinfo_tabs li a:hover {
  color: rgb(var(--color_main1));
}

#plantinfo_tabs .active a {
  position: relative;
}

#plantinfo_tabs .active a:after {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0.625rem 0.625rem 0.625rem;
  border-color: transparent transparent #fff transparent;
  position: absolute;
  top: 1.7em;
  left: 50%;
  margin-left: -0.75rem;
  bottom: 0;
  background: 0 0;
}

/* Style the tab content */
.tabcontent {
  padding-top: 2rem;
}

.full_width,
.tabcontent > h2 {
  grid-column: span var(--nr_columns);
}

.text_area {
  grid-column: span var(--nr_columns_two_third);
}

.hide_tab {
  display: none;
}

.side {
  grid-column: span var(--nr_columns_one_third);
}

.frame {
  padding: 1rem;
}
.frame:not(.warning) {
  background-color: rgba(var(--color_main6), 0.1);
  border-size: 0.0625rem;
  border-style: solid;
  border-color: rgba(var(--color_main6), 0.3);
  border-radius: 0.1875rem;
}

.frame:not(.warning) h4 {
  color: rgb(var(--color_main6));
}

.warning {
  border-style: solid;
  border-color: rgb(var(--color_warning));
  border-width: 0.0625rem 0.0625rem 0.125rem 0.0625rem;
}

.frame:not(:last-child) {
  margin-bottom: 2rem;
}

.frame figcaption {
  position: relative;
  z-index: 100;
  font-family: var(--font_sans);
  font-size: 0.8rem;
  line-height: 2rem;
  text-align: right;
}

/*-----------------*\
|                   |
|    CULTIVATION    |
|   METHOD PICKER   |
|                   |
\*-----------------*/

#cultivation_method_picker {
  margin-top: 1rem;
  margin-bottom: 0.5rem;
  padding: 0.5rem 1rem;
  background-color: rgba(0,0,0, 0.05);
  border-radius: 0.3rem;
}

#cultivation_method_picker h5 {
  font-family: var(--font_sans);
  font-weight: 400;
  font-style: italic;
  margin-bottom: 0.4rem;

}

#cultivation_method_dropdown {
  width: 100%;
  height: 2rem;
  margin-bottom: 0.2rem;
}


/*-----------------*\
|                   |
|    CULTIVATION    |
|    INSTRUCTIONS   |
|                   |
\*-----------------*/

@media (max-device-width: 767px) {
  .kweektabcontent.grid_wrapper {
    padding: 0rem;
  }
}

p.cultivation_operation_type_navigation {
  font-family: var(--font_sans);
  font-size: 0.8rem;
  color: rgb(155, 155, 155);
}

ol.directions, ul.directions:not(.introductie), ol.method, ul.elaboration {
  list-style: none;
  padding-left: 2.5rem;
}
ol.optional {
  list-style: none;
  padding-left: 1.625rem; /* 2.5rem - 0.8125rem (padding from frame) - 0.0625rem (frame border thickness) */
}

li.tip > p, li.aandachtspunt > p, li.waarschuwing > p {
  position: relative;
  font-size: 1rem;
  font-weight: 400;
  color: rgb(150, 150, 150);
  border-radius: 0.1875rem;
}

li.aandachtspunt > p:before {
  font-weight: 600;
}

li.aandachtspunt:before {
  content: "⚠";
  color: rgb(var(--color_attention));
}

li.tip:before {
  content: "💡";
  color: rgb(var(--color_main1));
}

li.waarschuwing > p:before {
  content: "⚠ ";
  color: rgb(var(--color_warning));
}

ul.elaboration > li:not(.waarschuwing) {
  margin: 0 0 0rem 0;
  position: relative;
}

li.waarschuwing {
  margin: 0 0 0rem -2.5rem;
  padding: 0.6rem 0.8rem;
  position: relative;
}

li.waarschuwing {
  border: 1px solid rgb(var(--color_warning));
  border-radius: 0.1875rem;
  background-color: rgba(var(--color_warning), 0.05);
}

li.waarschuwing > p {
  margin-bottom: 0 !important;
}

li.start_of_methods > h5 {
  margin-bottom: 1rem;
}

ol.directions > li, ol.method > li, li.wachtmoment {
  margin: 0 0 0rem 0;
  position: relative;
}
ol.directions > li::before, ol.method > li::before, li.wachtmoment::before, ul.elaboration > li::before, ol.optional > li::before {
  position: absolute;
  width: 1.5rem;
  font-family: var(--font_sans);
  font-size: 1rem;
  line-height: 1.8rem;
  font-weight: bold;
  text-align: right;
}

ol.directions > li::before, ol.method > li::before, li.wachtmoment::before {
  top: 0;
  left: -2.5rem;
}
ul.elaboration > li::before{
  top: 0;
  left: -2.3rem;
}
ol.optional > li::before {
  left: 0;  
}

ol.directions li.optional_frame, ol.method li.optional_frame {
  left: -2.5rem;
  width: calc(100% + 2.5rem);
  margin-bottom: 1rem;
  padding: 0rem 1rem 0.0625rem 0.8125rem; /* 0.8125rem = 1rem - 0.1875rem */
  background-color: rgb(var(--color_main1), 0.05);
  border: 0.0625rem rgba(var(--color_main1), 0.3) solid;
  border-radius: 0.1875rem;
}

section.optional_frame {
  left: -2.5rem;
  margin-bottom: 1rem;
  padding: 0rem 1rem 0.0625rem 0.8125rem; /* 0.8125rem = 1rem - 0.1875rem */
  background-color: rgba(var(--color_main1), 0.05);
  border: 0.0625rem rgba(var(--color_main1), 0.3) solid;
  border-radius: 0.1875rem;
}

ol.directions > li.handeling:not(.single), ol.directions > li.start_of_methods {
  counter-increment: direction-counter;
}
ol.optional > li.handeling:not(.single) {
  counter-increment: optional-direction-counter;
}
ol.method > li {
  counter-increment: method-direction-counter;
}

ol.directions > li::before, ul.directions.wachtmoment > li::before {
  color: rgb(var(--color_main1));
}

ol.directions > li.handeling:not(.single)::before, ol.directions > li.start_of_methods::before {
  content: counter(direction-counter);
}

ol.optional > li.handeling:not(.single)::before {
  content: counter(optional-direction-counter);
}

ol.method > li.handeling:not(.single)::before {
  content: counter(method-direction-counter);
}

ol.directions > li.single:not(.optional)::before, ol.method > li.single:not(.optional)::before, li.optional_frame > ol.optional > li.single::before {
  content: "▸" !important;
}

ol > li.wachtmoment::before {
  content: '\29D7';
}

ol.method > li::before, ul.method > li::before, ol.optional > li::before, section.optional_frame > ol.directions > li::before {
  color: rgb(128, 128, 128);
}

ol.start_of_list {
  counter-reset: direction-counter;
}

ol.start_of_method {
  counter-reset: method-direction-counter;
}

ol.optional > h4 {
  margin-top: 0;
}

h6.optional_label {
  color: rgb(var(--color_main1));
}
li.optional_frame > h6.optional_label {
  margin: 0.5rem 0 0.5rem 1.6875rem; /* = 1.6875rem - 0.8125rem*/
}
section.optional_frame > .optional_label {
  margin: 0.5rem 0 0.5rem 0rem; /* = 1.6875rem - 0.8125rem*/
}

/*-----------------*\
|                   |
|    CULTIVATION    |
|     CALENDAR      |
|                   |
\*-----------------*/

:root {
  --width_cultivation_type_name: 9.375rem; /* width of the label showing the name of the cultivation type */
  --color_pre-sprout: 145, 200, 75;
  --color_sow: 145, 100, 75;
  --color_wean_out: 115, 220, 90;
  --color_thin: 200, 170, 170;
  --color_dibble: 190, 80, 50;
  --color_take_cutting: 0, 130, 200;
  --color_harden_off: 130, 70, 200;
  --color_expedite: 255, 150, 150;
  --color_plant: 0, 130, 60;
  --color_grub: 155, 50, 60;
  --color_transplant: 0, 190, 120;
  --color_bleach: 150, 255, 150;
  --color_harvest: 255, 60, 85;
  --color_harvest_seed: 0, 130, 200;
  --color_cultivation_calendar_border: 255, 255, 255;
}

#cultivaton_calendar_heading {
  display: inline-block;
  margin-top: 0.5rem;
  margin-bottom: 0;
  padding: 0.2rem 1rem 0rem 1rem;
  background-color: rgb(255, 255, 255);
  color: rgb(100, 100, 100);
  border: solid 1px rgb(200, 200, 200);
  border-bottom: none;
  border-top-left-radius: 0.3rem;
  border-top-right-radius: 0.3rem;
  font-family: var(--font_sans);
  font-size: 1rem;
  font-weight: 600;
}

#cultivation_calendar_wrapper {
  margin-top: -1px;
  margin-bottom: 2rem;
  padding: 1rem;
  border: 1px rgb(200, 200, 200) solid;
  border-radius: 0.1875rem;
  border-top-left-radius: 0rem;

}

.cultivation_type_name {
  font-size: 1rem;
  margin-bottom: 0.5rem;
}

.cultivation_calendar_group_caption {
  font-family: var(--font_sans);
}

.cultivation_calendar {
  width: 100%;
  font-family: var(--font_sans);
  margin-bottom: 0.2rem;
}


.cultivation_calendar td {
  border-bottom: 0.0625rem solid rgb(var(--color_cultivation_calendar_border));
  text-align: center;
  color: rgb(255, 255, 255);
  padding: 0;
}

@media (max-width: 767px) {
  .cultivation_calendar td {
    width: calc(((100vw - (2 * 2rem)) / 2) / 36);
  }
}
@media (min-width: 768px) {
  .cultivation_calendar td {
    width: calc(614px / 36); /* make all table cells equal width (614px = width of cultivation calendar) */
  }
}

.cultivation_calendar td.top_left_corner {
  height: 0.625rem;
  font-size: 0.0625rem;
  width: 3.125rem;
}

#cultivation_calendar_wrapper .month_desktop, #cultivation_calendar_wrapper .month_mobile, #cultivation_calendar_wrapper .year {
  background-color: rgb(255, 255, 255);
  font-weight: 400;
}

@media (min-device-width: 768px) {
  .month_mobile {
   display: none;
  }
}

@media (max-device-width: 767px) {
  .month_desktop {
   display: none;
  }
}

.cultivation_calendar td,
.cultivation_calendar th.year {
  height: 0.625rem;
}

.cultivation_calendar th.year {
  font-size: 0.5rem;
  width: 4.6875rem;
  text-align: left;
}

.cultivation_calendar .part1,
.cultivation_calendar .part2 {
  border-right: 0.0625rem solid rgb(var(--color_cultivation_calendar_border));
}
.cultivation_calendar .part3,
.cultivation_calendar th[scope="col"]:not(:last-child) {
  border-right: 0.1875rem solid rgb(var(--color_cultivation_calendar_border));
}

.cultivation_calendar th[scope="col"] {
  font-size: 0.6rem;
  font-weight: 300;
  letter-spacing: 0.1em;
  text-align: center;
  border-top: 0.0625rem solid rgb(var(--color_cultivation_calendar_border));
}

.empty {background-color: rgb(230, 230, 230);}
.pre-sprout {background-color: rgb(var(--color_pre-sprout));}
.sow {background-color: rgb(var(--color_sow));}
.wean_out {background-color: rgb(var(--color_wean_out));}
.thin {background-color: rgb(var(--color_thin));}
.dibble {background-color: rgb(var(--color_dibble));}
.take_cutting {background-color: rgb(var(--color_take_cutting));}
.harden_off {background-color: rgb(var(--color_harden_off));}
.expedite {background-color: rgb(var(--color_expedite));}
.plant {background-color: rgb(var(--color_plant));}
.transplant {background-color: rgb(var(--color_transplant));}
.bleach {background-color: rgb(var(--color_bleach));}
.harvest {background-color: rgb(var(--color_harvest));}
.harvest_seed {background-color: rgb(var(--color_harvest_seed));}
.grub {background-color: rgb(var(--color_grub));}

@media (max-width: 767px) {
  .cultivation_calendar td {
    line-height: calc((100vw - (2 * 2rem)) / 36);
  }
  .cc_cell_fill {
    font-size: calc((100vw - (2 * 2rem)) / 36);
  }
}
@media (min-width: 768px) {
  .cultivation_calendar td {
    line-height: calc(614px / 36 - 2.5px);
  }
  .cc_cell_fill {
    font-size: 1em;
  }
}

.inside {
  border-radius: 4rem;
}

.greenhouse {
  border-top-left-radius: 4rem;
  border-top-right-radius: 4rem;
}

.plant_spacing,
.legend {
  font-size: 0.8rem !important;
}

.plant_spacing {
  margin-top: 0.7rem;
}

.legend {
  margin-bottom: 0 !important;
  margin-top: 0.7rem;
}

.legend_item {
  white-space: nowrap;
}

.legend_item:not(:last-child) {
  margin-right: 1rem;
}

.legend_color {
  width: 1.2em;
  height: 0.6em;
  border-radius: 0.3em;
  display: inline-block;
}

.legend_color:not(:first-child), .legend_shape:not(:first-child), .legend_fill:not(:first-child) {
  margin-left: 1em;
}

.legend_shape {
  width: 1.2em;
  height: 1.2em;
  border: 1px dotted rgb(100, 100, 100);
  display: inline-block;
  line-height: 1.2em;
}

.legend_fill {
  width: 1.2em;
  height: 1.2em;
  background-color: rgb(150, 150, 150);
  color: rgb(255, 255, 255);
  display: inline-block;
  text-align: center;
  line-height: 1.2em;
}


/*-----------------*\
|                   |
|     VARIETIES     |
|                   |
\*-----------------*/

.variety {
  display: grid;
  margin-top: 0;
  padding: 1rem;
  background-color: rgba(var(--color_main5), 0.2);
  border-radius: 0.1875rem;;
  border: 1px solid rgb(var(--color_main5));
}

@media (min-device-width: 768px) {
  .variety {
     grid-column-gap: 3rem;
      grid-template-columns: 1fr 1fr 1fr;
      grid-template-areas: "text text photo";
  }
}

@media (max-device-width: 767px) {
  .variety {
    grid-column-gap: 1rem;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "text photo";
  }
}

.variety ~ .variety {
  margin-top: 1rem;
}

.variety_text {
  grid-area: text;
  align-self: start;
}

.variety img {
  grid-area: photo;
  margin-top: 1.5rem;
}

.variety_legend {
  font-family: var(--font_sans);
  font-size: 0.8rem;
  margin-bottom: 0 !important;
}

.variety_legend > span {
  font-weight: 600;
  font-size: 1rem;
}

.variety_legend > span:not(:first-of-type),
.variety_name > span:first-of-type {
  margin-left: 0.5rem
}

.variety_historic {
  color: rgb(150, 100, 50);
}

.variety_hybrid {
  color: rgb(50, 100, 175);
}

.variety_list_disclaimer {
  margin-top: 1em;
  font-size: 0.8em;
  font-family: var(--font_sans);
}