@charset "UTF-8";

/*
W3 CSS screen resolution breakpooints:
small screen: width less than 601px (width < 601px)
medium screen: width larger than 600pxb and less than 993px (601px <= width <= 992 px) 
large screen: width larger than 992px (width > 992 px)
*/


/* *********************************************************************** */
/* START: Custom css properties */
:root {
	--modal-content-height:calc(100vh - 2rem);
	/* The properties below belong to the "Tree view" section (Tree views in CSS, https://iamkate.com/code/tree-views) */
	--width:36px;
	--spacing:1.8rem;
	--radius:10px;
	--dark-grey:#ccc;
	--tooltip-width:calc(var(--modal-content-width) - 10rem);

	/* -------------- */
	/* Vars for handling notifications */
    /* Main color palette */
    --dark-green: #3B571D;
    --highlight-green: #aed581;
    --darker-green: #388e3c;
    --medium-green: #527839;

    /* Neutral colors */
    --light-gray-text: #ecf0f1;
    --almost-white: #f4f7f6;
    --dropdown-bg: #f9f9f9;
    
    /* Warning colors */
    --warning-red: #e74c3c;
    
    /* COLOR PALETTE FOR BUTTONS */
    --button-base-bg: #aaaaaa;
    --button-base-icon: #1f1f1f;
    --button-hover-bg: #6a8a4a; /* Lighter shade for hover */
    --button-active-bg: #466522; /* Dark green for active */
    --button-active-icon: #00ff00; /* Green color */
    --filter-group-border: #ccc; /* Border for the entire capsule group */
    --filter-group-bg: #f0f0f0; /* Background for the entire capsule group */
    --filter-button-inactive-bg: transparent; /* Inactive button background */
    --filter-button-inactive-text: #333; /* Inactive button text */
    --filter-button-inactive-hover-bg: #e0e0e0; /* Inactive button hover background */
    --filter-button-active-text: white; /* White text for active */
    --filter-button-active-hover-bg: #2e4718; /* Slightly darker green for active hover */
}
/* END: Custom css properties */

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



/* *********************************************************************** */
/* START: Rules for standard HTML elements */

/*
body {max-width:1200px}
*/
body {font-family: "Roboto", sans-serif}

/*
h1, h2, h3, h4, h5, h6 {
  letter-spacing: 5px;
}
*/

/*
Forrás:
https://www.digitalocean.com/community/tutorials/css-styling-form-input-validity
*/
input, textarea, select {box-sizing:border-box;width:100%;display:block;margin:0.25rem;padding:0.5rem;border:1px solid;border-radius:4px;transition:border-color 0.5s ease-out}
input:optional, textarea:optional {border-color:gray}
input:required:valid, textarea:required:valid {border-color:green}
input:invalid, textarea:invalid {border-color:red}
input:required:focus:valid, textarea:required:focus:valid {background-color:lightgreen}
input:focus:invalid, textarea:focus:invalid {background-color:lightsalmon}
/*
Forrás:
https://stackoverflow.com/questions/23031517/cross-browser-solution-to-remove-browser-default-focus-styles
*/
input:focus, textarea:focus, select {outline:1px solid gray}

/* EREDETILEG így volt:
input:not([type="submit"]):valid {background:#d9f2d9;border-color:#40bf40}
input:not([type="submit"]):invalid, textarea:invalid {background:#f2d9d9;border-color:#bf4040}
input[type="text"]:focus {outline:2px solid gray}
*/

select{background-color:#fff;color:#333}
select:required:invalid {color:gray}
option[value=""][disabled] {display:none}
option {color:#000}

hr{border:0;border-top:1px solid #ccc;margin:15px 0}

/* *************************************************************************************************************** */
/* How to align checkboxes and their labels consistently cross-browsers                                            */
/* https://stackoverflow.com/questions/306252/how-to-align-checkboxes-and-their-labels-consistently-cross-browsers */
/* https://jsfiddle.net/KyleMit/K4cXa/                                                                             */
/* TOVÁBBÁ:                                                                                                        */
/* How can I change checkbox background color, when checked without using custom CSS?                              */
/* https://www.codeproject.com/Questions/5327979/How-can-I-change-checkbox-background-color-when-ch                */
/*                                                                                                                 */
/* A display:inline azért szükséges, mert az input fentebb block-ra lett állítva.                                  */
input[type=checkbox] {accent-color:#74992e;top:4px;display:inline}
/*input[type=radio] {bottom:2px;}*/
/* *************************************************************************************************************** */

/*
a:link, a:visited {text-decoration:none}
a:hover, a:active {text-decoration: underline}
*/

/* END: Rules for standard HTML elements */
/* *********************************************************************** */



/* *********************************************************************** */
/* START: Rules for ID selectors */

#mySideNav {width:250px;height:100vh;background-color:#466522;z-index:3}

#dynHeader, #plantDetailsHeader {
	font-weight:900;
    font-size:16px;
	position:relative;
	display:grid;
	align-items:center;
	/*
	grid-template-columns: minmax(250px, 25fr) minmax(430px, 43fr) minmax(180px, 18fr);
	grid-template-columns:max-content 1fr min-content;

	*/
	grid-template-columns:1fr;
	gap:5px;
	padding:5px;
	z-index:1
}

/*
#usrSect {height:43px;background-color:#527839;border-top:1px solid rgba(255,255,255,0.05)}
*/

/*
#myOverlay {cursor:pointer}
*/

#mainContent {position:relative;margin-left:250px}

#dynBody {padding:0 0 16px}

#logo {width:100%;height:40px;margin:8px 0}

#shop_part_2,#shop_part_3,#shop_part_4,#shop_part_5{display:none}

/*
#selListType{height:38.5px}
*/

/* END: Rules for ID selectors */
/* *********************************************************************** */




/* *********************************************************************** */
/* START: Mixed rules */

html, body, #mainContent, #dynContent, #dynBody {height:100%}

/*
https://stackoverflow.com/questions/36182635/making-a-flex-item-float-right
*/

#gListTypeSelector{grid-area:3/1/4/2;visibility:hidden}
.gAlphabet{grid-area:4/1/5/2}
#gAddAcc, #gCloseDetails{grid-area:2/1/3/2}
#MnuBtn{grid-area:1/1/2/2}

#gMnuBtn, #gAddAcc, #gCloseDetails, .btnDetails, .btnOrder, .btnBook {
    width:min-content;
    display:inline-flex;
    vertical-align:middle;
    align-items:center;
	padding:2px 8px;
    color:#fff;
	border:0;
	border-radius:25px;
    white-space:nowrap;
    transition:all .2s;
}
#gMnuBtn, #gAddAcc, #gCloseDetails, .btnDetails {background-color:#466522}
.btnOrder{background-color:#525e75}
.btnBook{background-color:#c7522a}

#pd_about .btnBook, #pd_about .btnOrder, #pd_shop .btnBook, #pd_shop .btnOrder{padding:8px 16px}

#gMnuBtn:hover, #gAddAcc:hover, #gCloseDetails:hover, .btnDetails:hover, .btnOrder:hover, .btnBook:hover {color:#ffff00; cursor: pointer;}

#gAddAcc, #gCloseDetails {margin:0 8px 0 4px;justify-self: end;}
#gAddAcc i.material-icons, #gCloseDetails i.material-icons {font-style:normal;font-variant:normal;text-rendering:auto}


.btnOk {color:#fff!important;background-color:#4f7326!important}
.btnOk:hover {color:#ffff00!important;background-color:#426020!important}

/* *********************************************************************** */
/*       Styling listType selector button in plantlistHeader              */
/* *********************************************************************** */
#gListTypeSelector {margin-left:8px}
#gListTypeSelector button::after {font-family:"Material Icons";content:"\e5cf";vertical-align:-15%}
/* *********************************************************************** */


#logo svg text, .w3-modal-content .w3-center h1, .logo {
	font-family:Miltonian, Helvetica, sans-serif;
	font-size:90px;
	color:#336600;
	text-shadow:4px 4px 3px rgba(0,0,0,0.1); 
	stroke:#000;
	stroke-width:1px;
	fill:#336600;
}

.w3-modal-content{width:var(--modal-content-width)}

.w3-section.tab input {margin-top:6px}


form input:not([type="submit"]):valid {background:#fff}

/*
#usrSect button {width:100%;position:relative}
*/

.w3-teal strong {color:#ffff00!important}

.w3-row p {margin:0 0 1% 0}

/*
h1.w3-xxxlarge {color:#466522}
*/
h1.w3-xxxlarge {color:#336600}

i.inf {opacity:0.6;font-style:normal;font-size:1rem;cursor:help}

.contents h5{font-weight:bold;color:#fff;background-color:#466522;margin:0;cursor:default}
/* END: Mixed rules */
/* *********************************************************************** */



/* *********************************************************************** */
/* START: Rules for CLASS selectors */
.warning-box{background-color:#fff8e1;border-left:5px solid #ffc107;padding:15px;margin-top:20px;border-radius:5px}
.special-note{font-style:italic;color:#555;margin-top:15px}
.restricted-info{color:#d9534f;font-weight:bold;display:flex;align-items:center;gap:1px}
.flex-container{display:flex;align-items:baseline;gap:8px}
.highlight{color:#336600;font-weight:bold}
.buttonArea{
  min-height:80px; /* Ensures consistent minimum height */
  display:flex;
  align-items:center; /* Centers content vertically */
  justify-content:center; /* Centers content horizontally */
}
/* Handle empty button cells to maintain layout */
.buttonArea:empty::after {
  content:'';
  display:inline-block;
  height:100%; /* Matches min-height */
  visibility:hidden;
}
.pad_lr8{padding:0 8px}
#pd_about .pad_lr8{padding:0 24px}

.blink_me {animation: blinker 1.3s linear infinite;}

@keyframes blinker {  
  50% { opacity: 0; }
}

.input_err_msg {font-size:12px;color:#f44336;margin-top:2px}
.vertical-center {position:relative;top:50%;transform:translateY(-50%);}
.valign-center {display:inline-flex;vertical-align:middle;align-items:center;height:100%}

/*
.avatar_pic {height:35px;width:35px;margin:0;padding:0}
*/

.chapter {margin-bottom:48px;}
.brand_name {color:#336600;}
.illustration {border:4px solid #697959; border-radius:5px; background-color:#697959; text-align:center;}
.illustration img {border-radius:5px;}
.center {float: none; margin: 0 auto;}
.left {float: left; margin: 0 20px 20px 0;}
.right {float: right; margin: 0 0 20px 20px;}
.justify {text-align:justify; text-justify:inter-word;}

/*
https://css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/
*/
.centeredOnScreen {position:fixed;top: 30%;left:50%;transform:translate(-50%, -50%)}

.width_10percent {width:10%;}
.width_20percent {width:20%;}
.width_30percent {width:30%;}
.width_40percent {width:40%;}
.width_50percent {width:50%;}
.width_60percent {width:60%;}
.width_70percent {width:70%;}
.width_80percent {width:80%;}
.width_90percent {width:90%;}

.width_10percent,
.width_20percent,
.width_30percent,
.width_40percent,
.width_50percent,
.width_60percent,
.width_70percent,
.width_80percent,
.width_90percent {height:auto;}

.width_10percent img,
.width_20percent img,
.width_30percent img,
.width_40percent img,
.width_50percent img,
.width_60percent img,
.width_70percent img,
.width_80percent img,
.width_90percent img {width:100%; height:auto;}

.setAspectRatio {
	width: 100%;
	padding-bottom: 75%; /* aspect ratio 4:3 */
	position: relative;
}
.setAspectRatio > img {position:absolute;top:0;left:0;height:100%;width:100%;object-fit:cover}

/* ------------------ Modifications to w3.css selectors ------------------ */
.w3-modal {padding-top:1rem}
.w3-modal-content{height:var(--modal-content-height, 90%);overflow-y:auto;line-height:normal}
/* ----------------------------------------------------------------------- */

/* END: Rules for CLASS selectors */
/* *********************************************************************** */



/* *********************************************************************** */
/* START: W3css class modifications */

/* Apply vertical-align: middle to all table cells and headers */
.w3-table th,.w3-table td {vertical-align:middle}
/* END: Rules for CLASS selectors */
/* *********************************************************************** */



/* *********************************************************************** */
/* START: Custom styles for Blueimp Gallery */
/* !!! Must be placed after the standard Blueimp Gallery styles !!! */
.blueimp-gallery {background: rgba(0, 0, 0, 1)}

.blueimp-gallery > .close {
 	font-size: 35px;
  line-height: 20px;
	-webkit-border-radius: 100px;
	-moz-border-radius: 100px;
	border-radius: 100px;
	-moz-box-shadow: 1px 1px 3px #000;
	-webkit-box-shadow: 1px 1px 3px #000;
}

.blueimp-gallery > .close:hover {background: #cc0000}

.blueimp-gallery > .description,
.blueimp-gallery > .counter {
  position:absolute;
  left:15px;
  color:#fff;
  font-size:15px;
  color:#fff;
  opacity:0.8;
  display:none;
}

.blueimp-gallery > .counter {top: 3px;}
.blueimp-gallery > .title {top: 40px;}
.blueimp-gallery > .description {top: 60px;}
.blueimp-gallery-controls > .description,
.blueimp-gallery-controls > .counter {display:block}
/* END: Custom styles for Blueimp Gallery */
/* *********************************************************************** */



/* *********************************************************************** */
/* START: Styles for Form Tabs with Multiple Steps */
/* https://www.w3schools.com/howto/howto_js_form_steps.asp */

/* Hide all tabs by default: */
.tab {display:none}

/* Make circles that indicate the steps of the form: */
/*
Forrás:
https://stackoverflow.com/questions/4801181/vertically-and-horizontally-centering-text-in-circle-in-css-like-iphone-notific
*/
/* Steps that are finished and valid have class "finish" */
.numbered_steps {counter-reset:reg_lepesek}
.numbered_steps i::before {
	counter-increment:reg_lepesek;
	content:counter(reg_lepesek);
	display:inline-block;
	font-style:normal;
	font-weight:bold;
	color:#fff;
	background:#333;
	border-radius:0.8em;
	line-height:1.6em;
	margin-right:0.5em;
	text-align:center;
	width:1.6em;
	opacity:0.4; 
}
.numbered_steps i.active::before {opacity:1}
.numbered_steps i.finish::before {background-color:#009900}
/* END: Styles for Form with Multiple Steps */
/* *********************************************************************** */



/* *********************************************************************** */
/* START: Selection via custom radio buttons */
fieldset.customradio {padding:0;margin:2rem 0 0 0;color:#ccc;background-color:#466522;overflow-y:auto;border:0;border-radius:10px}
.customradio legend {color:#000;position:relative;top:-1.5rem;text-align:left}
.customradio label {position:relative}
.customradio label > span {padding:1rem 1rem 1rem 3.5rem;display:block;cursor:pointer;border-bottom:1px solid rgba(255,255,255,0.05)}
.customradio label > span > span:first-of-type, .customradio legend {font-size:1.3rem;font-weight:bold}
.customradio label > span > span:nth-of-type(2) {display:block;font-size:0.9rem}
.customradio label > span::before {
  content:"";
  display: inline-block;
  width: 0.9rem;
  height: 0.9rem;
  background-clip: content-box;
  border-radius: 50%;
  outline-offset: 0.2rem;
  outline: 0.15rem solid #888;
  position: absolute;
  left: 1.5rem;
  top:2.5rem;}
.customradio label > span,.customradio label > span::before {transition:all 0.25s linear}
.customradio label > span:hover {color:#fff}
.customradio label > span:hover::before {outline-color:#fff}
.customradio :checked + span {padding-left:6rem;pointer-events:none;cursor:default;color:#9f6}
.customradio :checked + span::before {background-color:#9f6;outline-color:#9f6}
/* END: Selection via custom radio buttons */
/* *********************************************************************** */



/* *********************************************************************** */
/* START: Image selection via custom checkboxes or radio buttons */
.imgSelect {padding:0;margin:2rem 0 0 0;border:0;border-radius:10px}
.imgSelect legend {color:#000;position:relative;top:-1.5rem;text-align:left;font-size:1.5rem}
.imgSelect label span {display:block;cursor:pointer;transition:all 0.25s linear}
.imgSelect .item:hover {outline:5px solid #ffff66;background-color:#ffff66}
.imgSelect :checked + .item {pointer-events:none;cursor:default;outline:5px solid green;background-color:green}
/* END: Image selection via custom checkboxes or radio buttons */
/* *********************************************************************** */



/* *********************************************************************** */
article.choiceList, .customradio input, .imgSelect input {display:none}
/* *********************************************************************** */



/* *********************************************************************** */
/* START: click tooltip */
/*
A click tooltip egy button elemből és egy azon belül található,
abban a pozícióban nem megjelenített (display:none) <div class="helptext"> elemből áll.
A tooltip tartalma a helptext elemben található.
A button onclick eseményekor lefutó showHelp függvény átmásolja a helptext tartalmát
az alapból nem megjelenített (display:none) <div id="helpcontent"> elembe, majd láthatóvá teszi azt.
Megjelenített tooltip esetén, ha a képernyő bármely, tooltip-en kívüli pontjára kattintunk,
a tooltip bezáródik.
*/
button > div.helptext {display:none}

#helpContent .helptext {
    max-height: 70vh; /* Adjust height to allow room for the close button */
    overflow-y: auto; /* Enables vertical scrolling */
    padding-right: 10px; /* Prevents content from being hidden behind scrollbar */
}

#helpContent.w3-show{display:flex!important}
#helpContent.w3-modal{
      justify-content: center;
      align-items: center;
      background-color: rgba(0, 0, 0, 0.5);
      z-index: 10;
}

/*
EREDETI:
*/
/*
.blocker + .tooltip {max-width:var(--tooltip-width);padding:5px;cursor:auto;color:#000;background-color:#fff394;border:2px solid #c7c7c7;border-radius:6px;position:fixed;top:30%;left:50%;transform:translate(-50%, -50%);z-index:5}
*/
/*
PRÓBA:
*/
/*
.blocker .tooltip {
      max-width: 90vw;
      max-height: 90vh;
      overflow-y: auto;
      padding: 20px;
      background-color: fff394;
      border-radius: 10px;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      z-index:5
    }
*/

    /* The modal content */
.blocker + .tooltip {
	position: relative;
	max-width: 90vw;  /* Limit width to 90% of the viewport width */
	max-height: 90vh; /* Limit height to 90% of the viewport height */
	overflow: visible;
	margin:20px;
	padding: 20px;
	border-radius: 10px;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	cursor:auto;color:#000;background-color:#fff;z-index:11;
}
/*
EREDETI:
*/
/*
.tooltip .closeButton {position:absolute;right:-2rem;top:-2rem}
*/
/*
PRÓBA:
*/
/*
.tooltip .closeButton {position:relative;right:-17rem;top:-1.5rem}
*/
.tooltip .closeButton {position:absolute;right:-24px;top:-26px}
/* END: click tooltip */
/* *********************************************************************** */



/* *********************************************************************** */
/* START: hover tooltip */
/*
/*
Forrás:
https://www.w3schools.com/css/css_tooltip.asp

A "tooltipp" szándékosan van két p-vel írva, megkülönböztetendő a click tooltip osztályától.
*/
.tooltipp {position:relative;display:inline-block}
.tooltipp .tooltipptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  font-weight:normal;
  font-size:15px;
  line-height:1.2;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  top: 120%;
  left: 50%;
  margin-left: -60px;
  white-space: normal;
}
.tooltipp .tooltipptext::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent black transparent;
}
.tooltipp:hover .tooltipptext {visibility:visible}
/* END: hover tooltip */
/* *********************************************************************** */



/* *********************************************************************** */
/* START: Close Div When Clicking Outside of It */
/*
 * Forrás:
https://medium.com/allenhwkim/close-div-when-clicking-outside-it-97255c20a221
 */

/* EREDETI: */
/*
.blocker {position:fixed;top:0;left:0;bottom:0;right:0;content:' ';cursor:auto;background:rgba(0,0,0,.5);z-index:4}
*/
/* PRÓBA: */
/*
.blocker {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: rgba(0, 0, 0, 0.5);
      z-index: 4;
    }
*/

/* The modal overlay */
.blocker {position:fixed;top:0;left:0;bottom:0;right:0;content:' ';cursor:auto;background:rgba(0,0,0,.5);z-index:4}

.popup {display:none}
.popup.open {display:block}
.popup .contents {position:absolute;top:45px;left:5px;border:1px solid #ccc;background:#FFF;z-index:5;width:95%}

/* END: Close Div When Clicking Outside of It */
/* *********************************************************************** */



/* *********************************************************************** */
/* START: Rounded buttons */
/*
/*
Forrás:
https://stackoverflow.com/questions/4801181/vertically-and-horizontally-centering-text-in-circle-in-css-like-iphone-notific
answered Feb 8, 2020 at 22:37 by Armand
*/
button.infoButton, button.closeButton, button.circleButton {padding:0}
.closeButton, .infoButton, .circleButton {display:inline-flex;align-items:center;justify-content:center;font-style:normal;border-radius:50%}
.infoButton {font-size:0.8rem;font-weight:900;background:#ecdf6c;border:2px solid #000;width:1.2rem;height:1.2rem;opacity:0.4;cursor:help}
.infoButton:hover {opacity:1;background:#FFFF99}
.closeButton {font-size:1.4rem;background:#ecdf6c;border:0;width:2.4rem;height:2.4rem;margin:0.5rem 0.5rem 0 0;cursor:pointer}
.closeButton:hover {background:red}
.circleButton {color:#5f6368;font-size:1rem;background:#f9f9f9;border:0;width:3.6rem;height:3.6rem;margin:0.5rem 0.5rem 0 0;cursor:pointer}
.settingsWrapper .pricetable .circleButton, .settingsWrapper .addresstable .circleButton {width:2.2rem;height:2.2rem;margin:0 5px 0 0}
.tableBody .circleButton {width:2rem;height:2rem;margin:0 5px 0 0}
.circleButton:hover {background:#e6e6e6}
/* END: Rounded buttons */
/* *********************************************************************** */



/* *********************************************************************** */
/* START: Simple tables with CSS grid layout */
/*
 * Forrás:
 * https://markheath.net/post/simple-tables-with-css-grid-layout
 */
.pricetable, .addresstable, .alerttable {display:grid;grid-gap:0}
.pricetable > div, .addresstable > div {display:flex}
.pricetable > div:nth-child(-n+3), .addresstable > div:nth-child(-n+2) {font-weight:700}
.pricetable > div.align-r, .addresstable > div.align-r {justify-content:flex-end}

.pricetable > div, .addresstable > div, .alerttable > div {margin:0;padding:5px;border-bottom: 1px solid #ddd;align-items:center;}

.pricetable {grid-template-columns:70% 1fr 1fr}
#pd_shop .pricetable {grid-template-columns:70% 1fr}

.addresstable {grid-template-columns:80% 1fr}
.alerttable {grid-template-columns:10% 1fr}

.alerttable > div h1, .alerttable > div h2 {font-size:20px}
.alerttable > div h1 {font-weight:700}
.alerttable > div h2 {font-style:italic}

/* END: Simple tables with CSS grid layout */
/* *********************************************************************** */



/* *********************************************************************** */
/* START: Google Material icons */
/*
 * Forrás:
 * Material Icons Guide
 * https://developers.google.com/fonts/docs/material_icons
 */
/* Rules for sizing the icon. */
.material-icons.md-18 {font-size: 18px}
.material-icons.md-24 {font-size: 24px}
.material-icons.md-36 {font-size: 36px}
.material-icons.md-48 {font-size: 48px}

.material-icons.warning {color:#fec000}

/* SzJ */
/* Center material icon inside container */
/* https://www.w3docs.com/snippets/css/how-to-vertically-center-text-with-css.html#example-of-vertically-aligning-a-text-with-flexbox-11 */
.matIconContainer {display:flex;margin:auto;align-items:center;justify-content:center}

/* END: Google Material icons */
/* *********************************************************************** */



/* *********************************************************************** */
/* START: Disabled state */
/*
 * Forrás:
 * https://gomakethings.com/dont-disable-buttons-while-submitting-forms-with-ajax/
 *
 * SzJ, 2020.07.31.:
 * A "cursor: not-allowed;" szabályt kivettem, mivel a "pointer-events: none;" szabály miatt úgysem érvényesülne.
 * További információ:
 * https://stackoverflow.com/questions/25654413/add-css-cursor-property-when-using-pointer-events-none
 */
.disabled, [disabled] {box-shadow:none;cursor:not-allowed;opacity:0.5;pointer-events:none}
.avoid-clicks {pointer-events: none;}
/* END: Disabled state */
/* *********************************************************************** */



/* *********************************************************************** */
/* Styling Details - Summary elements in "#modalContent form" */
/*
Two Issues Styling the Details Element and How to Solve Them
https://css-tricks.com/two-issues-styling-the-details-element-and-how-to-solve-them/
*/
#modalContent form details, #plantDetailsBody details {margin:0.6rem 0}
#modalContent form details > summary {display:list-item;font-weight:bold;font-size:1.3rem;color:#f9f9f9;background-color:#466522;cursor:pointer;padding:0 1rem}
#modalContent form details > summary > * {display:inline}
#modalContent form details > .detailsContent {border-style:solid;border-width:0 2px 2px 2px;border-color:#466522;margin:0;padding:0.5rem 1rem 0 1rem}
.detailsBox:not(:first-child) {margin-top:20px}
.detailsRow {vertical-align:middle}
.detailsRow.w3-panel {padding:0}
/*details p, details h5 {margin:0}*/
/* *********************************************************************** */



/* *********************************************************************** */
/* Styling Details - Summary elements in ".settingsWrapper" */
/*
https://codepen.io/NielsVoogt/pen/YbaNPd
Modifications (SzJ):
Google Material Icons instead of SVG icons
*/
.settingsWrapper {box-sizing:border-box}
.settingsWrapper details {position:relative}
.settingsWrapper details summary {list-style:none;padding:1em;background:#f8f8f8}
.settingsWrapper details summary:hover {cursor:pointer}
.settingsWrapper details summary:focus {outline:none}
.settingsWrapper details summary::-webkit-details-marker {display:none}
.settingsWrapper details .summary-title {-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
.settingsWrapper details .detail-content {border-top:1px solid #e2e8f0;padding:1em;line-height:1.5}
.settingsWrapper details .chevron {position:absolute;top:0.75em;right:1em;pointer-events:none;background:#f8f8f8}
.settingsWrapper details .chevron .material-icons {display:block;opacity:0.5;font-size:30px; /* Adjust the icon size here */}
/* *********************************************************************** */



/* *********************************************************************** */
/* Styling Details - Summary elements with olive theme */
details.olive-theme{border:1px solid #466522;border-radius:4px;background:#ebf1e4}
details.olive-theme summary, details.olive-theme .chevron{color:#fff;background:#466522}
details.olive-theme .chevron .material-icons{opacity:1}
/* *********************************************************************** */



/* *********************************************************************** */
/* Styling the date selector for the booking ticket transactions table */
.date-filter-group{display:flex;align-items:center;gap:10px}
.date-filter-group label{flex-shrink: 0;white-space:nowrap}
.date-filter-group input[type="date"]{padding:8px 10px;box-sizing:border-box;flex-grow:1;max-width: 180px}
/* *********************************************************************** */



/* *********************************************************************** */
/*                  Styling classification path elements                   */
/*
/*
pth alias path ...
*/
.pth i {color:#7e7e7e;font-style:normal}
/* *********************************************************************** */



/* *********************************************************************** */
/*         Custom checkbox for the selection of taxonomic statuses         */
/*
Források:
1./
Custom HTML and CSS Checkbox Examples You Can Use Too
https://www.sliderrevolution.com/resources/css-checkbox/
Chippy checkbox inputs by Adam Quinlan
https://codepen.io/quinlo/pen/ReMRXz
2./
Better way to set distance between flexbox items
https://stackoverflow.com/questions/20626685/better-way-to-set-distance-between-flexbox-items
*/
fieldset.customcheck {margin:0;padding:0;border:0}
.customcheck {display:flex;flex-flow:row wrap;align-items:center;justify-content:center;padding:5px}
.customcheck label {display:block;margin:10px 5px;text-align:center}
.customcheck input[type="checkbox"] {display:none}
.customcheck input[type="checkbox"] + span {
	cursor:pointer;
	padding:4px 8px 4px 4px;
	background-color:rgba(255, 255, 255, .9);
    border:2px solid rgba(139, 139, 139, .3);
    border-radius:25px;
    color:#adadad;
    white-space:nowrap;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    transition: all .2s;
}
.customcheck input[type="checkbox"] + span::before {
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
	content:"\e145";
	font-family:"Material Icons";
    font-weight:900;
    font-size:12px;
    padding:0 4px 0 0;
}
.customcheck input[type="checkbox"]:checked + span::before {content:"\e5ca"}
.customcheck input[type="checkbox"]:checked + span {border:2px solid #6e9a06;background-color:#6e9a06;color:#fff;transition:all .2s}
/* *********************************************************************** */



/* *********************************************************************** */
/*
How to show div on input focus in css?
Források:
https://stackoverflow.com/questions/46642426/how-to-show-div-on-input-focus-in-css
https://stackoverflow.com/questions/36891820/align-div-selection-list-under-input-field
*/
.auto_suggest {position:relative;margin-bottom:0.4rem}
.auto_suggest ul {
  z-index:1;
  position:absolute;
  left:0;
  width:100%;
  border:1px solid #ccc;
  background-color:green;
  display:none;
}
.auto_suggest input:focus {outline:0}
.auto_suggest input:focus + ul {display:block}
.auto_suggest li {padding:2px 4px;line-height:1em}
.auto_suggest li.activated {color:#fff!important;background-color:#4CAF50!important}
.auto_suggest li * {pointer-events:none}
/* *********************************************************************** */



/* *********************************************************************** */
/* START: Box rules */
/*
 * Forrás:
 * https://www.dwuser.com/education/content/creating-responsive-tiled-layout-with-pure-css/
 */

.box_wrap {
	overflow: hidden;
	margin: 10px;
}

.box_width_20 {width: 20%;}
.box_width_25 {width: 25%;}

.box_height_15 {padding-bottom: 15%;}
.box_height_20 {padding-bottom: 20%;}

.box {
	float: left;
	position: relative;
	width: 20%;
	padding-bottom: 15%;
	margin:10px;
}

.boxInner {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 85%;
	overflow: hidden;
	background: black;
}

.boxInner img {
	height: 100%;
	width: 100%;
	object-fit: cover;
}

.boxInner .overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0,0,0,0.2);
  overflow: hidden;
  width: 100%;
  height: 0;
  transition: .5s ease;
}

.box_wrap a:hover .overlay {
  height: 100%;
}

.boxCaption {
  text-align: center;
	position: absolute;
	top: 85%;
	left: 0;
	width: 100%;
	height: 15%;
	padding: 2% 0 0;
}

.box_wrap a:hover .boxCaption {
	background-color:#666;
	color:#fff;
}

@media only screen and (max-width : 480px) {
	/* Smartphone view: 1 tile */
	.box {
		width: 100%;
		padding-bottom: 100%;
	}
}

@media only screen and (max-width : 650px) and (min-width : 481px) {
	/* Tablet view: 2 tiles */
	.box {
		width: 50%;
		padding-bottom: 50%;
	}
}

@media only screen and (max-width : 1050px) and (min-width : 651px) {
	/* Small desktop / ipad view: 3 tiles */
	.box {
		width: 33.3%;
		padding-bottom: 33.3%;
	}
}

@media only screen and (max-width : 1290px) and (min-width : 1051px) {
	/* Medium desktop: 4 tiles */
	.box {
		width: 25%;
		padding-bottom: 25%;
	}
}
/* END: Box rules */
/* *********************************************************************** */



/* *********************************************************************** */
/* START: Flex items */
/*
Forrás:
An equal height grid using Flexbox, by Charlotte Jackson, 15th April 2015
https://clearleft.com/posts/an-equal-height-grid-using-flexbox
Example on CodePen:
https://codepen.io/lottejackson/pen/PwvjPj
*/

.list {
  display: flex;
  flex-wrap: wrap;
}

.list-item {
	display: flex; 
	width: 100%;
}

.flex_cards ul li {
	margin:0;
	padding:0;
}

ul.feature_list li {
	border:0;
}

.list-content {
  display:flex;
  flex-direction:column;
  width:100%;
}
.list-content p {flex:1 0 auto}

@media all and (min-width: 601px) {
  .list-item {width: 33.33333%}
}
@media all and (min-width: 993px) {
  .list-item {width: 33.33333%}
}
/* END: Flex items */
/* *********************************************************************** */



/* *********************************************************************** */
/* START: How do I auto-resize an image to fit a 'div' container? */
/*
Forrás:
How do I auto-resize an image to fit a 'div' container?
https://stackoverflow.com/questions/3029422/how-do-i-auto-resize-an-image-to-fit-a-div-container
answered Jan 13 '16 at 19:00, actimel; edited Mar 27 '19 at 23:44, Peter Mortensen
*/
/* This is for responsive container with specified aspect ratio */
.aspect-ratio {position:relative}
.aspect-ratio-1-1 {padding-bottom:100%}
.aspect-ratio-4-3 {padding-bottom:75%}
.aspect-ratio-16-9 {padding-bottom:56.25%}
/* This is the key part - position and fit the image to the container */
.fit-img {position:absolute;top:0;right:0;bottom:0;left:0;margin: auto;max-width: 80%;max-height: 90%}
.fit-img-bottom {top:auto}
.fit-img-tight {max-width:100%;max-height:100%}
/* END: How do I auto-resize an image to fit a 'div' container? */
/* *********************************************************************** */



/* *********************************************************************** */
/* START: Simple responsive CSS Image Grid */
/*
Forrás:
https://ehtmlu.com/blog/simple-css-image-grid/
https://codepen.io/eHtmlu/pen/BaodGVp
*/
/* --------------------------------------------------------------- */
/*
A grid-en kívül a "lista" típusú plantlist_type-ot is ugyanilyen megjelenésűre formázzuk.
*/
.respGrid {display:grid;grid-gap:10px;grid-template-columns:repeat(auto-fill, minmax(300px, 1fr))}
.respGrid .item {outline:1px solid var(--dark-grey);padding:8px 0;overflow:hidden}
.respGrid .item .flex-container{justify-content:flex-end}
/* https://stackoverflow.com/questions/3675623/how-to-set-element-height-for-a-fixed-number-of-lines-of-text*/
.item_desc {
  line-height: 2.5ex;
  height: 7.5ex; /* 2.5ex for each visible line */
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
}
.item_title {font-weight:900}
/* END: Simple responsive CSS Image Grid */
/* *********************************************************************** */



/* *********************************************************************** */
/* START: Data edit grid */

.editGrid {
	display:grid;
	align-items:center;
	grid-template-columns:auto min-content;
	grid-gap:12px;
	border-bottom:1px solid #ccc;
	padding:12px 0;
	margin:0 16px;
}
.editGrid:last-of-type {border:0}
.editGrid > div:first-child b {text-transform:uppercase;font-size:0.8rem;color:rgba(0, 0, 0, 0.3)}
.editGrid > div:last-child {width:fit-content}

/* END: Data edit grid */
/* *********************************************************************** */



/* *********************************************************************** */
/* START: Két oszlopos táblázat CSS grid-del */

#pd_about .grid-container, #pd_shop .grid-container {
  display: grid;
  grid-template-columns: max-content max-content; /* A tartalomhoz igazítja az oszlopok szélességét */
  column-gap: 8px; /* Beállítja az oszlopok közötti távolságot */
  align-items: center; /* Ez igazítja függőlegesen középre az összes cella tartalmát */
  justify-content: end; /* Ez igazítja a teljes oszlopcsoportot a konténer jobb széléhez */
  row-gap: 16px; /* Beállítja a sorok közötti távolságot */
  font-size: 1.2em
}
#pd_about .grid-item, #pd_shop .grid-item {
  /* Alapértelmezett balra igazítás */
  text-align: left;
}
/* Az első oszlop tartalmának jobbra igazítása  */
#pd_about .grid-container div:nth-child(2n-1), #pd_shop .grid-container div:nth-child(2n-1) {
  text-align: right;
  font-weight: bold;
}

#pd_shop .grid-container {margin:40px 40px 0 0}
/* END: Két oszlopos táblázat CSS grid-del */
/* *********************************************************************** */



#dynBody > ul {margin:0;padding:0;list-style:none}
#dynBody > ul > .leaf {margin:16px 16px 0}
/*
.leaf > div {outline:1px solid var(--dark-grey);overflow:hidden}
*/

/* *********************************************************************** */
/* START: Plantlist grid item "trade_row" grid-je */
/* --------------------------------------------------------------- */
/*
https://stackoverflow.com/questions/51526186/inline-grid-vertical-align-on-second-rows-baseline
*/
.row_trade {border:1px solid #ccc;border-width:1px 0;width:100%;display:grid;grid-template-rows:auto;grid-template-columns:1.5fr 1.5fr;align-items:baseline;column-gap:4px;padding:4px 0;margin-bottom:16px}
.row_trade .flex-container{flex-direction:column;gap:0px;}
.row_trade .flex-container p{margin:0 0 0 auto;display:flex;align-items:center;gap:5px}
.item_price {font-size:18px;font-weight:900}
.item_btn button {font-size:16px}
/* END: Plantlist grid item "trade_row" grid-je */
/* *********************************************************************** */



/* *********************************************************************** */
/* START: Plant details */
/* --------------------------------------------------------------- */

/*
SzJ, 2023.07.16.:
A szabály kiiktatva.
*/
/*#plantDetailsBody .item {outline:none}*/

#plantDetailsBody .item_title {font-size:36px;font-weight:900}
/* END: Plant details */

/*
Tabbed menu in plant detail body
--------------------------------
*/
/*
#a99b16
#85864b
*/
#plantDetailsBody > .w3-bar > button.w3-bar-item {font-weight:900;text-transform:uppercase;background-color:#85864b;color:#dadbc9}

/*
https://stackoverflow.com/questions/24792314/borders-only-between-elements
answered Jul 17, 2014 at 4:59, DRD
*/
#plantDetailsBody > .w3-bar > button.w3-bar-item + button.w3-bar-item {border-left:1px solid #b6b693}

#plantDetailsBody > .w3-bar > button.w3-bar-item:hover {cursor:pointer;color:#fff}
#plantDetailsBody > .w3-bar > button.w3-bar-item.selected {pointer-events:none;cursor:default;background-color:#fff;color:#85864b}

#plantDetailsBody .tabContent {display:none}

#plantDetailsBody .tabContent.selected {display:block}

#pd_shop > .item {width:30%}
/* --------------------------------------------------------------- */
/* *********************************************************************** */



/* *********************************************************************** */
/* UPPY kiegészítés */
.uppy-Dashboard-Item-preview img.uppy-Dashboard-Item-previewImg {object-fit:contain}
/* *********************************************************************** */



/* *********************************************************************** */
/* START: Custom notification for Uppy dashboard */
/* --------------------------------------------------------------- */
/* Forrás: ChatGPT */

/* Overlay to cover the Uppy modal */
.custom-notification-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.75); /* Semi-transparent overlay */
    z-index: 10000; /* Ensure it's above the Uppy modal */
    display: none; /* Hidden by default */
}
/* Custom notification box inside Uppy modal */
.custom-notification {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 10001; /* Above the overlay */
    background-color:#323232;
    color:#ffffff;
    padding: 20px;
    border-radius: 8px;
    text-align: center;
	max-width:80%;
	min-width:400px;
	word-wrap:break-word;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    display: none; /* Hidden by default */
    transition:opacity 0.4s ease, transform 0.4s ease;
    opacity:0;
    transform: translate(-50%, -60%); /* Centered inside the Uppy modal */
}
.custom-notification.show,.custom-notification-overlay.show {display:block;opacity:1}
.custom-notification-message {margin:0;font-size:14px;line-height:1.5}
.custom-notification-message p {margin:10px 0}
.custom-notification button {display:block;background:#fff6b3;border:none;color:#323232;cursor:pointer;font-size:16px;font-weight:bold;padding:10px 20px;border-radius:4px;transition:background-color 0.3s ease;margin:10px auto 0 auto}
.custom-notification button:hover {background-color:#ffe600}
/* *********************************************************************** */



/* *********************************************************************** */
/* START: Seamless responsive photo grid */
/* --------------------------------------------------------------- */

/*
Források:
---------
1.
https://stackoverflow.com/questions/22742354/how-create-grid-out-of-images-of-different-sizes

2.
https://css-tricks.com/seamless-responsive-photo-grid/

3.
Comment by Taufik, October 6, 2013:
By the way, hey Chris!
You could use column-width and remove the media queries completely.
Here’s a demo:
http://jsfiddle.net/tovic/nX9NT/1/

SzJ, 2023.06.06.:
-----------------
seamless-responsive-photo-grid
A fenti névből a konténer osztály neve az lesz, hogy: srpGrid
*/

.srpGrid {
   /* Prevent vertical gaps */
   line-height:0;
   column-width:300px;
   column-gap:0px;
}
.srpGrid img {
  /* Just in case there are inline attributes */
  width:100% !important;
  height:auto !important;
}
/* *********************************************************************** */



/* *********************************************************************** */
/* START: cssplay-responsive basic tree menu                               */
/*
================================================================ 
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/cssplay-responsive-basic-tree-menu.html
Copyright (c) Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any 
way to fit your requirements.
===================================================================
*/
/*Modified and customized by SzJ*/

#cssplay_menu {font:700 20px/40px 'Open Sans Condensed', sans-serif;color:#aaa;width:90%;display:inline-block;vertical-align:top;max-width:400px;margin:16px auto 0;overflow:hidden;overflow-y:auto}
#cssplay_menu > ul > li {position:relative;text-indent:5px}
#cssplay_menu > ul ul {padding:0;margin:0 0 0 15px}
#cssplay_menu input {display:none}
#cssplay_menu label {text-transform:uppercase;display:block;line-height:39px;cursor:pointer}
#cssplay_menu label:hover {color:#fff}
#cssplay_menu label::before {font-family:"Material Icons";content:"\e5cc";vertical-align:-15%;font-size:24px}
#cssplay_menu a {display:block;color:#aaa; text-decoration:none; padding:0 0 0 25px}
#cssplay_menu a:hover {color:#fff;cursor:pointer}
#cssplay_menu a.selected {pointer-events:none;cursor:default}

#cssplay_menu a.selected,
#cssplay_menu input.selected + label::before {color:#0f0;}

#cssplay_menu ul {padding:0;margin:0;list-style:none}

#cssplay_menu ul ul a,
#cssplay_menu ul ul label {height:0;transition:0.5s;overflow:hidden;opacity:0}

#usrSect,
#cssplay_menu > ul > li > a,
#cssplay_menu > ul > li > label,
#cssplay_menu :checked + label + ul > li > a,
#cssplay_menu :checked + label + ul > li > label
{border-bottom:1px solid rgba(255,255,255,0.05)}

#cssplay_menu :checked + label + ul > li > a,
#cssplay_menu :checked + label + ul > li > label {height:40px; opacity:1}

#cssplay_menu :checked + label::before {font-family:"Material Icons";content:"\e5ce";vertical-align:-15%;font-size:24px}

#cssplay_menu :not(:checked) + label + ul ul a,
#cssplay_menu :not(:checked) + label + ul ul label {height:0;overflow:hidden;opacity:0;border:0}
/* END: cssplay-responsive basic tree menu                                 */
/* *********************************************************************** */



/* *********************************************************************** */
/* START: Tree view */
/*
Forrás: Tree views in CSS
https://iamkate.com/code/tree-views/
*/
/* --------------------------------------------------------------- */
/*
Custom properties
There are two dimensions that affect the layout of the tree view:
the spacing between lines (which equals the line height of the text)
and the radius of the markers.
We begin by creating CSS custom properties for these dimensions.
While we would usually use relative units to scale user interface
controls based on the text size, for the markers this can lead
to controls that are too small or excessively large,
so we instead use a reasonable fixed size. 
Custom property definitions are located at the begenning of this file.
*/
/* --------------------------------------------------------------- */
/* --------------------------------------------------------------- */
#dynBody > ul.tree{margin-top:16px}
.tree{
	font-size:clamp(16px, 100vw / var(--width), 20px);
	font-family:sans-serif;
	font-weight:300;
	line-height:var(--spacing);
	padding-left:0
}
/* --------------------------------------------------------------- */
/* --------------------------------------------------------------- */
/*
Padding
We then style the list items and nested lists to make space for the lines and markers
*/
.tree li{display:block;position:relative;padding-left:calc(2 * var(--spacing) - var(--radius) - 2px)}
.tree ul{margin-left:calc(var(--radius) - var(--spacing));padding-left:0}
/* --------------------------------------------------------------- */
/* --------------------------------------------------------------- */
/*
Vertical lines
Next we add the vertical lines that form part of the lines joining
the marker of each list item to the markers of its nested lists.
We use a border to create the line, and hide it on the final item in each list
as the line shouldn’t continue past this item’s marker.
Making the border transparent, rather than removing it completely,
avoids the need to increase the padding to compensate. 
*/
.tree ul li{border-left:2px solid var(--dark-grey)}
.tree ul li:last-child{border-color:transparent}
/* --------------------------------------------------------------- */
/* --------------------------------------------------------------- */
/*
Horizontal lines
We use generated content to add the horizontal lines
that join the vertical lines to the markers of each list item.
This code also creates short vertical lines,
as the vertical lines created previously
don’t extend all the way to the markers at their top and bottom ends.
*/
.tree ul li::before{
  content:'';
  display:block;
  position:absolute;
  top:calc((var(--spacing) / -2) + 10px);
  left:-2px;
  width:calc(var(--spacing) + 2px);
  height:calc(var(--spacing) - 9px);
  border:solid var(--dark-grey);
  border-width:0 0 2px 2px;
}
/* --------------------------------------------------------------- */
/* --------------------------------------------------------------- */
/*
Summaries
Next we remove the default styling from summaries.
Safari shows a focus indicator around summaries,
even when using a pointer rather than keyboard navigation,
so we remove the focus styling and then use
the :focus-visible pseudo-class to add it back for visitors using keyboard navigation.
*/
.tree summary{display:block;cursor:pointer}
.tree summary::marker,.tree summary::-webkit-details-marker{display : none}
.tree summary:focus{outline:none}
.tree summary:focus-visible{outline:1px dotted #000}
/* --------------------------------------------------------------- */
/* --------------------------------------------------------------- */
/*
Markers
We use generated content again to create the markers.
Note that we generate markers both for li elements
(for list items that don’t contain nested lists)
and for summary elements,
allowing list items that contain nested lists
to have different marker styling depending on
whether the nested list is expanded or collapsed.
*/
.tree summary::before{
  content:'';
  display:block;
  position:absolute;
  top:calc(var(--spacing) / 2 - var(--radius));
  left:calc(var(--spacing) - var(--radius) - 1px);
  width:calc(2 * var(--radius));
  height:calc(2 * var(--radius));
  border-radius:50%;
  background:var(--dark-grey);
}
/* --------------------------------------------------------------- */
/* --------------------------------------------------------------- */
/*
Expand and collapse buttons
Finally, we add the expand and collapse buttons (plus and minus signs in the buttons).
Note that we use a true minus sign (−) rather than a hyphen (-)
as this matches the appearance of the plus sign,
whereas in most fonts the hyphen is narrower and lower.
*/
.tree summary::before{
  content:'+';
  background:#696;
  color:#fff;
  line-height:calc(2 * var(--radius) - 2px);
  text-align:center;
}
.tree details[open] > summary::before{content:'−'}
/* --------------------------------------------------------------- */
/* --------------------------------------------------------------- */

.tree ul li.leaf{margin-right:12px;padding-top:0.2rem;padding-bottom:0.5rem;padding-left:var(--spacing)}
/* --------------------------------------------------------------- */
/* END: Tree view */
/* *********************************************************************** */



/* *********************************************************************** */
/* START: Alphabet letter selector */
/*
Forrás:
https://stackoverflow.com/questions/17696778/how-to-create-an-alphabet-letter-selector-that-spans-an-entire-div-width
Segédletek:
https://stackoverflow.com/questions/25654413/add-css-cursor-property-when-using-pointer-events-none
https://stackoverflow.com/questions/46665625/how-to-combine-cursor-not-allowed-and-pointer-events-none
https://stackoverflow.com/questions/38944460/w3-css-how-to-make-container-centered-inside-another-container
*/
.alphabet {list-style-type:none;margin:0 auto;padding:0 4px;width:100%;max-width:800px;text-align:center;user-select:none}
.alphabet li {cursor:pointer;float:left;margin:0;padding:0;border-right:1px solid darkgrey;color:#000;box-sizing:border-box;width:3.5%;min-width:1ch}
.alphabet li:first-child {padding-right:4px;width:5%;min-width:3ch}
.alphabet li:last-child {border-right:0}
.alphabet li:hover {background-color:yellow}
.alphabet li.selected {background-color:#fff;cursor:auto}
.alphabet li.disabled {cursor:not-allowed}
.alphabet li.disabled:hover {background-color:inherit}
.alphabet li i {pointer-events:none;display:inline-block;width:100%;height:100%;font-style:normal;opacity:0.6}
/* END: Alphabet letter selector */
/* *********************************************************************** */



/* *********************************************************************** */
/* START: SHOP */
.disabled-elem{pointer-events:none}
.blurred-elem{filter:blur(1px);opacity:0.5}

/* Global "table" column settings */
.product-details{float:left;width:66%}
.product-price{float:left;width:12%;text-align:right}
.product-quantity{float:left;width:10%;text-align:right}
.product-line-price{float:left;width:12%;text-align:right}
.product-id,.product-name{display:none}

/* This is used as the traditional .clearfix class */
.group:before,.shopping-cart:before,.column-labels:before,.product:before,.totals-item:before,
.group:after,.shopping-cart:after,.column-labels:after,.product:after,.totals-item:after{content:'';display:table}
.group:after,.shopping-cart:after,.column-labels:after,.product:after,.totals-item:after {clear:both}

.group,.shopping-cart,.column-labels,.product,.totals-item{zoom:1}
.product .product-price:after,.product .product-line-price:after,.totals-value:after {content:' €'}
.shopping-cart{padding:0.01em 16px}
.shopping-cart h2{margin:0}

/*
This rule hides the Product label by moving its text off-screen using text-indent: -9999px.
This approach is typically used to visually hide text while keeping it accessible for screen readers.
*/
.column-labels .product-details {text-indent:-9999px}

form.shopping-cart > details summary, form.shopping-cart > details .chevron, form.shopping-cart .product-details details summary, form.shopping-cart .product-details details .chevron{color:#fff;background:#a99b16}
form.shopping-cart > details .chevron .material-icons, form.shopping-cart .product-details details .chevron .material-icons {opacity:1}
form.shopping-cart > details, form.shopping-cart .product-details details{border:1px solid #a99b16;border-radius:4px}

/* Product entries */
.product{margin-bottom:2px;padding-bottom:4px;border-bottom:1px solid #aaa}
.product .product-details .product-title{font-family:'Georgia','Times New Roman',serif;font-size:1.8rem;font-weight: bold;color:#333;margin-right:8px}
.product .product-details .product-description{margin-right:8px}
.product .product-quantity input{width:40px;display:inline;margin:0.1rem;padding:0.1rem;border-radius:1px}

/* Radio button entries in fieldset under Product-details  */
/* Style the fieldset to arrange radio buttons and labels vertically */
.product-details fieldset.customradio{width:98%;margin:0;color:#333;background-color:#fff}
.product-details fieldset.customradio label > span{
	display:grid; /* Set display to grid */
  	grid-template-columns:auto 1fr; /* Define two columns: auto for the radio, 1fr for the text */
  	gap:1rem; /* Gap between the columns (space between radio and text) */
  	align-items:center; /* Vertically align items in the center of their grid row */
  	/*padding: 1rem 1rem;*/ /* Adjust total padding as grid gap handles internal spacing now */
  	padding:0.8rem 0.2rem 0 2.5rem;
	cursor:pointer;
}
.product-details fieldset.customradio label > span::before{position:static}
.product-details fieldset.customradio label > span:hover{color:#8b0000}
.product-details fieldset.customradio label > span:hover::before{outline-color:#8b0000}
.product-details fieldset.customradio :checked + span{padding-left:4.5rem;color:#466522}
.product-details fieldset.customradio :checked + span::before{background-color:#466522;outline-color:#466522}

/* Totals section */
.totals{font-size:1.2rem;font-weight:bold}
.totals .totals-item{float:right;clear:both;width:100%;margin-bottom:10px}
.totals .totals-item label{float:left;clear:both;width:79%;text-align:right}
.totals .totals-item .totals-value {float:right;width:21%;text-align:right}

/* Make adjustments for tablet */
@media screen and (max-width: 650px) {
  .shopping-cart{margin:0;padding-top:20px;border-top:1px solid #eee}
  .column-labels{display:none}
  .product-details{float:none;margin-bottom:10px;width:auto}
  .product-price{clear:both;width:70px}
  .product-quantity{width:100px}
  .product-quantity input{margin-left:20px}
  .product-line-price{float:right;width:70px}
}

/* Make more adjustments for phone */
@media screen and (max-width: 350px) {
  .product-line-price{float:right;clear:left;width:auto;margin-top:10px}
  .product .product-line-price:before{content:'Item Total: €'}
  .totals .totals-item label{width:60%}
  .totals .totals-item .totals-value {width:40%}
}
/* END: SHOP */
/* *********************************************************************** */



/* *********************************************************************** */
/* START: SMART DISPLAY */

/*
.smartDisplay label {white-space:nowrap}
.smartDisplay select {padding:9px 0 9px 9px;background-color:#fff;max-width:50px}
*/

.smartDisplay label {
    display: flex; /* Make the label a flex container */
    align-items: center; /* Vertically align the text and select in the middle */
    gap: 8px; /* Add a small gap between the label text and the select box */
    white-space: nowrap; /* Ensures the text "Rows per page:" doesn't wrap */
}

/* You can also adjust the select padding or width if needed to fine-tune spacing */
.smartDisplay select {
    padding:9px 0 9px 9px;
    background-color:#fff;
    max-width:60px; /* Increased slightly to give a bit more room */
}

.smartDisplay input {padding:9px;display:block;width:100%}
.smartDisplay th {background-color:#f1f1f1} /* Non-hovered, non-sorted headers */
.smartDisplay .searchBox {flex:1;min-width:0;max-width:300px}
.smartDisplay .paid {color:white;background:#4CAF50;padding:5px 10px;border-radius:5px}
.smartDisplay .download-link {color:blue;cursor:pointer;text-decoration:underline}
.smartDisplay .pagination button {margin:2px}
.smartDisplay .flex-container {column-gap:10px;align-items:center}
.smartDisplay .push {margin-left:auto}
.smartDisplay .align-left {text-align:left}
.smartDisplay .align-center {text-align:center}
.smartDisplay .align-right {text-align:right}
.smartDisplay th.align-right.sortable {padding-right:25px}
/* Sorting Related CSS */
/* Positioning needed for absolute positioning of ::after pseudo-element */
.smartDisplay .sortable {cursor:pointer;position:relative}

/* Default sort indicator (up-down arrow) for sortable columns */
.smartDisplay .sortable::after {
    content: " ↕"; /* Up-down arrow */
    position: absolute;
    right: 5px; /* Adjust as needed */
    top: 48%;
    transform: translateY(-50%);
    font-size: 1.2em;
    opacity: 0.5; /* Faded when not sorted */
    transition: opacity 0.2s ease-in-out; /* Smooth fade effect */
}

/* Hover effect on sortable headers */
.smartDisplay th.sortable:hover {background-color:#e0e0e0}

/* Make the default indicator more prominent on hover */
.smartDisplay .sortable:hover::after{opacity:1}

/* Ascending sort indicator (up arrow) */
.smartDisplay .sortable.asc::after {content:" ▲";opacity: 1}

/* Descending sort indicator (down arrow) */
.smartDisplay .sortable.desc::after {content:" ▼";opacity: 1}

/* Background color for the currently sorted header */
/* This will apply to the header that has the 'asc' or 'desc' class */
.smartDisplay .sortable.asc,.smartDisplay .sortable.desc {background-color:#afafaf}

/* Optional: Ensure the default "↕" does not show when an explicit sort direction is active */
/* This might already be handled by specificity, but explicitly ensures priority */
.smartDisplay .sortable.asc::after,.smartDisplay .sortable.desc::after {
    /* No additional rules here, just ensuring these specific selectors take precedence */
    /* The content property in the specific .asc and .desc rules will override the ↕ */
}
/* END: SMART DISPLAY */
/* *********************************************************************** */



/* *********************************************************************** */
/* START: Custom styles for specific SMART DISPLAY tables */
#transactionsDisplay.smartDisplay th {color:#FFF;background-color:#6C7D69}
/* END: Custom styles for specific SMART DISPLAY tables */
/* *********************************************************************** */



/* *********************************************************************** */
/* START: Toggle summary text */

/*
Toggle summary text on details open/close with pure css
-------------------------------------------------------
(forrás: Google Gemini)

This CSS provides a pure CSS solution to dynamically change the text within a <summary> element
when its parent <details> element is opened or closed, without requiring any JavaScript.
*/

/*
Explanation:
------------

details-toggle Class:
	This is a custom class added to your <details> HTML element.
	It serves as a hook for this specific CSS to target the correct element
	without affecting other details elements on your page.

summary and ::after Pseudo-element:
	The summary element is the clickable heading for the details section.
    ::after is a CSS pseudo-element that allows you to insert content
    after the actual content of an element without adding extra HTML.
    We use its content property to display the desired text.
    We can also add more styling here, e.g., margin-left, font-weight, etc.

list-style: none; and ::-webkit-details-marker:
	Browsers typically add a small triangle or arrow (a "disclosure triangle" or "details marker")
	next to the summary element to indicate its interactive nature.
	These properties hide that default marker, giving you full control
	over how you want to present the toggle.

details-toggle[open] Selector:
    The default state of the <details> element is its closed state.
	The browser automatically adds the open attribute to a <details> element
	when the user clicks its summary to expand it.
    This CSS selector targets a <details> element that has both the details-toggle class and the open attribute.
    When this state is active, the content property for summary::after is overridden, changing the displayed text.
*/
.details-toggle summary{list-style:none;display:block;width:100%;box-sizing:border-box}
.details-toggle summary::-webkit-details-marker{display:none}
.details-toggle summary::after{content:attr(data-text-closed)}
.details-toggle[open] summary::after{content:attr(data-text-open)}
/* END: Toggle summary text */
/* *********************************************************************** */



/* *********************************************************************** */
/* START: Handling notifications */

/* Profile picture and icons container */
#usrSect {
    position: relative;
    height:43px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 10px 0;
    /*border-bottom: 1px solid rgba(255,255,255,0.1);*/
    /*margin-bottom: 20px;*/
    background-color: var(--medium-green);
}

/* Unified style for all icon buttons */
#usrSect > button {
    background-color: var(--button-base-bg);
    border: none;
    cursor: pointer;
    font-size: 16px;
    position: relative; /* Important for absolutely positioned image */
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: flex; /* Can remain, but image is now absolutely positioned */
    justify-content: center;
    align-items: center;
    transition: background-color 0.2s ease-in-out, opacity 0.2s ease-in-out;
}

/* Hover effect for inactive buttons */
#usrSect > button:hover {background-color:var(--button-hover-bg)}
#usrSect .profile-btn:hover { /* Only for profile button */
    background-color: var(--button-base-bg); /* Stays base background color */
    opacity: 0.5;
}

/* Base active state for buttons */
#usrSect > button.is-active{background-color:var(--button-active-bg)}

/* Hover effect for ACTIVE buttons */
#usrSect > button.is-active:hover{background-color:var(--button-hover-bg)}
#usrSect .profile-btn.is-active:hover{background-color:var(--button-hover-bg);opacity:0.5}

/* Icon color change on hover (for both active and inactive) */
#usrSect > button:hover .material-icons,
#usrSect > button.is-active:hover .material-icons{color:white}

/* Base icon color */
#usrSect .material-icons {
    color: var(--button-base-icon);
    vertical-align: middle;
    font-size: 24px;
    transition: color 0.2s ease-in-out;
}

/* Active icon colors */
#usrSect > button.is-active .material-icons{color:var(--button-active-icon)}

/* Profile picture style */
#usrSect .profile-pic {
    width: calc(100% + 2px); /* Slightly larger to ensure full fill */
    height: calc(100% + 2px); /* Slightly larger to ensure full fill */
    border-radius: 50%; /* Reverted to image's own rounding */
    object-fit: cover;
    border: none; /* No border */
    transition: border 0.2s ease-in-out;
    
    /* Absolute positioning and centering */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
/* Add overflow: hidden to the profile button */
#usrSect .profile-btn {
    overflow: hidden; /* Important: this clips the image corners for rounding */
    opacity: 0.75; /* Base opacity 0.75 */
}
#usrSect .profile-btn.is-active{opacity:1}

/* Notification badge */
#usrSect .notification-badge {
    display: none; /* Controlled by JS .show class */
	position: absolute;
    top: -2px;
    right: -10px;
    background-color: var(--warning-red);
    color: white;
    border-radius: 50%;
    padding: 3px 6px;
    font-size: 10px;
    min-width: 10px;
    text-align: center;
    line-height: 1;
    justify-content: center;
    align-items: center;
}

#usrSect .notification-badge.show {
    display: flex; /* Show when 'show' class is present */
}

/* Profile dropdown menu */
/* NOT USED */
/*
#usrSect .profile-dropdown-content {
    display: none;
    position: absolute;
    top: calc(100% + 5px);
    right: 0;
    background-color: var(--dropdown-bg);
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 10;
    border-radius: 5px;
    overflow: hidden;
    color: black;
}
#usrSect .profile-dropdown-content.show {
    display: flex;
    flex-direction: column;
}
#usrSect .profile-dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}
#usrSect .profile-dropdown-content a:hover{background-color:#ddd}
*/

/* Notification dropdown menu */
#usrSect .notification-container{display:none;position:absolute;top:0;left:0}
#usrSect .notification-container.show{display:block}

#usrSect .notification-dropdown-content {
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: fixed; 
    left: 260px; /* Sidebar width + h_offset */
    top: 5%; /* VERTICAL_VIEWPORT_MARGIN_PERCENT */
    height: 90vh; /* 100% - 2 * VERTICAL_VIEWPORT_MARGIN_PERCENT */
	width: 320px;
    transition: all 0.3s ease-out; /* Smooth transition for any size/position changes */
    background-color: var(--dropdown-bg);
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 4;
    border-radius: 5px;
    padding: 10px;
    color: black;
}

#usrSect .notification-list {
    flex-grow: 1;
    overflow-y: auto;
    padding-right: 5px;
}

#usrSect .notification-dropdown-content .notification-item {
    padding: 10px 10px 10px 25px; /* Egységes padding a zöld kör helyének */
    border-bottom: 1px solid #eee;
    cursor: pointer;
    text-decoration: none;
    display: block;
    color: black; /* Base text color for the item */
    position: relative; /* Essential for absolute positioning of ::before */
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
#usrSect .notification-dropdown-content .notification-item:last-child {
    border-bottom: none;
}
#usrSect .notification-dropdown-content .notification-item:hover {
    background-color: var(--filter-group-bg);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Add a noticeable shadow */
}
/* Explicitly target nested elements for color change on hover */
#usrSect .notification-dropdown-content .notification-item:hover strong {
    color: #000; /* Darker on hover */
}
#usrSect .notification-dropdown-content .notification-item:hover p {
    color: #333; /* Darker on hover */
}
#usrSect .notification-dropdown-content .notification-item strong {
    display: block;
    margin-bottom: 5px;
    color: #333; /* Base strong color */
}
#usrSect .notification-dropdown-content .notification-item p {
    font-size: 14px;
    color: #555; /* Base paragraph color */
    margin: 0;
}

/* Timestamp styling */
#usrSect .notification-dropdown-content .notification-item .timestamp {
    font-size: 12px;
    color: #999;
    margin-top: 5px;
    text-align: right;
}

/* Unread notification styling - using a dot instead of background data-color */
#usrSect .notification-dropdown-content .notification-item.unread::before {
    content: '';
    position: absolute;
    top: 15px; /* Adjust vertically to align with text */
    left: 10px; /* Position within the padding */
    width: 8px;
    height: 8px;
    background-color: var(--darker-green); /* Green dot for unread */
    border-radius: 50%;
}
#usrSect .notification-dropdown-content .notification-item.unread strong {
    color: var(--darker-green); /* Keep the distinct color for title */
}

/* "Go to Notifications Page" link style */
#usrSect .view-all-link {
    display: block;
    text-align: center;
    padding: 10px 15px;
    background-color: var(--filter-group-bg);
    color: var(--filter-button-inactive-text);
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
    font-weight: bold;
    font-size: 16px;
}
#usrSect .view-all-link:hover {
    background-color: var(--dark-green);
    color: white;
}
#usrSect .notification-header {
    display: flex;
    flex-direction: column; /* Stack heading and buttons vertically */
    align-items: center; /* Center horizontally */
    gap: 10px; /* Space between heading and buttons */
    margin-bottom: 10px; /* Space below header */
}
#usrSect .notification-header h3 {
    margin: 0; /* Remove default margin from heading */
    padding-bottom: 5px; /* Add some padding below heading */
    border-bottom: 1px solid #eee; /* Optional: separator below heading */
    width: 100%;
    text-align: center;
}
/* Notification filter buttons container styling (the "capsule") */
#usrSect .notification-filter-buttons {
    display: flex;
    border: 1px solid var(--filter-group-border); /* Border for the entire capsule group */
    border-radius: 9999px; /* Pill shape for the group */
    overflow: hidden; /* Crucial for rounded corners */
    background-color: var(--filter-group-bg); /* Background for the inactive state of the group */
    width: 201px; /* Fixed width: 2 * 100px (button width) + 1px (separator border) */
}
/* Individual Notification filter button styling */
#usrSect .notification-filter-button {
    width: 100px; /* Fixed width for each button */
    border: none; /* Remove individual button borders */
    border-radius: 0; /* Remove individual button border-radius */
    padding: 8px 15px;
    cursor: pointer;
    font-size: 14px;
    white-space: nowrap; /* Prevent text wrapping */

    /* Flexbox for content (icon + text) alignment */
    display: flex;
    align-items: center;
    justify-content: center; /* Center content horizontally */
    
    background-color: var(--filter-button-inactive-bg); /* Transparent for inactive */
    color: var(--filter-button-inactive-text);
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}




/* Vertical separator: only apply to the first button */
#usrSect .notification-filter-buttons .notification-filter-button:first-child {
    border-right: 1px solid var(--filter-group-border);
}

/* Active button styling */
#usrSect .notification-filter-button.active {
    background-color: var(--dark-green);
    color: var(--filter-button-active-text);
    cursor: default;
}

/* Hover effect for INACTIVE buttons */
#usrSect .notification-filter-button:hover:not(.active) {
    background-color: var(--filter-button-inactive-hover-bg);
    color: var(--filter-button-inactive-text);
}

/* Hover effect for ACTIVE buttons */
#usrSect .notification-filter-button.active:hover {
    /* Set background-color to be the same as active state to remove hover color change */
    background-color: var(--dark-green); 
    color: var(--filter-button-active-text); /* Keep active text color */
    box-shadow: none; /* No box-shadow on hover */
    outline: none; /* No outline on hover */
}

/* Checkmark icon styling */
#usrSect .notification-filter-button .filter-icon {
    font-size: 18px;
    margin-right: 5px;
    visibility: hidden; /* Hidden by default, but occupies space */
    opacity: 0; /* Start with opacity 0 for animation */
    color: var(--filter-button-inactive-text); /* Default for inactive */
    transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out; /* Transition for icon */
}

#usrSect .notification-filter-button.active .filter-icon {
    visibility: visible; /* Show when active */
    opacity: 1; /* Fade in */
    color: var(--filter-button-active-text); /* Active icon color */
}

/* Pagination controls styling */
#usrSect .pagination-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 10px;
    gap: 10px;
}

#usrSect .pagination-button {
    background-color: var(--filter-group-bg);
    color: var(--filter-button-inactive-text);
    border: none;
    padding: 8px 15px;
    border-radius: 20px;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
    font-size: 14px;
    min-width: 80px; /* Ensure consistent width */
    text-align: center;
}

#usrSect .pagination-button:hover:not(:disabled) {
    background-color: var(--dark-green);
    color: white;
}

#usrSect .pagination-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

#usrSect .page-info {
    font-size: 14px;
    color: #555;
}

#usrSect .popup {position:absolute;top:0;left:0;width:250px}

/* ------------------------- */
/* Toast notification */
#toastNotification {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 15px 20px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: opacity 0.3s ease-out, transform 0.3s ease-out, visibility 0.3s ease-out;
    max-width: 300px;
    z-index: 1000;    
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
#toastNotification.show{opacity:1;visibility:visible;transform:translateY(0)}
#toastNotification p{margin:0;flex-grow:1}
#toastNotification strong{display:block;margin-bottom:5px}
#toastNotification .toast-close-btn{position:absolute;top:0;right:5px;cursor:pointer;font-size:18px;line-height:1;color:#ccc}
/* ------------------------- */
/* END: Handling notifications */
/* *********************************************************************** */



/* *********************************************************************** */
/* START: Media rules - General */
@media (max-width:992px){:root{--modal-content-width:calc(100vw - 2rem)}}
@media (min-width:993px){:root{--modal-content-width:980px}#dynHeader, #plantDetailsHeader{position:sticky;top:0}#gMnuBtn{display:none}}
@media (max-width:600px){.w3-modal-content{width:var(--modal-content-width)!important}#pd_shop > .item{width:95%}}
@media (max-width:768px){.w3-modal-content{width:var(--modal-content-width)}}
@media (min-width:993px){.w3-modal-content{width:var(--modal-content-width)}}
/* END: Media rules - General */
/* *********************************************************************** */



/* *********************************************************************** */
/* START: Media rules - Header grid */
@media (min-width:1101px){
#dynHeader, #plantDetailsHeader{grid-template-columns:max-content 1fr min-content}
#gListTypeSelector{grid-area:1/1/2/2}
.gAlphabet{grid-area:1/2/2/3}
#gAddAcc, #gCloseDetails{grid-area:1/3/2/4}
#MnuBtn{display:none}
}

@media (max-width:1100px) and (min-width:993px){
#dynHeader, #plantDetailsHeader{grid-template-columns:auto auto}
#gListTypeSelector{grid-area:1/1/2/2}
.gAlphabet{grid-area:2/1/3/4}
#gAddAcc, #gCloseDetails{grid-area:1/2/2/4}
}

@media (max-width:992px) and (min-width:601px){
#pd_shop > .item{width:70%}
#dynHeader, #plantDetailsHeader{grid-template-columns:auto auto auto}
#MnuBtn{grid-area:1/1/2/2}
#gListTypeSelector{grid-area:1/2/2/3}
.gAlphabet{grid-area:2/1/3/4}
#gAddAcc, #gCloseDetails{grid-area:1/3/2/4}
}
/* END: Media rules - Header grid */
/* *********************************************************************** */