/*z-index level / entity-class
 0     / LogoBG-myLogoBG
 1     / Panel-myPanel
 10    / Container-(myContainer-iFrame
 11-13 / DataGrid-myAPArea
 20    / Buttons-button, inputDate-myDateTime
 20    / inputTime-myTime
 99    / Loader-myLoaderlds, PageAction-DropDown, Menu-myMenu, PanelO/C-myPanelOpen/myPanelClose, MenuO/C-myMenuOpen/myMenuClose
*/

/*Global -------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*--Page*/
html, body {background-color:var(--Background)!important;color:var(--onBackground)!important;margin:0em;padding:0em;width:100%;height:100%;font-weight:normal;font-family:sans-serif;font-size-adjust:initial;line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;background-repeat:no-repeat;background-attachment:fixed;background-position:center center;background-size:cover}
/*--Scrollbar*/
::-webkit-scrollbar {width:.75em;height:.75em}
::-webkit-scrollbar-track {background-color:var(--Primary)}
::-webkit-scrollbar-thumb {background:var(--Scrollbar);border-radius:1em;}
::-webkit-scrollbar-thumb:hover {background:var(--Scrollbar)}
::-webkit-scrollbar-corner {background:var(--Primary)}
/*---Scrollbar for Parent table*/
#scrollHeader::-webkit-scrollbar {width:.25em;height:.45em}
#scrollHeader::-webkit-scrollbar-thumb {background:var(--Info);border-radius:1em;}
#scrollHeader::-webkit-scrollbar-thumb:hover {background:var(--Info)}
hr {border:none;height:.1em;color:var(--Info)/*old IE*/;background-color:var(--Info)/*Modern Browsers*/;margin:0 auto;padding:0;opacity:.3}
/*--<input> pending:[color],[date],[datetime-local],[email],[file],[image],[month],[number],[password],[radio],[range],[reset],[search],[tel],[time],[url],[week],[hidden],[submit],[button]*/
input, textarea {background-color:var(--InputBG);color:var(--onBackground);padding:.8em;padding-bottom:.6em;border-radius:.5em;transition:border-color 0.2s ease;text-align:left;font-weight:normal;width:100%}
input, textarea {border:none;outline:none}
input, textarea {-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
input, textarea {box-shadow:inset .125em .1875em .3125em var(--Background), 0 .0125em .0125em var(--Background)}
input:focus, input:active, textarea:focus, textarea:active {color:var(--onBackground)}
label {float:left;opacity:.5;font-weight:normal;font-size:.8em;padding-left:.8em;line-height:1.5em}
/*----<input> placeholder*/
::-webkit-input-placeholder {text-align:right;}
input:-moz-placeholder {text-align:right;}
/*----<input> Remove chrome autofill color*/
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {transition:background-color 5000000s ease-in-out 0s;-webkit-text-fill-color:var(--onBackground)!important}
/*----<input> [checkBox] Κατάργηση εντελώς του default checkbox σε όλους τους browsers */
input[type="checkbox"] {-webkit-appearance:none;-moz-appearance:none;appearance:none;width:1.75em;height:1.75em;margin:0;padding:0;border:none;background:transparent;cursor:pointer;
  display:inline-block;vertical-align:middle;background-image:url('../../eXPert/img/checkbox/unchecked.png');background-size:contain;background-repeat:no-repeat;background-position:center;}
input[type="checkbox"]:checked {background-image:url('../../eXPert/img/checkbox/checked.png');}
input[type="checkbox"]:disabled {cursor:default;opacity:1;}
/*---<input> [radio]*/
input[type=radio] {}
/*--<button>*/
button, .button {z-index:20;background-color:var(--Background);color:var(--onSecondary);white-space:nowrap;opacity:.5;height:2em;border-radius:.5em;border:none;/*padding:.5em;*/text-decoration:none;font-size:1em;margin-left:.2em;margin-right:.2em}
button img, .button img {position:relative;top:.25em}
button:hover, .button:hover {background-color:var(--Hover);opacity:1}
.buttonSmall {z-index:20;background-color:var(--Secondary);color:var(--onSecondary);white-space:nowrap;opacity:.5;height:1.6em;border-radius:.5em;border:none;text-decoration:none;font-size:1em;margin-left:.2em;margin-right:.2em}
.buttonSmallON {z-index:20;background-color:var(--LightBG);color:var(--onSecondary);white-space:nowrap;opacity:1;height:1.6em;border-radius:.5em;border:none;text-decoration:none;font-size:1em;margin-left:.2em;margin-right:.2em}
.myButton {z-index:20;background-color:var(--Secondary);color:var(--onSecondary);white-space:nowrap;opacity:.5;border-radius:.5em;border:none;text-decoration:none;font-size:1em;margin-left:.2em;margin-right:.2em}
.mybutton:hover {background-color:var(--Hover);opacity:1}
.myButtonON {z-index:20;background-color:var(--LightBG);color:var(--onSecondary);white-space:nowrap;opacity:1;height:1.6em;border-radius:.5em;border:none;text-decoration:none;font-size:1em;margin-left:.2em;margin-right:.2em}
.myButtonOFF {z-index:20;background-color:var(--Warning);color:var(--onSecondary);white-space:nowrap;height:1.6em;border-radius:.5em;border:none;text-decoration:none;font-size:1em;margin-left:.2em;margin-right:.2em}

button, .button, .mybutton, myButtonON, myButtonOFF {
    background-color:var(--Primary);
    box-shadow:rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}

/*--<select> select is replaced by select2*/
select {}
/*--<a>*/
a {background-color:transparent;color:var(--onaction);text-decoration:none;opacity:.7}
a:hover {opacity:1}
a.button {opacity:.5;padding:.5em;border:thin solid #7f7f7f;border-radius:.5em;text-decoration:none;font-size:1em;white-space:nowrap;line-height:2em/*;display:inline-block*/}
a.button:hover {background-color:var(--Hover);opacity:1}

/*eXPert ------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*--myContainers*/
.myCenter {position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)/*;display:inline-block*/}
.myPage {background-color:var(--Background);color:var(--onSurface);margin:0 auto;overflow:hidden;/*display:flex;flex-direction:column;position:fixed*/}
.myBackground {background-color:var(--Background);color:var(--onBackground)}
.mySurface {background-color:var(--Surface);color:var(--onSurface);border-radius:1em;padding:1em;box-shadow:0 3px 6px rgba(0,0,0,0.16),0 3px 6px rgba(0,0,0,0.23)}
.myPrimary {background-color:var(--Primary);color:var(--onPrimary)}
.mySecondary {background-color:var(--Secondary);color:var(--onSecondary)}
.myContainer {z-index:1;float:left;width:calc(100% - 23em);height:calc(100% - 1em);margin:.5em;transition:width .5s;position:relative;}
.myFrame {width:100%;height:100%;border:none;display:block}
.myFrameCloseBtn {position:relative;right:.5em}
.myButtonArea {margin:0 auto}
/*--myTable*/
.myTable {margin:0 auto;padding:0;border-collapse:separate;border-spacing:0em 0em;vertical-align:middle;width:100%}
.myTable td {/*padding-top:.25em;padding-bottom:.25em*/padding:.25em}
.myTable th td {vertical-align:middle/*;display:inline-block*/}
.myTableHD {float:left;display:ruby}
/*myUpload*/
.myUpload {background-color:var(--Background);border-collapse:separate;border-spacing:0 0;width:100%}
.myUpload td, .myUpload th {vertical-align:middle;text-align:left;padding-left:1em}
.myUpload thead tr {z-index:99;background-color:var(--Surface);position:-webkit-sticky;position:sticky;top:0;height:2em}
.myUpload tbody tr {background-color:var(--Surface)}
.myUploadLineGap {background-color:var(--Background)!important;height:.5em}
.myUploadIcon {max-width:4em;max-height:4em;position:relative;vertical-align:middle}
.myUploadIconImg {max-width:8em;max-height:8em;width:auto;height:auto}
.myUploadFileType {width:3em;height:3em;position:relative;vertical-align:middle}
.myUploadIconSelect {width:8em;height:8em;position:relative;vertical-align:top;}
.myUploadIconSelectImg {max-width:100%;max-height:100%;width:auto;height:auto;position:absolute;top:0;left:0;}
.myUploadIconSelectChk {position:absolute;top:.3em;left:.3em;z-index:99;width:2em;height:2em;border:.1em solid var(--Info);outline:none;cursor:pointer;}
.UploadDelete {width:auto;height:1.5em;opacity:.5;text-align:center}
.UploadDelete:hover {opacity:1}

/*--myMedia---*/
.myLogo {width:auto;height:2.5em}
.myLogoBG {z-index:0;width:30%;height:auto;opacity:.1;border:none;}
.myIcon {width:auto;height:1.5em;opacity:.5}
.myIcon:hover {opacity:1}
.myIconBtn {height:1em;line-height:1em}
.myIconSort {height:.75em;width:auto;padding-left:.25em;padding-right:.25em;opacity:.5}
.myIconSort:hover {opacity:1}
.myIconSelect2 {height:.75em;padding-top:0}
.myIconRequired {height:1em}

.myCircle {padding:0;width:auto;height:2.25em;border-top-left-radius:50% 50%;border-top-right-radius:50% 50%;border-bottom-right-radius:50% 50%;border-bottom-left-radius:50% 50%}
.myCounterContainer {/*display:inline;align-items:center;justify-content:space-evenly*/} 
.myCounter {background-color:var(--Warning);color:white;border-radius:20%;padding:.15em;width:fit-content}
.myVerticalCenter {margin:0;position:absolute;top:50%;-ms-transform:translateY(-50%);transform:translateY(-50%);}
/*--myClass*/
.myInputSymbol {opacity:.5;color:var(--Info);position:absolute;top:.5em;left:.5em;font-size:1em;font-style:italic;font-weight:normal;height:.5em}
.myInputTime {opacity:.5;color:var(--Info);position:absolute;top:.40em;right:.035em;font-size:1em;font-style:italic;font-weight:normal}
.myInputDate {opacity:.5;color:var(--Info);position:relative;top:.35em;right:2.05em;font-size:1em;font-style:italic;font-weight:normal;width:auto;height:24px}
.myInputDate:hover {opacity:1}
.myInputColorPicker {color:var(--Info);position:absolute;top:.5em;right:.25em;font-size:1em;font-style:italic;font-weight:normal}
.myLabel {color:var(--Label);font-size:.8em;font-weight:normal;font-style:italic;}
.myAction {color:var(--onSecondary)}
.myWarning {color:var(--Warning)}
.myInfo {color:var(--Info)}
.myError {background-color:var(--error);color:var(--onerror);font-size:small;font-style:italic}
.myNote {color:var(--onNote);font-size:.8em}
.myCaption {color:var(--onBackground);font-size:1.5em}
.myData {color:var(--Text);word-break:break-all;border:none;box-shadow:none;background-color:transparent;padding:0}
.myNumber {color:var(--Number);text-align:center}
.myDateTime {z-index:20;color:var(--datetime);text-align:center}
.ui-datepicker {z-index:9999 !important;}
.myColorPicker {z-index:20;padding:.5em;text-align:center;color:var(--onbackground)/*;display:block;*/}
.myBarcode {width:fit-content!important;margin:0 auto}
/*--myElements for Disabled*/
.myDisabled {opacity:.3;cursor:not-allowed} /*pointer event must included in outer element*/
.myEnabled {opacity:1;cursor:auto}
.myPointerEventDisabled {pointer-events:none} /*pointerevent for use in outer element*/
.myPointerEventEnabled {pointer-events:auto}

.split-words {display:flex;flex-wrap:wrap;}
.split-words span {display:block;margin:5px 0;}

/*--myDataGrid -------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*--DropDown Actions*/
.DropBtn {cursor:pointer;display:flex;justify-content:center;align-items:center}
.DropDown {z-index:999;position:relative;display:inline-block}
.DropDown-Content {z-index:999;background-color:var(--Secondary);color:var(--onSecondary);line-height:2.25em;margin-left:.5em;padding-top:.75em;padding-bottom:.75em;display:none;position:absolute;top:2.5em;min-width:10em;white-space:nowrap;overflow:auto;border-radius:1em;box-shadow:0 3px 6px rgba(0,0,0,0.16),0 3px 6px rgba(0,0,0,0.23)}
.DropDown-Content a:hover {background-color:var(--Mode80)}
.DropDown-Content a {z-index:999;display:flex;align-items:center;justify-content:left;font-size:.9em;padding-left:.75em;padding-right:.75em}
.Show {display:block;}

/*--mySections*/
.mySection {display:flex;align-items:center;text-align:center;color:var(--Info)}
.mySection::before, .mySection::after {content:'';flex:1;border-bottom:.1em solid var(--Info);opacity:.3}
.mySection:not(:empty)::before {margin-right:.25em;}
.mySection:not(:empty)::after {margin-left:.25em;}
.mySectionRow {margin:1em}

/*3rd Parties ------------------------------------------------------------------------------------------------------------------------------------------------------*/
/*--myRadioButton*/
.myRadioButton {
    opacity: 1;
    display: block;
    position: relative;
    padding-left: 1.5em;
    padding-right: 2em;
    cursor: pointer;
    font-size: 1em;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
/* Hide the browser's default radio button */
.myRadioButton input {position:absolute;opacity:0;cursor:pointer;display:none}
/* Create a custom radio button */
.myRadioCheckmark {position:absolute;top:.2em;left:0;height:1em;width:1em;background-color:var(--onPrimary);border-radius:50%} /* Create a custom radio button */
.myRadioButton:hover input ~ .myRadioCheckmark {background-color:var(--LightBG)} /* On mouse-over, add a  background color */
.myRadioButton input:checked ~ .myRadioCheckmark {background-color:var(--onPrimary)} /* When the radio button is checked, add a  background */
.myRadioCheckmark:after {content:"";position:absolute;display:none} /* Create the indicator (the dot/circle - hidden when not checked) */
.myRadioButton input:checked ~ .myRadioCheckmark:after {display:block} /* Show the indicator (dot/circle) when checked */
.myRadioButton .myRadioCheckmark:after {top:0;left:0;width:1em;height:1em;border-radius:50%;background:var(--LightBG)} /* Style the indicator (dot/circle) */

.myLoaderlds {z-index:999999;display:block;width:5em;height:auto;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);padding:100%;background-color:var(--Background)}
.lds-spinner, .lds-spinner div, .lds-spinner div:after {box-sizing:border-box}
.lds-spinner {color:var(--Info);display:inline-block;position:relative;width:5em;height:5em}
.lds-spinner div {transform-origin:2.5em 2.5em;animation:lds-spinner 1.2s linear infinite}
.lds-spinner div:after {content:" ";display:block;position:absolute;top:3.2px;left:36.8px;width:6.4px;height:17.6px;border-radius:20%;background:var(--Info)}
.lds-spinner div:nth-child(1) {transform:rotate(0deg);animation-delay:-1.1s}
.lds-spinner div:nth-child(2) {transform:rotate(30deg);animation-delay:-1s}
.lds-spinner div:nth-child(3) {transform:rotate(60deg);animation-delay:-0.9s}
.lds-spinner div:nth-child(4) {transform:rotate(90deg);animation-delay:-0.8s}
.lds-spinner div:nth-child(5) {transform:rotate(120deg);animation-delay:-0.7s}
.lds-spinner div:nth-child(6) {transform:rotate(150deg);animation-delay:-0.6s}
.lds-spinner div:nth-child(7) {transform:rotate(180deg);animation-delay:-0.5s}
.lds-spinner div:nth-child(8) {transform:rotate(210deg);animation-delay:-0.4s}
.lds-spinner div:nth-child(9) {transform:rotate(240deg);animation-delay:-0.3s}
.lds-spinner div:nth-child(10) {transform:rotate(270deg);animation-delay:-0.2s}
.lds-spinner div:nth-child(11) {transform:rotate(300deg);animation-delay:-0.1s}
.lds-spinner div:nth-child(12) {transform:rotate(330deg);animation-delay:0s}
@keyframes lds-spinner {0% {opacity:1;} 100% {opacity:0;}}
/*For COLORBOX*/
.eXPertReplaceBorder {border:.01em solid var(--Mode50);border-radius:1em;margin:.5em;box-shadow:0 0 1em var(--Mode50);}
.noButton #cboxLoadedContent { margin:0 }
.noButton #cboxClose {display:none!important; }
.colorboxClose {float:right;position:fixed;top:0em;right:1em;margin-left:1em}


/*Custom Page ----------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.myCPFrameCloseBtn {position:relative;top:0em;right:.5em}
.myCPCaption {color:var(--Info);font-weight:bold;font-size:1em;text-align:center}

.myCPCaptionArea {display:flex;justify-content:left;align-items:center;padding-bottom:.5em}
.myCPArea {z-index:11;width:99%;height:100%;margin:0;padding:0;border:none;overflow:hidden;position:absolute;top:0;left:50%;transform:translate(-50%,0%);} /*Area*/
.myCPArea {background-color:var(--Surface)}
.myCPAreaHeader {min-width:100%;height:3em;background-color:var(--Secondary);display:flex;justify-content:center;align-items:center;text-align:left;font-size:1em} /*Area Header 3em*/
    .myCPAreaLeft {width:30%;color:var(--Info);text-align:left;vertical-align:middle}
    .myCPAreaCenter {width:40%;color:var(--Info);text-align:center;font-size:1.5em;font-weight:bold}
    .myCPAreaRight {width:30%;color:var(--Info);text-align:right;vertical-align:middle}
.myCPAreaData {min-height:50vh;max-height:calc(98vh - 3em)/*5em=sum of Header+Footer*/;margin:0 auto;padding:0;min-width:90%;max-width:100%;height:fit-content;overflow:auto;text-align:center} /*Area Data Grid*/
.myCPAreaFooter {height:0em;background-color:var(--Primary)} /*Area Footer 2.5em*/

.myCPDG thead th {text-align:center;padding:.2em}
.myCPDG tbody td {padding:.2em}
.myCPDG tbody tr:hover td, tbody tr:hover th {background-image:var(--HoverLine)}

.myCPListLabel {font-size:1em;font-weight:normal;font-style:italic;color:var(--onMode60);padding:.2em}
.myCPListLabel:hover {color:var(--onMode90)}


/*PANEL--------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.myPanel {z-index:1;float:left;background-color:var(--Background);color:var(--onBackground);margin:0;padding:0;overflow:hidden;width:auto;height:100vh}
.myPanelIcons {float:left;width:2em;min-height:100vh;background-color:var(--Primary);color:var(--onPrimary);opacity:.5}
.myPanelIcons div {padding:.25em}
.myPanelContent {background-color:var(--Surface);color:var(--onSurface);opacity:.7;padding:0;overflow:hidden;width:20em;height:100%;box-shadow:rgba(0, 0, 0, 0.15) 2.4px 2.4px 3.2px;float:left;transition:width 0.5s}
.myPanelContent table {margin:0 auto;padding:0;border-collapse:separate;border-spacing:0 0;border:none}
.myPanelContent table td {padding:.2em;vertical-align:top;white-space:nowrap}
.myPanelContentDIV {padding:.5em}
.myPanelContentHeader {height:calc(100vh - 26em);}
.myPanelContentFooter {height:26em}
.myPanelOpen {z-index:99;float:left;opacity:.5;cursor:pointer;position:absolute;top:50%;width:1.5em;height:1.5em;display:none}
.myPanelOpen:hover {opacity:1;}
.myPanelClose {z-index:99;float:left;opacity:.5;cursor:pointer;position:absolute;top:50%;width:1.5em;height:1.5em}
.myPanelClose:hover {opacity:1;}

/*MENU -------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.cm-toggle {z-index:999;border:none;box-shadow:none;background-color:transparent}
.xxxcm-toggle:hover {background-color:var(--onMode70)}
/* inserted via JS */
.js-toggle-icon {position:relative;z-index:999;display:inline-block;width:14px;margin-right:2px;margin-left:-23px;line-height:14px;text-align:center;font-style:normal;cursor:pointer;border:1px solid #666;border-radius:2px}
.myMenu {z-index:99;background-color:var(--Surface);color:var(--onSurface);width:20em;height:0;padding-left:.5em;position:absolute;top:0;left:2em;overflow-x:hidden;transition:height .5s}
.myMenu a {color:var(--Info)}
.myMenu a:hover {}
.xmyMenu ul li li li li:hover {background-color:var(--Mode50);/*background-image:var(HoverLine)*/} /*gold #756300*/
.myMenu ul {margin:0;padding-left:25px;line-height:2em;list-style:none;word-wrap:break-word}
.myMenu ul li {position:relative}
.myMenu ul li:before {position:absolute;top:0;left:-15px;display:block;width:15px;height:1em;content:"";border-bottom:1px dotted #666;border-left:1px dotted #666}
.myMenu ul.tree > li:first-child:before {border-left:none} /* hide the vertical line on the first item */
.myMenu ul li:after {position:absolute;top:1.1em;bottom:1px;left:-15px;display:block;content:"";border-left:1px dotted #666}
.myMenu ul li:last-child:after {display:none} /* hide the lines on the last item */
.myMenuOpen {z-index:99;opacity:.5;width:1.5em;height:1.5em;cursor:pointer;position:absolute;top:.5em;left:.25em}
.myMenuOpen:hover {opacity:1}
.myMenuClose {z-index:1000;color:var(--Warning);opacity:.5;width:1.5em;height:1.5em;cursor:pointer;display:none;position:absolute;top:.5em;left:.25em}
.myMenuClose:hover {opacity:1;}

/*RIGHT CLICK MENU*/
.context-menu-dialog{z-index:999;position:fixed;display:none;background-color:var(--Secondary);color:var(--onSecondary);font-size:.75em;box-shadow:0 4px 12px rgba(0,0,0,0.15);max-width:100%;border-radius:5px}
.context-menu-dialog ul{z-index:999;list-style:none;margin:0;padding:0}
.context-menu-dialog ul li{z-index:999;padding:.5em;white-space:nowrap}
.context-menu-dialog ul li a{z-index:999;text-decoration:none;color:var(--onSecondary);display:block;width:100%}
.context-menu-dialog ul li:hover{z-index:999;background-image:var(--HoverLine)}

/* Print ------------------------------------------------------------------------------------------------------------------------------------------------------*/
.pPrintPage {padding:1px; border-style:solid none solid none;border-width:thin;border-color:#C8C8C8}

.pPrintPageHeader {border-style:none;width:100%;}
.pPrintPageHeaderLogoLeft {text-align:left; width:50%;}
.pPrintPageHeaderLogoRight {text-align:right; width:50%;}

.pPrintPageNo {text-align:right;}
.pPrintTitle {font-size:22px; font-weight:bold; text-align:center;width:100%}
.pPrintSubTitle {font-size:12px; font-weight:bold; text-align:center; color:darkred;}
.pPrintDateText {font-size:9px; font-style:italic; font-weight:normal; text-align:right;}
.pPrintDate {font-size:9px; font-weight:bold; font-style:normal; text-align:right}

.pPrintTableHeader {border-style:none; width:100%;}

.pPrintTable {width:100%;}
.pPrintTable th {border:thin solid #000000; font-weight:bold; background-color:lightgray;}
.pPrintTable td {border:thin solid #000000; padding:2px;}


.debug-panel {max-height:0;overflow:hidden;transition:max-height 0.5s ease, padding 0.5s ease;background:#f8f8f8;border:1px solid #ccc;padding:0 10px;font-family:monospace;font-size:13px;}
.debug-panel.open {max-height:300px;padding-top:10px;padding-bottom:10px;}

/* Εξωτερικό wrapper με scroll */
.caption-left,.caption-right {display:flex;align-items:center;gap:0.3rem;}
.caption-center {flex-grow:1;text-align:center;font-weight:bold;}

.table-wrapper {width:100%;overflow-x:auto;max-height:calc(100vh - 10em); overflow-y:auto;position:relative;}
.myTableDG {table-layout:auto !important;border-collapse:separate;border-spacing:0 0;width:100%;z-index:1;background-color:var(--Surface);}
.myTableDG {height:100%;}
.myTableDG tr {height:.25em;}
.myTableDG th {padding-left:.5em;padding-right:.5em;white-space:nowrap}
.myTableDG td {padding:.5em;background-color:var(--Surface);white-space:normal;word-wrap:break-word;overflow-wrap:break-word;vertical-align:top;width:auto !important;max-width:100% !important;}
.myTableDG thead tr.criteria-row th {border-style:none solid none solid;border-color:var(--Mode85);border-width:.1em;position:sticky;top:0;background-color:var(--Secondary);z-index:10;height:6em;white-space:normal;vertical-align:middle;}
.myTableDG thead tr.header-row th {position:sticky;top:6em;background-color:var(--Secondary);z-index:10;min-height:4em;white-space:normal;vertical-align:top;}
.myTableDG thead tr + tr th {border-style:none solid solid solid;border-color:var(--Mode85);border-width:.1em;}
.myTableDG tbody td {border-style:none solid solid solid;border-color:var(--Mode85);border-width:.0em;}
.myTableDG tfoot tr + tr th {background-color:var(--Secondary);border-style:solid none none none;border-color:var(--Mode85);border-width:.1em;text-align:center;}
.myTableDG tfoot tr.tfoot-total-row th:first-child,.myTableDG tfoot tr.tfoot-total-row th:last-child {background-color:var(--Secondary) !important;}
.myTableDG {}
.myTableDG tfoot tr.tfoot-total-row th {position:sticky;bottom:0;background-color:var(--Secondary);z-index:9;}
.myTableDG th:first-child,.myTableDG td:first-child {position:sticky;left:0;background-color:var(--Surface);z-index:4;box-shadow:2px 0 5px -2px rgba(0,0,0,0.2);color:var(--Info);}
.myTableDG th:last-child,.myTableDG td:last-child {position:sticky;right:0;background-color:var(--Primary);z-index:5;box-shadow:-2px 0 5px -2px rgba(0,0,0,0.2);}
.myTableDG thead tr.criteria-row th:first-child,.myTableDG thead tr.criteria-row th:last-child {z-index:15;}
.myTableDG thead tr.header-row th:first-child,.myTableDG thead tr.header-row th:last-child {z-index:16;}
.criteria-input {width:100%;font-size:0.7rem;}.sort-link {text-decoration:none;color:inherit;margin-right:0.3em;background:none;padding:0;border-radius:0;display:inline;}
.myTableDG thead tr.header-row th.sorted-asc,.myTableDG thead tr.header-row th.sorted-desc {background:var(--LightBG);}
/* Hover και Highlight όταν κάνουμε κλικ στο action-cell */
.myTableDG td.tr-highlight, .myTableDG td:first-child.tr-highlight {background-color:var(--LightBG) !important;color:inherit;}
.myTableDG tbody tr:not(.active-row):hover td:not(.tr-highlight) {background-color: var(--Mode85);}
/*inactive row BG*/
.myTableDG tbody tr.active-row td, .myTableDG tbody tr.active-row td:first-child, .myTableDG tbody tr.active-row td:last-child {background-color:#311F1D;}
/*pending row BG*/
.myTableDG tbody tr.pending-row td, .myTableDG tbody tr.pending-row td:first-child, .myTableDG tbody tr.pending-row td:last-child {background-color:darkgrey;}
/*hover row BG*/
.myTableDG thead tr.header-row th .th-inner-wrapper {display:grid;grid-template-columns:auto 1fr;gap:0.5em;align-items:start;justify-content:start;white-space:normal;}
/*για έλεγχο στοίχισης στη DGHeader*/
.xmyTableDG thead tr.header-row th .th-inner-wrapper.flex-align {display:flex;align-items:center;gap:0.5em;align-items:start;white-space:normal;}
.xmyTableDG thead tr.header-row th .th-inner-wrapper.flex-align.L {justify-content:flex-start;text-align:left;}
.xmyTableDG thead tr.header-row th .th-inner-wrapper.flex-align.C {justify-content:center;text-align:center;}
.xmyTableDG thead tr.header-row th .th-inner-wrapper.flex-align.R {justify-content:flex-end;text-align:right;}

.myTableDG .th-sort-icon {grid-column:1;white-space:nowrap;}
.myTableDG .th-alias {grid-column:2;word-break:break-word;overflow-wrap:break-word;text-align:left;}

.myTableDGEmptyTr {z-index:-1;line-height:.2em;padding:0;background-color:var(--Background) !important;}

.symbol-input-wrapper {position:relative;display:inline-block;}
.input-symbol {position:absolute;left:6px;top:50%;transform:translateY(-50%);color:#888;pointer-events:none;font-size:14px;}
.symbol-input-wrapper input {padding-left:20px;}
.menu-dots {all:unset;cursor:pointer;font-weight:bold;font-size:1.2rem;text-align:center;user-select:none;padding:0 0.3rem;color:var(--onBackground);opacity:.5}
.menu-dots:hover {color:var(--Info);}
.caption-bar {display:flex;align-items:center;justify-content:space-between;gap:0.5em;}

/*Action Area Body Popup Menu*/
/* Dropdown container */
.action-cell {text-align:center;width:3em!important} 
#DGActionsContainer {position:absolute;display:none;z-index:9999;}
/* Dropdown menu */
#DGActionsContainer .action-dropdown {right:auto;left:0;margin:0;padding:0.75em 0;min-width:12em;background:var(--Secondary);color:var(--onSecondary);border:0;box-shadow:0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);border-radius:1em;}
/* Action items */
#DGActionsContainer .action-item {display:flex;align-items:center;font-size:0.9em;padding:0.5em 1em;cursor:pointer;opacity:0.7;width:100%;box-sizing:border-box;}
#DGActionsContainer .action-item:hover:not(.disabled) {background-color:var(--Mode80);opacity:1;}
#DGActionsContainer .action-item.disabled {opacity:0.5;cursor:default;}
/* Columns icon + text */
#DGActionsContainer .action-item .action-icon {width:24px;text-align:center;margin-right:0.5em;flex-shrink:0;}
#DGActionsContainer .action-item .action-text {flex:1;}
/* Highlight γραμμής όταν ενεργοποιείται το dropdown */
td.tr-highlight {background-color:var(--LightBG);color:var(--Surface);width:100%;height:100%;transition:background-color 0.2s ease;}

.displayBlock {display:block}
.L {text-align:left}
.C {text-align:center}
.R {text-align:right}
.B {font-weight:bold}
.I {font-style:italic}
.colorDate {color:var(--Date)}
.colorTime {color:var(--Time)}
.colorCurrency {color:var(--Currency)}
.colorNumber {color:var(--Number)}

.LUIconWrapper {display:flex; align-items:flex-start; gap:0.5em;}
.LUIconWrapper > img.myIcon {flex-shrink:0;width:1.5em;height:auto}
.LUIconWrapper > span {display:block;}

.myWrappedText {display:inline-block;word-break:break-word;white-space:normal;overflow-wrap:break-word;}

/* --- Βασικό styling input για όλα τα cases --- */
.INT_DGAdd, .INT_DGEdit, .INT_DGSearch, .INT_DGView {flex:1;width:100%;height:30px;line-height:30px;box-sizing:border-box;padding-left:25px;font-size:14px;}
.inputWrapper {display:flex;align-items:center;width:100%;position:relative;}
.myInputSymbol {flex:none;margin-right:5px;color:var(--Info);user-select:none;pointer-events:none;}
.myDisabled {background-color:var(--DisabledBG);pointer-events:none;user-select:none;}
.myLock {pointer-events:none;user-select:none;opacity:.5;}
.myNotAllowed {cursor:not-allowed}
.DGSearchContainer {display:flex;flex-direction:column;gap:4px;width:100%;position:relative;}

/* --- DATE --- */
.DATE_DGAdd, .DATE_DGEdit, .DATE_DGSearch, .DATE_DGView {flex:1;width:100%;height:30px;line-height:30px;box-sizing:border-box;font-size:14px;padding-left:2.5em}
.myDateIcon {position:absolute;left:.5em;top:50%;transform:translateY(-50%);color:var(--Info);cursor:pointer;user-select:none;}

/* --- TIME --- */
.TIME_DGAdd, .TIME_DGEdit, .TIME_DGSearch, .TIME_DGView {flex:1;width:100%;height:30px;line-height:30px;box-sizing:border-box;font-size:14px;padding-left:2.5em}
.myTimeIcon {position:absolute;left:.5em;top:50%;transform:translateY(-50%);color:var(--Info);cursor:pointer;user-select:none;}

/* --- QUILL --- */
.ql-editor p,
.quill-dark-wrapper p {margin: 0 !important;padding: 0 !important;line-height: .5em !important;}
/* Περιορισμός εικόνων μέσα στον editor */
.ql-editor img {max-width:100px;height:auto;display:block;margin:10px 0;}


.myID {color:var(--ID)}

.INT_DGLabel {text-align:right;color:var(--Label)}
.INT_DGAdd {text-align:right}
.INT_DGEdit {text-align:right}
.INT_DGView {display:contents;text-align:left}
.INT_DGSearch {text-align:center}
.INT_DGHeader {text-align:center;color:var(--Number)}
.INT_DGData {text-align:left;color:var(--Number)}
.INT_DGFooter {text-align:right;color:var(--Label)}
.INT_DGDataHD {}
.INT_DGAddModal {}
.INT_PrintData {}
.INT_PrintHeader {}

.INT_LU_DGLabel {text-align:center;color:var(--Label)}
.INT_LU_DGAdd {}
.INT_LU_LUDGEdit {}
.INT_LU_DGView {}
.INT_LU_DGSearch {}
.INT_LU_DGHeader {text-align:center}
.INT_LU_DGData {display:block;text-align:left}
.INT_LU_DGFooter {}
.INT_LU_DGDataHD {}
.INT_LU_DGAddModal {}
.INT_LU_PrintData {}
.INT_LU_PrintHeader {}

.BIT_DGLabel {text-align:center;color:var(--Label)}
.BIT_DGAdd {text-align:left}
.BIT_DGEdit {text-align:left}
.BIT_DGView {text-align:left}
.BIT_DGSearch {text-align:center}
.BIT_DGHeader {text-align:center}
.BIT_DGData {display:block;text-align:center}
.BIT_DGFooter {}
.BIT_DGDataHD {}
.BIT_DGAddModal {}
.BIT_PrintData {}
.BIT_PrintHeader {}

.NUMERIC_DGLabel {text-align:right;color:var(--Label)}
.NUMERIC_DGAdd {text-align:right}
.NUMERIC_DGEdit {text-align:right}
.NUMERIC_DGView {display:contents;text-align:left}
.NUMERIC_DGSearch {text-align:right}
.NUMERIC_DGHeader {text-align:right;padding-right:.5em;color:var(--Currency)}
.NUMERIC_DGData {display:block;text-align:right;padding-right:.5em;color:var(--Currency)}
.NUMERIC_DGFooter {text-align:right;color:var(--Label)}
.NUMERIC_DGFooterLabel {text-align:right; margin-right:1em; color:var(--Label)}
.NUMERIC_DGDataHD {}
.NUMERIC_DGDataHD {}
.NUMERIC_DGAddModal {}
.NUMERIC_PrintData {}
.NUMERIC_PrintHeader {}

.DATE_DGLabel {text-align:center;color:var(--Label)}
.DATE_DGAdd {max-width:130px!important}
.DATE_DGEdit {max-width:130px!important}
.DATE_DGView {display:contents;text-align:left}
.DATE_DGSearch {}
.DATE_DGHeader {text-align:center;color:var(--Date)}
.DATE_DGData {display:block;text-align:center;color:var(--Date)}
.DATE_DGFooter {}
.DATE_DGDataHD {}
.DATE_DGAddModal {}
.DATE_PrintData {}
.DATE_PrintHeader {}

.TIME_DGLabel {text-align:center;color:var(--Label)}
.TIME_DGAdd {max-width:90px!important}
.TIME_DGEdit {max-width:90px!important}
.TIME_DGView {display:contents;text-align:left}
.TIME_DGSearch {}
.TIME_DGHeader {text-align:center;color:var(--Time)}
.TIME_DGData {display:block;text-align:center;color:var(--Time)}
.TIME_DGFooter {}
.TIME_DGDataHD {}
.TIME_DGAddModal {}
.TIME_PrintData {}
.TIME_PrintHeader {}

.NVARCHAR_DGLabel {text-align:left;color:var(--Label)}
.NVARCHAR_DGAdd {}
.NVARCHAR_DGEdit {}
.NVARCHAR_DGView {display:inline-block!important;text-align:left!important}
.NVARCHAR_DGSearch {}
.NVARCHAR_DGHeader {text-align:left}
.NVARCHAR_DGData {color:var(--Text);display:block;text-align:left!important}
.NVARCHAR_DGFooter {}
.NVARCHAR_DGDataHD {}
.NVARCHAR_DGAddModal {}
.NVARCHAR_PrintData {}
.NVARCHAR_PrintHeader {}


/* Container κάθε επιλογής: κάθε label σε ξεχωριστή γραμμή */
.inputWrapper.RADIO_DGAdd, .inputWrapper.RADIO_DGEdit {display:flex;flex-direction:column;align-items:flex-start;gap:0.5em;}
.inputWrapper.RADIO_DGAdd label, .inputWrapper.RADIO_DGEdit label {display:flex;flex-direction:row;align-items:center;gap:0.5em;margin:0;padding:0;}
.radioCircle input[type="radio"] {accent-color:var(--LightText);width:1.5em;height:1.5em;}
.radioText {font-size:1.25em;}