/* COLORPALETTE: (Central settings of used colors) */
:root {   /* Static nuances: */
    --roedColor: #FF0000;
    --guulColor: #F3F033;
    --grenColor: #336600;
    --grenColr1: #448800;   /* placeholder-text */
    --lablColor: #500000;   /*  #1b5b22;  #363eba;   /* LysBlå: Labels Caption */
    --lablBgrnd: #f0ffff;   /* FloralWhite; */
    --cardsTitl: #ffffff00; /* Transparent */
    --oranColor: #F37033;
    --brunColor: #550000;   /*  Table borders  */
    --grayColor: #aca9a870; /* #ACA9A8; */
    --shadColor: #d3d3d352;
    --xx11Color: #3CBC8D;
 /* --HintsBgrd: rgba(55, 55, 55, 0.90);     --HintsText: #FFFFFF; */
 /* --HintsBgrd: rgba(240, 240, 240, 0.90); */
    --HintsBgrd: Ivory; /* lightyellow; /* #E4FBFBE8; */
    --HintsText: #000000;
    --xx33Color: #CCEDFE;   /*  Filter: Light-Blue background */
    --grColrLgt: #CCCCCC;
    --FieldBord: #AAAAAA;   /* Card- and Field-border */
    --FieldBgrd: #FAFAFA;   /* Field background-color */
    --CardsBgrd: white;
    --Wall_Bgrd : #f4f4f4;
    --ButtnBgrd: #44BB44;   /* LysGrøn   */
    --ButtnText: #FFFFFF;   /* Hvid   */
    --BtLnkBgrd: #FCFCCC;   /* LysGul  */
    --BtLnkText: #000000;   /* Sort   */
    --ButtnShad: #bcbcbc;   /* Knap skygge (lysgrå)  */
    --PageBcgrd: #333333;   /* Side baggrund (lysblå) F4FFF4  */
    --PageBcgrd: #e6e8ea;  /* Set $gbl_PageBcgrd in project.init.php */
    --TextColr: #222222;    /* Normal text (theme) */
    --InptBgrd: #ffffff;    /* Input fields (theme) */
    --LinkColr: #0645ad;    /* Links (theme) */
    /* --PageImage: url(../_assets/images/paper_fibers.png);   /* Side baggrundsbillede  */
    /* url understøttes ikke i browsere endnu! (March 29, 2016) https://blog.hospodarets.com/css_properties_in_depth  Images url like url(var(--image-url)) don’t work */
    /* --PageImage: <?php echo $gbl_Imag; ?>;  /* Initieres i _base_init.php /Virker i ../_base/htm_pagePrepare.php */
    --fltBgColr: #FFFFFF;   /* Validerede input felters baggrund  #53a40 */
    --fltTxColr: #550000;   /* Validerede input felters tekster #53a40 */
    --tblRowDrk: #e0e0e0;   /* Tabellinie med mørk baggrund */
    --tblRowLgt: #f0f0f0;   /* Tabellinie med lys baggrund  */
    --btnTxNorm: #000000;   /* Standard tekst på knap */
    --btnTxOver: #900000;   /* Tekst på knap, når musen er over knappen */
    --SkyTxNorm: #AAF;      /* Tekst med skygge #AAF; */
    --darkBcgrd: #333;      /* Lable background color */

    /* Herudover forekommer green, blue, white, black og grånuancer, samt "importerede".  */
    /* Således kaldes farvekonstanter:    var(--FieldBord) */

    --FldHeight: 32px;

    --ctxP_MenuBg: GhostWhite;
    --ctxP_MenuShadow: 1px 1px 10px #000;
    --ctxP_MenuRadius: 5px;
    --ctxP_MenuText: black;
    --ctxP_SubMenuBg: snow;
    --ctxP_Hover: #d7f1e5;
    --ctxP_OverflowIcon: #999;
    --ctxP_Separator: #999;
    
    /* --ButtnShad: gray; */
    --HintsBgrd: Cornsilk;
    --HintsText: black;

}

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

    Tip-system:  Label [.LblTip .labltip], som kan vise popup-vindue [.LblTip*]
           med teksten [.LblTip_text] på mørkfarvet shape-baggrund, når musen holdes over label
           Vises med minimal forsinkelse
    */

    .LblTip,
    .LblTip_W,  .LblTip_O,  .LblTip_S, .LblTip_N,
    .LblTip_NW, .LblTip_SW, .LblTip_SØ
    {   font-family: sans-serif;
        position: relative;
        cursor: help;
        display: inline-block;
        background: var(--lablBgrnd);
        color: var(--lablColor);
        border-radius:3px;
        border: 1px solid var(--FieldBord);
        box-shadow: 1px 1px 1px var(--ButtnShad) inset;
        padding: 0px 3px 1px 3px;
        text-align: center;
        margin-bottom: 2px;
        font-size: 11px;
    }

    .LblTip {
        text-shadow:0px 0.6px var(--SkyTxNorm);
    }

    .LblTip_text,                                   /* LABEL som musen holdes over */
    .LblTip_W,  .LblTip_O,  .LblTip_S, .LblTip_N,   /* Hjælpetekst som synliggøres */
    .LblTip_NW, .LblTip_SW, .LblTip_SØ              /* Bestemmer placering af Tip  */
    {                     /* Hidden tip text on colored background placed at label */
        visibility: hidden;
        min-width: 160px;
        background-color: var(--HintsBgrd);
        color: var(--btnTxNorm);
        font-style:normal;
        font-weight:400;
        font-size: 12px;
        text-align: center;
        border-radius: 6px;
        border: 1px solid #555555;
        padding: 5px 3px;
        position: absolute;
        z-index: 99999;
    }

    .LblTip_text,
    .LblTip_N {bottom: 20px;  left: -25px;}                      /* Plac over kilde - Inputfelters label */
    .LblTip_S {top: 22px;     left: -90px;   min-width: 120px;}  /* Plac under kilde - Kolonneoverskrifter, hvor der ikke er plads ovenover. */
    .LblTip_NW {bottom: 20px; left: -180px;  min-width: 160px;}
    .LblTip_SW {top: 22px;    left: -280px;  min-width: 160px;}  /* Ved 1. kolonne er der ikke plads tv for feltet*/
    .LblTip_SØ {top: 22px;    left: 28px;    min-width: 160px;}  /* Ved n. kolonne er der ikke plads th for feltet*/
    .LblTip_W {left: -26px;   margin-top: -28px;}
    .LblTip_O {right: -26px;  margin-top: -28px;}

    .LblTip:hover   .LblTip_N,
    .LblTip:hover   .LblTip_S,
    .LblTip:hover   .LblTip_NW,
    .LblTip:hover   .LblTip_SW,
    .LblTip:hover   .LblTip_SØ,
    .LblTip:hover   .LblTip_W,
    .LblTip:hover   .LblTip_O,
    .LblTip:hover   .LblTip_text,
    .LblTip_text:hover
    {
      box-shadow: 3px 3px 5px var(--grColrLgt);
      transition-delay: 0.2s;
      background-color: var(--HintsBgrd);
      color: var(--HintsText);
      visibility: visible;
      z-index: 999;
      text-shadow: 0px 0px  var(--SkyTxNorm);
    }

    .lablInput {
      height: 2.2em;
      margin: 0.05em 0.05em;
      text-align: left;
      position: relative;
      width: 50px;
    }

    .lablInput checkbox,
    .lablInput textarea,
    .lablInput input {
      border: 1px solid var(--grColrLgt);
      border-radius: 0.20em;
      background: white;
      margin: 0.20em 0.0em;
      height: auto;
      width: 94%;
      cursor: text;
      font-size: 0.850em;
      font-weight: 500;
      position: relative;
      transition: all 0.15s ease;
      padding: 4px 2px 1px;
    }
    /* .lablInput input[type="text"],
    .lablInput input[type="password"] {
        width: 71%;
    }  */

    .lablInput input[type="radio"] {
        width: 71%;
    }

    .lablInput label {
      color: var(--grayColor);
      padding: 0.2em 1%;
      cursor: text;
      font-size: 0.95em;
      font-weight: 500;
      padding: 0.1em 1% 0.1em 1%;
      position: relative;
      transition: all 0.15s ease;
      width: 95%;
    }

    .label {
      font-style: italic;
      font-family: sans-serif;
      font-weight: normal;
      color: blue;
      padding: 0.05em 1%;
    }

    .lablInput checkbox.filled ~ label,
    .lablInput textarea.filled ~ label,
    .lablInput input.filled ~ label,
    .lablInput checkbox ~ label,
    .lablInput textarea ~ label,
    .lablInput input ~ label,
    .lablInput input:focus ~ label {
      font-size: 0.65em;
      font-weight: 400;
      text-align: right;
      position: relative;
      top: -45px;
      width: 0;
      color: var(--lablColor);
      padding: 0.005em 0 0;
    }

    .lablInput checkbox.filled,
    .lablInput textarea.filled,
    .lablInput input[type="date"].filled,
    .lablInput input[type="text"].filled,
    .lablInput input[type="email"].filled:valid {
      font-weight: 500;
      background: var(--fltBgColr);
      color: var(--fltTxColr);
    }
    .lablInput input[type="number"].filled {
      color: var(--roedColor);
      width: 80px;
      position: absolute;
    }

    .lablInput checkbox.filled ~label:after,
    .lablInput textarea.filled ~label:after,
    .lablInput input[type="text"].filled ~label:after,
    .lablInput input[type="email"].filled:valid ~label:after {
      color: var(--lablColor);
      display: inline-block;
      font: normal normal normal 14px/1em;  /*  font-style  font-variant  font-weight   font-size/line-height font-family */
      font-size: 2em;
      text-rendering: auto;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      position: absolute;
      top: 0.3em;
      right: 0.3em;
      transform: translate(0, 0);
    }

    ::-webkit-input-placeholder { color: var(--grenColr1); font-size: 80%; font-weight:200; }
    :-moz-placeholder { color: var(--grenColr1); font-size: 80%; font-weight:200; } /* Firefox 18- */
    ::-moz-placeholder { color: var(--grenColr1); font-size: 80%; font-weight:200; }  /* Firefox 19+ */
    :-ms-input-placeholder { color: var(--grenColr1); font-size: 80%; font-weight:200; }

    .fa, .far, .fas {
        margin-right: 6px;
    }

    hr.style13 {
      height: 6px;
      border: 0;
      box-shadow: 0 10px 10px -10px #8c8b8b inset;
    }


 /* RowColS: (Adaptation to narrow screens) */
 /* for 960px or greater */
@media screen and (min-width: 960px) {
    .colnwrap   {width: 99%;padding: 0px;    /*  margin: 5px 5px; */}
    .RowCol240  {width: 240px;  padding: 5px 5px; margin: 5px 5px 5px 0px; float: left; }
    .RowCol280  {width: 280px;  padding: 5px 5px; margin: 5px 5px 5px 0px; float: left; }
    .RowCol320  {width: 320px;  padding: 5px 5px; margin: 5px 5px 5px 0px; float: left; }
    .RowCol400  {width: 400px;  padding: 5px 5px; margin: 5px 5px 5px 0px; float: left; }
    .RowCol480  {width: 480px;  padding: 5px 5px; margin: 5px 5px 5px 0px; float: left; }
    .RowCol640  {width: 640px;  padding: 5px 5px; margin: 5px 5px 5px 0px; float: left; }
    .RowCol720  {width: 720px;  padding: 5px 5px; margin: 5px 5px 5px 0px; float: left; }
    .RowCol800  {width: 800px;  padding: 5px 5px; margin: 5px 5px 5px 0px; float: left; }
    .RowCol960  {width: 960px;  padding: 5px 5px; margin: 5px 5px 5px 0px; float: left; }
    .RowCol1100 {width:1100px;  padding: 5px 5px; margin: 5px 5px 5px 0px; float: left; }
    .RowColsaut {width: auto;   padding: 5px 0px 5px 5px; margin: 5px 0px 5px 0px; float: left;}
    data-PanlHead, PanlFoot  {clear: both;   padding: 0 5px;}
}

 /* for 960px or less */
@media screen and (max-width: 960px) {
    .colnwrap   {width: 99%;}
    .RowCol320  {width: 41%;  padding: 5px 5px;   margin: 0px 0px 5px 5px;}
    .RowColsaut {width: auto; padding: 5px 5px;   margin-left: 0px;   clear: both;    float: none;  }
    data-PanlHead, PanlFoot {padding: 1px 5px;   clear: both;}
}

 /* for 640px or less */
@media screen and (max-width: 640px) {
    .RowCol320  {width: auto;  float: none;  margin-left: 5px; }
    .RowColsaut {width: auto;  float: none;  margin-left: 5px; }
}

/* for 480px or less */
@media screen and (max-width: 480px) {
    data-PanlHead {height: auto; }
    h1    {font-size: 2em;  }
}

@media screen and (max-width: 1280px) { @viewport { width: 1280px; } }

/* 
@media only screen and (min-width: 200px) and (max-width: 767px)  {
    .cardW960 { width: 330px;  }
}
 */

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

/* CARDS: (in different widths) */
.cardWmax, .cardWaut, .cardW120, .cardW110, .cardW100, .cardW960, .cardW800, .cardW720,
.cardW640, .cardW560, .cardW480, .cardW400, .cardW320, .cardW280, .cardW240, .cardW160 {
    border: 1px solid var(--grayColor);
    background: var(--CardsBgrd);
    box-shadow: 2px 2px var(--ButtnShad);
    border-radius: 0.4em;
    border-style: inset;
    border-color: lightgray;
    border-width: thin;
    /* margin: 0.4em 0.2em 0.4em 0.2em; /**/
    /* padding: 0.3em 0.3em 0.4em 0.3em; /**/
    padding: 2px 0;
    display: inline-block;
}
@media screen and (max-width: 760px) { .p2hSideTxt { display: none !important; } }   /* Vertical edge texts: no room on phones */
@media screen and (max-width: 760px) { .p2hLeftMenu { position: static !important; margin: 8px auto !important; } }   /* Left menu: in the flow, not over the text */
.p2hVisHidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* A card with an unknown class (e.g. an old name) is still a box - else the resize grip lands in the middle below it */
:where([id^=card]) { display: inline-block; }
.cardWmax { width:  99%;   }
.cardWaut { width: auto;   }
.cardW120 { width: 1200px; }
.cardW110 { width: 1100px; }
.cardW100 { width: 1020px; }
/* Narrow screens: a fixed-width card is never wider than the window (no sideways page scrolling on phones) */
.cardW120, .cardW110, .cardW100, .cardW960, .cardW800, .cardW720, .cardW640, .cardW560, .cardW480,
.cardW400, .cardW320, .cardW280, .cardW240, .cardW160 { max-width: min(100%, calc(100vw - 32px)); box-sizing: border-box; }   /* (100vw includes the scrollbar) */
.cardW960 { width: 960px;  }
.cardW800 { width: 800px;  }
.cardW720 { width: 720px;  }
.cardW640 { width: 640px;  }
.cardW560 { width: 560px;  }
.cardW480 { width: 480px;  }
.cardW400 { width: 400px;  }
.cardW320 { width: 320px;  }
.cardW280 { width: 280px;  }
.cardW240 { width: 240px;  }
.cardW160 { width: 160px;  }

.cardsTitl,.wallTitl {
    font-family: sans-serif;
    /* font-size: 0.88em; */
    font-size: 14px;
    font-weight: 600;
    height: 1.1em;
    margin: 0.0em 0.2em;
    padding: 0.1em 0.1em 0.3em;
    background-color: var(--cardsTitl);
    position: relative;
    width: 100%;
    text-align: center;
}
.wallTitl {
    font-size: 1.2em;
    font-family: sans-serif;
}

.wallWmax {
    border: 3px solid var(--grayColor);
    background: var(--Wall_Bgrd);
    background-image: url(../_accessories/eurosymbol60.png);
    box-shadow: 3px 3px 4px var(--ButtnShad);
    border-radius: 0.40em;
    margin: 0.4em 0.2em 0.4em 0.2em;
    padding: 0.3em 0.3em 0.3em 0.3em;
    /* max-width: 100%;   */
    /* width: 640px;    */
}

.clearWrap {
    /* overflow: auto; */
    clear: both;
}

.fieldContent {
    text-align: left;
    display: block;
    padding: 0 6px;
    position: relative;
    background-color: white;
    padding: 10px 10px 4px;
    margin: 3px;
    border: 1px solid var(--FieldBord);
    border-radius: 4px;
}
.fieldSingle {
    padding: 2px 6px 4px;
}

.fieldStyle,
.tableStyle {
    display:inline-block;
    border-radius: 5px;
    border: 1px solid var(--FieldBord); /* border: none; */
    background-color: var(--FieldBgrd); /* background-color: transparent; */
                                        /* background-image: url('_accessories/_background.png'); */
    position: relative;
    /* text-align: right; */
    margin:3px;                         /* margin: 0; */
    padding:3px;                        /* padding: 0; */
 /* Minimalistic: - change here: */
    /* background-color: transparent; */
    margin: 1px;
    padding: 1px;
}
.lablInput input {
      border: 0px solid var(--grColrLgt);
 /* */
}


.fieldStyle {
    height: var(--FldHeight);
}

/* 
input[type="date"]::-webkit-inner-spin-button,
input[type="date"]::-webkit-outer-spin-button {
    -webkit-appearance: none; /* Hide in Chrome * /
    margin: 0; 
}


input[type="date"]::-webkit-calendar-picker-indicator{
    display: inline-block;
    margin-top: 2%;
    float: right;
}
/*  */
 
/* https://stackoverflow.com/questions/15530850/method-to-show-native-datepicker-in-chrome/30895180#answer-45461709 */
input[type="date"]::-webkit-calendar-picker-indicator {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    height: auto;
    color: transparent;
    background: transparent;
}
input[type="date"]::-webkit-inner-spin-button {
    z-index: 1;
}

/* adjust clear button */
input[type="date"]::-webkit-clear-button {
    z-index: 1;
}
input[type="date"] {
    position: relative;
}
input[type="date"]:after {
    /* content: "\25BC";  */
    color: #555;
    padding: 0; /* 0 2px; */
}
input[type="date"]:hover:after {    /* change color of symbol on hover */
    color: #bf1400;
}

input[type="date"]::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    margin: 0;
}

.inpField {                     /* The container for INPUT and LABEL: */
    /* border: 1px solid #d3d3d357;  */
    position: relative;
    min-height: 38px;
}
.inpField input {               /* The INPUT-field: */
    border: 1px solid var(--FieldBord);
    border-radius: 5px;
    font-size: 12px;
    padding: 8px 0px 6px 6px;
    margin: 6px 1px 1px 1px;
    width: 94%
 /* USER: text-align: center; */
}
.inpField label {               /* The visibly LABEL: */
    padding: 0px 0px 1px 3px;
    position: absolute;
    top:  -5px;
    left: 0px;
    width: 94%;
    /* text-align: right; */
}
.inpField label div {           /* The labels popup-HINT: */
    border: solid 1px var(--FieldBord);
    border-radius: 9px;
    /* 
    border-radius: 3px;
    box-shadow: 2px 2px 1px var(--ButtnShad) inset;
     */
    background-color: var(--lablBgrnd);
    /* margin: auto; */
    width: min-content;
    padding: 0 5px;
}
.boxStyle, .inpField input {
    box-shadow: 3px 4px 2px var(--shadColor);
    border: 2px solid var(--grayColor);
    border-radius: 5px;
    margin: 5px 5px;
    background-color: white;
}


.hint {
    color: var(--lablColor);
    background-color: var(--cardsTitl);
}
.mnu_heads {
    color:black;
    background-color: ivory;
    float: left;
    padding: 3px 12px;
}
.menulabl.a {
    color:white;
}
.menulabl:hover {
    text-decoration: underline;
    font-weight:600;
}
abbr.hint data-hint {
    display: none;
    position: relative;
    left: 50px;
    /* top: 35px;  */
    /* bottom: 80px; */
}
data-hint {
    top: 35px;
}
abbr.hint:hover {
    cursor: pointer;
}
[role=button][tabindex]:focus-visible { outline: 2px solid var(--AccnColr, DarkGreen); outline-offset: 2px; }   /* Keyboard focus */
/* htm_Alert / htm_Banner / htm_Badge / htm_ConfirmPostLink / htm_TableTools (from NH-logistik) */
.p2hAlert { margin: 10px auto; padding: 11px 15px; border: 1px solid; border-radius: 6px; text-align: left; column-span: all; }
.p2hAlert-success { background: #d4edda; color: #155724; border-color: #a9d8b4; }
.p2hAlert-error   { background: #f8d7da; color: #721c24; border-color: #efb1b8; }
.p2hAlert-warning { background: #fff3cd; color: #664d03; border-color: #f2d98a; }
.p2hAlert-info    { background: #d1ecf1; color: #0c5460; border-color: #9fd3dd; }
[data-p2h-vars] .p2hAlert-success { background: #1d3a26; color: #b8f0c6; border-color: #2f6b41; }
[data-p2h-vars] .p2hAlert-error   { background: #42201f; color: #ffc9c4; border-color: #7a3a36; }
[data-p2h-vars] .p2hAlert-warning { background: #3d3412; color: #ffe8a3; border-color: #6e5d1f; }
[data-p2h-vars] .p2hAlert-info    { background: #133a42; color: #b9eaf3; border-color: #286b78; }
.p2hBanner { margin: 0 auto 14px; padding: 9px 14px; border-left: 5px solid; border-radius: 4px; text-align: left; column-span: all;
    background: var(--CardsBgrd, #fff); color: var(--TextColr, #222); box-shadow: 0 1px 3px rgba(0,0,0,0.15); }
.p2hBanner-info { border-color: #0b7285; }  .p2hBanner-warning { border-color: #e0a800; }
.p2hBanner-danger { border-color: #c62828; }  .p2hBanner-success { border-color: #1a7f37; }
.p2hBadge { display: inline-block; padding: 2px 9px; border-radius: 10px; font-size: 11px; font-weight: 700; line-height: 1.5; vertical-align: middle; }
.p2hBadge-primary { background: #0d6efd; color: #fff; }  .p2hBadge-secondary { background: #5c636a; color: #fff; }
.p2hBadge-success { background: #1a7f37; color: #fff; }  .p2hBadge-danger    { background: #c62828; color: #fff; }
.p2hBadge-warning { background: #ffc107; color: #222; }  .p2hBadge-info      { background: #0b7285; color: #fff; }
.p2hConfirmPost { padding: 5px 14px; border: none; border-radius: 4px; font-weight: 600; cursor: pointer; }
.p2hConfirmPost:hover { filter: brightness(1.12); }
.p2hTableTools { display: flex; gap: 12px; align-items: center; justify-content: center; margin: 6px 0; flex-wrap: wrap; }
.p2hTtSearch { position: relative; }
.p2hTtSearch ic { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); opacity: 0.6; font-size: 12px; }
.p2hTtSearch input { padding: 5px 8px 5px 26px; border: 1px solid var(--grayColor, #aaa); border-radius: 4px; width: 200px; }
.p2hTtCount { font-size: 12px; opacity: 0.8; }
.p2hTtSort { cursor: pointer; }
.p2hTtSort[aria-sort=ascending]::after  { content: " \25B2"; font-size: 0.8em; }
.p2hTtSort[aria-sort=descending]::after { content: " \25BC"; font-size: 0.8em; }
/* Card size grip (lower right corner of every card) */
.p2hCardGrip { position: absolute; right: 1px; bottom: 1px; width: 14px; height: 14px; cursor: nwse-resize; touch-action: none; opacity: 0.45; z-index: 3;
    background-image: linear-gradient(135deg, transparent 0 5px, currentColor 5px 6px, transparent 6px 8px, currentColor 8px 9px, transparent 9px 11px, currentColor 11px 12px, transparent 12px 100%); }
.p2hCardGrip:hover, .p2hCardGrip:focus-visible { opacity: 0.9; }
@media (hover: none) { .p2hCardGrip { width: 22px; height: 22px; } }    /* Bigger on touch screens */
abbr.hint.p2hGripHint { position: absolute; right: 0; bottom: 0; z-index: 3; text-decoration: none; }
abbr.hint.p2hGripHint:hover data-hint, abbr.hint.p2hGripHint:focus-within data-hint { left: auto; top: auto; right: 4px; bottom: 18px; width: 240px; }
.p2hGripCol, .p2hColview .p2hGripTxt { display: none; }
.p2hColview .p2hGripCol { display: inline; }                    /* Column view: only the height can be dragged */
/* htm_CodeBox(fold:) - the code hidden until asked for */
.p2hCodeFold { text-align: left; margin: 4px 0; }
.p2hCodeFold > summary { cursor: pointer; display: inline-block; font-size: 13px; padding: 2px 8px; border-radius: 4px; opacity: 0.8; }
.p2hCodeFold > summary:hover, .p2hCodeFold > summary:focus-visible { opacity: 1; background: rgba(127,127,127,0.15); }
.p2hCodeFold[open] > summary { opacity: 1; }
.p2hCodeFold .p2hCfHide, .p2hCodeFold[open] .p2hCfShow { display: none; }
.p2hCodeFold[open] .p2hCfHide { display: inline; }
/* htm_faq() - question with a folded answer */
.p2hFaq { text-align: left; margin: 2px 0; border-bottom: 1px solid rgba(127,127,127,0.3); }
.p2hFaq > summary { cursor: pointer; list-style: none; padding: 6px 4px; font-weight: bold; }
.p2hFaq > summary::-webkit-details-marker { display: none; }
.p2hFaq > summary:hover, .p2hFaq > summary:focus-visible { background: rgba(127,127,127,0.12); }
.p2hFaq > summary > ic { display: inline-block; width: 1em; transition: transform 0.2s; }
.p2hFaq[open] > summary > ic { transform: rotate(90deg); }
.p2hFaqA { padding: 2px 8px 10px 1.6em; }
@media (prefers-reduced-motion: reduce) { .p2hFaq > summary > ic { transition: none; } }
/* htm_Table() row actions (suffix type rowact) */
.p2hRowAct { background: none; border: 0; padding: 1px 3px; cursor: pointer; box-shadow: none; font-size: 13px; }
.p2hRowAct:hover, .p2hRowAct:focus-visible { background: rgba(127,127,127,0.18); border-radius: 3px; }
/* htm_Table(): inputs in the cells - transparent (the zebra stripe shows) and almost the cell width (were inline in every cell) */
table.tablesorter > tbody > tr > td > input:not([type=hidden]):not([type=checkbox]):not([type=date]) { background-color: transparent; width: 98%; }
table.tablesorter > tbody > tr > td > input[type=date] { background-color: transparent; }
/* Card order (p2hCardMove): the handle, the card being moved, "Arrange cards" mode */
abbr.hint.p2hMoveHint { position: absolute; left: 1px; top: 6px; z-index: 2; text-decoration: none; }
abbr.hint.p2hMoveHint:hover data-hint, abbr.hint.p2hMoveHint:focus-within data-hint { left: 18px; top: 0; }
.p2hMoveIc { touch-action: none; cursor: grab !important; opacity: 0.55; }
.p2hMoveIc:hover, .p2hMoveIc:focus-visible { opacity: 1; }
[data-p2h-move=header] [id^=chead], .p2hArrange [data-p2h-move=toggle] [id^=chead] { cursor: grab; }
.p2hArrange [data-p2h-move=toggle] { outline: 2px dashed var(--AccnColr, DarkGreen); outline-offset: 2px; }
.p2hMoving { opacity: 0.6; outline: 2px dashed var(--AccnColr, DarkGreen) !important; outline-offset: 2px; }
.p2hDragging, .p2hDragging * { user-select: none !important; cursor: grabbing !important; }
/* htm_Card_end(foot:, subm:) - the card footer: below the scrolling body, hidden when the card is folded */
.p2hCardFoot { border-top: 2px solid var(--grayColor, #ccc); margin: 2px 4px 0; padding: 6px 8px 4px; text-align: center; display: flex;
    flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 12px; }
:has(> [id^=HideBody][style*="display: none"]) > .p2hCardFoot { display: none; }
[id^=card]:has(> [id^=HideBody][style*="display: none"], > form > [id^=HideBody][style*="display: none"]) > .p2hGripHint { display: none; }   /* Folded card: no grip */

abbr.hint:hover data-hint, abbr.hint:focus-within data-hint, .inpField:focus-within > abbr.hint data-hint {
    /* opacity: 0;    transition: opacity 2s;    transition-delay: 1s; */
    display: block;
    position: absolute;     /* this will let you align the popup with flexibility */
/*  left: 20px;             /* change this depending on how far from the left you want it align */
/*  top: -30px;             /* change this depending on how far from the top you want it to align */
/*  data-hint.style.left = ((el.clientX + data-hint.offsetWidth)  >= window.innerWidth) ?  ((el.clientX - data-hint.offsetWidth))+"px"  : (el.clientX)+"px";
/*  data-hint.style.top =  ((el.clientY + data-hint.offsetHeight) >= window.innerHeight) ?  (el.clientY - data-hint.offsetHeight)+"px"  : (el.clientY)+"px"; */
    width: 200px;           /* give this your own width */
    min-width: 160px;

    border: solid 1px #aaa;
    border-radius: 6px;
    box-shadow: 3px 3px 3px var(--ButtnShad);
    overflow-wrap: break-word;
    white-space: pre-line;
    background-color: var(--HintsBgrd);
    color: var(--HintsText);
    font-style:normal;
    font-weight:400;
    font-size: 12px;
    text-align: center;
    padding: 5px 3px;
    z-index: 99999;
}

input[type=text][title]:hover::after {
    content: attr(title);
    color: var(--HintsText);
    background-color: var(--HintsBgrd);
    font-size: 14px;
    border: 1px solid var(--grayColor);
    border-radius: 4px;
    padding: 5px 3px;
}


. acceptbutt {
    margin: 1px 2px;
    padding: 2px 3px;
    min-height: 28px;

}


.btnTit { /* Titles in grid-menu top-buttons: Dont show tooltip! */
/*   content: attr(title); */
    font-size: 0.95em;
    font-family: sans-serif;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: black;
    padding: .5em 1em;
    border: 2px;
    border-radius: 4px;
    letter-spacing: 0em;
    font-weight: 600;
}

.btn       { color: var(--btnTxNorm); text-decoration: none;}
.btn:hover { color: var(--btnTxOver); z-index: 777;}
.btn {
    font-size: 0.85em;
    font-family: sans-serif;
    white-space: pre-wrap;
    // min-width: 220px;
    position: absolute;
    top: 30%;
    left: 50%;
    z-index: 666;
    transform: translate(-50%, -50%);
    color: var(--btnTxNorm);
    margin-top: 3px;
//   max-width: 160px; 
    padding: .001em;
    border: none;
    border-radius: 4px;
    letter-spacing: 0em;
    font-weight: 300;
}


.data-colrlabl {
    color: green;
}

.hidden { display: none; }
input { border: 0; }

.grid-container {
    display: grid;
    grid-template-columns: 35% 30% 35% ;
    /* background-color: LightYellow; */
    background-image: url("../_accessories/_background.png");
    padding: 10px;
    grid-gap: 10px;
    text-align: center;
}

.grid-item {
    /* background-color: rgba(255, 255, 255, 0.8); */
    /* border: 1px solid rgba(100, 100, 150, 0.6); */
    /* padding: 5px; */
    /* font-size: 30px; */
    /* text-align: center; */
}

[contentEditable=true]:empty:not(:focus):before{
    content:attr(data-placeholder);
    color: var(--grenColr1);
    font-size: 90%;
}



.range-wrap {   /* https://css-tricks.com/value-bubbles-for-range-inputs/ */
    position: relative;
    /* margin: 0 auto 3rem; */
}
.range {
    width: 100%;
}
.bubble {
    /* background: green; */
    /* background: lightyellow; */
    /* color: white; */
    /* padding: 4px 12px; */
    padding: 2px;
    position: absolute;
    border-radius: 4px;
    left: 50%;
    transform: translateX(-50%);
}
.bubble::after {
    content: "";
    position: absolute;
    width: 2px;
    height: 2px;
    background: lightgreen;
    top: -1px;
    left: 50%;
}

body {
    margin: 1rem;
    min-height: calc(100vh - 55px);
    /* padding: 24px 0 0 0; */
}

.button, a.button {
/*  -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button; */

    text-decoration: none;
    font-size: 13px;
    min-height: 28px;
    color: white;
    border: solid 2px #aaa;
    border-style: outset;
    background: #1A6E1A;
    opacity: 0.9;
    padding: 2px 6px;
}

/* 
https://stackoverflow.com/questions/27124746/centering-legend-in-firefox */
/* indended styling for other browsers */
fieldset>legend {
  display: table;
  float: none;
  margin: 0 auto;
}

/* FF only */
@media screen and (-moz-images-in-menus: 0) {
  fieldset {
    position: relative;
  }
  fieldset>legend {
    position: absolute;
    left: 50%;
    top: -12px; /* depends on font size and border */
    background: white; /* depends on background */
    transform: translate(-50%, 0);
  }
}