:root {
  --menu-bg-color: #f8fafc    ; /* Main menu background color  #fff F1F5FF  */
  --menu-text-color: #333333; /* Menu text color */
  --menu-hover-color: #b0c4de    ; /* Hover background color #7892C2 #b0c4de  #E6F2FF    */
  --menu-active-border-color: #5357A6; /* Active item border color */
  --menu-shadow-color: rgba(0,0,0,0.1); /* Shadow color */
  --menu-border-color: #e0e0e0; /* Border color */
  --menu-font-family: 'Inter', Arial, sans-serif; /* Font family for all menus */
  --menu-font-weight: 600; /* Font weight for menu items */
  --menu-active-font-weight: bold; /* Font weight for active menu items */
  --menu-text-shadow: none; /* Text shadow for menu items */
  
  /*Dialog design*/
  --dialog-background: #fff;
  --dialog-header-background: #0066cc;
  --dialog-table-head-backgroun: #d3d8dd;
  --dialog-table-head-font-color: #333333;
  --dialog-table-second_tr_color: #f9f9f9;
  /* Halottas kocsi design
  --table-background: #b0c4de; /*tábla adatok háttere
  --table-header: #365985;  /*tábla adatok fejléc színe
  --global-button-background: #365985; /*Gombok globális háttérszíne
  --global-page-background: #F1F5FF; /*az oldal alap háttérszíne
  --global-datatablehead-background: #365985 */

  /*AI design*/
  --table-background:  #fff; /*tábla adatok háttere #fff*/
  --table-header: #0066cc;  /*tábla adatok fejléc színe*/
  --global-button-background: #0066cc; /*Gombok globális háttérszíne*/
  --global-button-background_second: #f1f5f9; /*Gombok globális háttérszíne*/
  --global-button-font-color: #FFFFFF;
  --global-page-background: #f0f5fa; /*az oldal alap háttérszíne #F1F5FF;*/
  --global-datatablehead-background: #0066cc;
  --global-input-background: #f8fafc;
  --global-label-font-color:#333333;
  /*Loading dialog*/
  --primary-color: #0066cc;
  --primary-hover: #0052a3;
  --secondary-color: #64748b;
  --secondary-hover: #475569;
  --card-color: #ffffff;
  --text-primary: #1e293b;
  --text-secondary: #64748b;
  --error-color: #e53e3e;
  --warning-color: #dd6b20;
  --success-color: #38a169;
  --info-color: #3182ce;
}


img.kepdoboz {
  max-height: 50px;
  max-width: 50px;
  min-height: 50px;
  max-height: 50px;
  width: 50px !important;
  height: 50px !important;
}

.leftb {
  display: block;
  float: left;
  /* vertical-align doesn't work with display: block */
}

.elrejt {
  display: none;
}

.rightb {
  display: block;
  float: right;
  /* vertical-align doesn't work with display: block */
}

.btn_container_div{
  margin: 10px 10px 20px 10px;
  

}
.chartdiv {
  overflow: hidden;
}
section div {
  float: left;
  height: 24vw;
  margin: 1%;
  width: 46%;
}
section {
  margin: -1%;
  padding: 20px;
}
@media print {
  .noprint * {
    /* Using line-height instead of unknown property text-height */
    line-height: 40px;
  }
}

.sarga {
  background-color: yellow;
}

.selected tr {
  background-color: #00529b;
}

img {
  width: 200px !important;
  height: 200px !important;
  
}

.img_class {
  width: 20px !important;
  height: 20px !important;
  
}

h3 {
  color: var(--heading-color);
  padding-left: 5px;
}
h1 {
  color: var(--h1-color);
  padding-left: 5px;
}
h4 {
  margin: 0;
  font-size: 16px;
  color: var(--h4-color);
  z-index: 1;
}

a:link,
a:visited {
  color: black;
  text-decoration: none;
}

a:hover {
  color: black;
}

#page {
  width: 100%;
  margin: 0px; /*nem találtam meg, hol kap a page margin-t, emiatt ez a sor*/
  border: 1px solid black;
  background-color: #162955;

}

#header {
  height: 40px;
 /* background-color: #162955;
  border-bottom: 1px solid black;*/
}
#header_menu {
  height: 40px;
 /* background-color: #162955;
  border-bottom: 1px solid black;*/
}
#footer {
  clear: both;
  background-color: var(--menu-bg-color);
  border-top: 1px solid var(--menu-border-color);
  color: var(--menu-text-color);
  font-family: var(--menu-font-family);
}

#main {
  min-height: 800px;
  background-color: #2e4172;
  
}

#left {
  float: left;
  width: 135px;
  padding: 0px;
  background-color: #2e4172;
}

#right {
  float: right;
  width: 150px;
  padding: 10px;
  background-color: #e8e8e8;
}

#middle {
  margin: auto;
  margin-right: -1px;
  
  padding: 2px;
  min-height: 800px;
  height: auto !important;
  background-color: var( --global-page-background); /*#e4ebf0    F1F5FF f5f8fa*/
  /*  background-color: #b0c4de; eredeti*/
  border-left: 1px solid black;
  border-right: 1px solid black;
}

.scrollable_container {
  border: 2px solid #ccc;
  height: 200px;
  max-height: 200px;
  float: left;
  width: 100%;
  min-width: 200px;
  overflow-y: auto;
  
}

.grid_container {
    font-size: 12px;
    width: 100%;
    height: auto;
    min-height: 200px;
    overflow: visible;
}
.hack {
  float: left;
  width: 100%;
  overflow-y: scroll;
  height: 0;
}

font.nfo {
  color: #d0e4fe;
  background-color: #365985;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  border-radius: 6px;
  white-space: nowrap;
  padding: 3px 3px 3px 3px;
}
input.date_picker_fromtoday,
input.date_picker {
  background-image: url("images/calendar-icon1616.png");
  background-position: right center;
  background-repeat: no-repeat;
  margin-bottom: 2px;
  padding: 1px 5px;
  border: 0;
  height: 20px;
  padding: 8px;
  border-radius: 4px;
  border: 1px solid #ccc;
  box-shadow: 1px 1px 0 0 #fff, 5px 5px 40px 2px #fff inset;
  background-clip: padding-box;
  outline: 0;
  width: 110px;
}

input.search {
  background-image: url("images/search2424-4.png");
  background-position: right center;
  background-repeat: no-repeat;
  padding-right: 18px;
  margin-bottom: 2px;
  padding: 1px 5px;
  border: 0;
  height: 20px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 4px;
  border: 1px solid #ddd;
  background-color: var(--global-input-background);
}


input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.input360px {
  width: 370px !important;
}
.input200px{
  width: 200px !important;
}

.input,
input#barcode,
input#speckod,
input#vnev,
input#eladat_tol,
input#eladat_ig,
input#bedat_tol,
input#bedat_ig,
input#akcio_dat_tol,
input#akcio_dat_ig,
input#szallitasi_napok_szama,
input#vcode,
input#adoszam,
input#csoportadoszam,
input#megnev,
input#megnevezes1,
input#megnevezes2,
input#megnevezes3,
input#iranyitoszam,
input#telepules,
input#közterületneve,
input#közterületjellege,
input#hazszam,
input#epulet,
input#lepcsohaz,
input#szint,
input#ajto,
input#megye,
input#kapcsolat,
input#tel1,
input#tel2,
input#tel3,
input#email,
input#email2,
input#weboldal,
input#bankszamlaszam,
input#megjegyzes,
input#megjegyzes2,
input#megjegyzes3,
input#megjegyzes4,
input#euadoszam,
input#fizhatarido,
input#szallitasicim,
input#szallitasicim2,
input#engszam,
input#engido,
input#vevocsopkod,
input#kulsoazon,
input#kedvezmeny,
input#termekvonalkod,
input#termeknev,
input#termeknev2,
input#termeknev3,
input#termekszallito,
input#termektipus,
input#termekafa,
input#termekkeszlet,
input#termeknbeszar,
input#termekbrbeszar,
input#termeknyereseg,
input#termekegysar,
input#termekegysar2,
input#termekegysar3,
input#termekegysar4,
input#termekegysar5,
input#termekegysar6,
input#termekegysar7,
input#termekegysar8,
input#termekegysar9,
input#termekakciosar,
input#termekmennyisegiegyseg,
input#termekspeckod,
input#termekdatum,
input#termekminkeszlet,
input#termeksuly,
input#termekkulsokod,
input#termekvtsz,
input#termekkartoninfo,
input#XYKEDV,
input#termekkedv,
input#new_vonalkod,
input#new_vonalkod_mennys,
input#barcode_osszevon,
input#megnev_osszevon,
input#darab_osszevon,
input#searchbc,
input#fttm,
input#tipusnev,
input#tipuscsopnev,
input#tipusegysarszorzo,
input#tipusegysarszorzo2,
input#tipusegysarszorzo3,
input#tipusegysarszorzo4,
input#tipusegysarszorzo5,
input#tipusegysarszorzo6,
input#tipusegysarszorzo7,
input#tipusegysarszorzo8,
input#tipusegysarszorzo9,
input#szallnap,
input#het,
input#elad_het,
input#darab,
input#csopneve,
input#searchInput,
input#nameInput,
input#descriptinput,
.bizonylatmegnev,
input#ossznegysar,
input#osszafa,
input#osszegysar2,
input#forfiz,
input#maradek,
input#befizetes,
input#vissza,
input#kedvfiz,
input#kedv,
input#kedv_osszeg,
input#uj,
input#tetelkedvfiz,
input#tetelkedv,
input#teteluj,
input#startnum,
input#endnum,
input#osszeg{
  width: 100px;
  margin-bottom: 2px;
  padding: 6px 12px; 
  border: 1px solid #ddd;
  background-color: var(--global-input-background);
  height: 20px;
  border-radius: 4px;
  font-size: 12pt;
}

input#mennyiseg,
input#ar{
  width: 100px;
  padding: 12px 12px; 
  border: 1px solid #ddd;
  background-color: var(--global-input-background);
  height: 19px;
  border-radius: 4px;
  font-size: 12pt;
}
.input,
input#vcode,
input#adoszam,
input#csoportadoszam,
input#megnevezes1,
input#megnevezes2,
input#megnevezes3,
input#iranyitoszam,
input#telepules,
input#közterületneve,
input#közterületjellege,
input#hazszam,
input#epulet,
input#lepcsohaz,
input#szint,
input#ajto,
input#megye,
input#kapcsolat,
input#tel1,
input#tel2,
input#tel3,
input#email,
input#email2,
input#weboldal,
input#bankszamlaszam,
input#megjegyzes,
input#megjegyzes2,
input#megjegyzes3,
input#megjegyzes4,
input#euadoszam,
input#fizhatarido,
input#szallitasicim,
input#szallitasicim2,
input#engszam,
input#engido,
input#vevocsopkod,
input#kulsoazon,
input#kedvezmeny,
input#megnev_osszevon,
input#tipuscsopnev,
input#csopneve{
  width: 230px;
}


input#termeknev,
input#termeknev2,
input#termeknev3,
input#fttm,
input#searchInput{
  width: 310px;
}



input#termekvonalkod,
input#termekkeszlet,
input#termeknbeszar,
input#termekbrbeszar,
input#termeknyereseg,
input#termekegysar,
input#termekegysar2,
input#termekegysar3,
input#termekegysar4,
input#termekegysar5,
input#termekegysar6,
input#termekegysar7,
input#termekegysar8,
input#termekegysar9,
input#termekakciosar,
input#termekmennyisegiegyseg,
input#termekszallito,
input#termektipus,
input#termekafa,
input#termekspeckod,
input#termekdatum,
input#termekminkeszlet,
input#termekkulsokod,
input#termekvtsz,
input#termekkartoninfo,
input#new_vonalkod,
input#new_vonalkod_mennys,
input#searchbc,
input#tipusnev,
input#tipusegysarszorzo,
input#tipusegysarszorzo2,
input#tipusegysarszorzo3,
input#tipusegysarszorzo4,
input#tipusegysarszorzo5,
input#tipusegysarszorzo6,
input#tipusegysarszorzo7,
input#tipusegysarszorzo8,
input#tipusegysarszorzo9,
input#darab,
input#nameInput,
input#descriptinput{
  width: 170px;
}

input#szallnap,
input#het,
input#elad_het{
  width: 104px;
}
input#termeksuly{
  width: 35px;
}

input#vnev{
  width: 180px !important;
}

.height{
  height: 40px;
}
.bevettable_input,
.bizonylat_input{
  width: 100%;
  margin-bottom: 2px;
  padding: 4px 6px !important; 
  border: 1px solid #ddd;
  background-color: var(--global-input-background);
  font-size: 14px;
  height: 20px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 4px;
  font-size: 12pt;
}

input#lejaratGyartszam,
input#bevettable_barcode,
.bizonylat_barcode{
  width: 120px !important;
}
input#megnev,
input#XYKEDV,
input#termekkedv{
  width: 200px;
}

input#lejaratTarhely,
input#lejaratMennys,
input#darab,
input#nbeszar,
input#beszar,
input#akciar,
input#egysar,
input#egysar2,
input#egysar3,
input#egysar4,
input#egysar5,
input#egysar6,
input#egysar7,
input#egysar8,
input#gysar9,
input#nrertek,
input#brertek,
input#osszbeszar,
input#osszegysar,
input#osszakciar,
input#darab_osszevon,
input#ertek,
input#osszdb{
  width: 70px !important;
}

input#ossznegysar,
input#osszafa,
input#osszegysar2{
  width: 80px;
}

input#afap{
  width: 40px;
}


input#ny,
input#osszny,
input#suly{
  width: 50px;
}

input#bizonylatszam,
input#bizonylatszam2,
input#list_sznev,
input#biznum,
input#biznum2,
input#barcode-or-name,
input#szallito_nev,
input#szallito_cim,
input#szallito_cim2,
input#szallito_tel,
input#szallito_kedv,
input#szallito_bankszam,
input#szallito_remark,
input#szallito_irszam,
input#szallito_adoszam,
input#szallito_kulso,
input#szallito_email {
  width: 230px;
  margin-bottom: 2px;
  padding: 6px 12px; 
  border: 1px solid #ddd;
  background-color: var(--global-input-background);
  font-size: 14px;
  height: 20px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 4px;
}


input#gyariszam,
input#lejaratMennys,
input#lejaratTarhely,
input#lejaratGyartszam{
  margin-bottom: 2px;
  padding: 6px 12px; 
  border: 1px solid #ddd;
  background-color: var(--global-input-background);
  font-size: 14px;
  height: 20px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 4px;
}
input#biznum{
  width: 304px;
}
input#list_sznev{
  width: 278px;
}

input#bizonylatszam2,
input#bizonylatszam{
  width: 170px;
}

input#szcode,
input#sznev{
  width: 180px;
}
input#forrasznev_attarolas,
input#celsznev_attarolas{
  width: 460px;
}

input#raktar_kereses {
  padding: 1px 5px;
  border: 0;
  height: 20px;
  margin-bottom: 2px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  -webkit-box-shadow: 1px 1px 0 0 #fff, 5px 5px 40px 2px #eee7e7 inset;
  -moz-box-shadow: 1px 1px 0 0 #fff, 5px 5px 40px 2px #eee7e7 inset;
  box-shadow: 1px 1px 0 0 #fff, 5px 5px 40px 2px #eee7e7 inset;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  outline: 0;
}


input#vnev,
input#search {
  width: 100px;
  margin-bottom: 2px;
  padding: 6px 12px; 
  border: 1px solid #ddd;
  background-color:var(--global-input-background);
  font-size: 14px;
  height: 20px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 4px;
}
input [type="text"]{
  background-color:var(--global-input-background) !important;
}

.shorteditmiddlefele {
  width: 48px;
  padding: 1px 5px;
  border: 0;
  margin-bottom: 2px;
  height: 20px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  -webkit-box-shadow: 1px 1px 0 0 #fff, 5px 5px 40px 2px #eee7e7 inset;
  -moz-box-shadow: 1px 1px 0 0 #fff, 5px 5px 40px 2px #eee7e7 inset;
  box-shadow: 1px 1px 0 0 #fff, 5px 5px 40px 2px #eee7e7 inset;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  outline: 0;
}
.shortedit {
  width: 50px;
  margin-bottom: 2px;
  padding: 6px 12px; 
  border: 1px solid #ddd;
  background-color: var(--global-input-background);
  font-size: 14px;
  height: 34px;
  border-radius: 4px;
}
.shortedit_szall{
  width: 75px;
}
.shortedit2 {
  width: 110px;
  padding: 1px 5px;
  border: 0;
  margin-bottom: 2px;
  height: 20px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  -webkit-box-shadow: 1px 1px 0 0 #fff, 5px 5px 40px 2px #eee7e7 inset;
  -moz-box-shadow: 1px 1px 0 0 #fff, 5px 5px 40px 2px #eee7e7 inset;
  box-shadow: 1px 1px 0 0 #fff, 5px 5px 40px 2px #eee7e7 inset;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  outline: 0;
}
.shortedit_bolt,
.shortedit_fizmod,
.shortedit_vevok,
.shortedit_szallito_valasztas,
.shortedit_tipus_valasztas,
.shortedit_gongyoleg,
.shortedit_ntak_kat{
  width: 130px;
  margin-bottom: 2px;
  padding: 6px 12px; 
  border: 1px solid #ddd;
  background-color: var(--global-input-background);
  font-size: 14px;
  height: 34px;
  border-radius: 4px;
}
.shortedit_vevok{
  width: 100px;
}
.kepdoboz{
  width: 255px;
}
.shortedit_szallito_valasztas,
.shortedit_tipus_valasztas,
.shortedit_gongyoleg,
.shortedit_ntak_kat{
    width: 230px;
}
.shortedit_bolt{
  width: 300px;
}
.dropdownlong {
  width: 285px;
  padding: 1px 5px;
  border: 0;
  margin-bottom: 2px;
  height: 20px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  -webkit-box-shadow: 1px 1px 0 0 #fff, 5px 5px 40px 2px #eee7e7 inset;
  -moz-box-shadow: 1px 1px 0 0 #fff, 5px 5px 40px 2px #eee7e7 inset;
  box-shadow: 1px 1px 0 0 #fff, 5px 5px 40px 2px #eee7e7 inset;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  outline: 0;
}
.dropdownshort {
  width: 120px;
  padding: 1px 5px;
  border: 0;
  margin-bottom: 2px;
  height: 20px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  -webkit-box-shadow: 1px 1px 0 0 #fff, 5px 5px 40px 2px #eee7e7 inset;
  -moz-box-shadow: 1px 1px 0 0 #fff, 5px 5px 40px 2px #eee7e7 inset;
  box-shadow: 1px 1px 0 0 #fff, 5px 5px 40px 2px #eee7e7 inset;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  outline: 0;
}
.dropdownauto {
  width: auto;
  padding: 1px 5px;
  border: 0;
  margin-bottom: 2px;
  height: 20px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  -webkit-box-shadow: 1px 1px 0 0 #fff, 5px 5px 40px 2px #eee7e7 inset;
  -moz-box-shadow: 1px 1px 0 0 #fff, 5px 5px 40px 2px #eee7e7 inset;
  box-shadow: 1px 1px 0 0 #fff, 5px 5px 40px 2px #eee7e7 inset;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  outline: 0;
}

.middle_edit_60{
  width: 40px;
}
.middle_edit_kod_80{
  width: 80px;
}
.autoedit {
  width: auto;
  padding: 1px 5px;
  border: 0;
  height: 20px;
  margin-bottom: 2px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  -webkit-box-shadow: 1px 1px 0 0 #fff, 5px 5px 40px 2px #eee7e7 inset;
  -moz-box-shadow: 1px 1px 0 0 #fff, 5px 5px 40px 2px #eee7e7 inset;
  box-shadow: 1px 1px 0 0 #fff, 5px 5px 40px 2px #eee7e7 inset;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  outline: 0;
}
.specialedit {
  width: 210px;
  padding: 1px 5px;
  border: 0;
  height: 20px;
  margin-bottom: 2px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  -webkit-box-shadow: 1px 1px 0 0 #fff, 5px 5px 40px 2px #eee7e7 inset;
  -moz-box-shadow: 1px 1px 0 0 #fff, 5px 5px 40px 2px #eee7e7 inset;
  box-shadow: 1px 1px 0 0 #fff, 5px 5px 40px 2px #eee7e7 inset;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  outline: 0;
}
.textarea {
  width: 445px;
  height: 200px;
  margin-bottom: 2px;
  padding: 6px 12px; 
  border: 1px solid #ddd;
  background-color: var(--global-input-background);
  border-radius: 4px;
}
.textarea_small{
  width: 230px;
  height: 40px;
}

.longedit,
.editmezo {
  width: 275px;
  padding: 1px 5px;
  border: 0;
  height: 20px;
  margin-bottom: 2px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  -webkit-box-shadow: 1px 1px 0 0 #fff, 5px 5px 40px 2px #eee7e7 inset;
  -moz-box-shadow: 1px 1px 0 0 #fff, 5px 5px 40px 2px #eee7e7 inset;
  box-shadow: 1px 1px 0 0 #fff, 5px 5px 40px 2px #eee7e7 inset;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  outline: 0;
}
.shadow {
  margin: 20px auto 20px auto;
  background: lightblue;
  border-radius: 5px;
  box-shadow: #000 0px 2px 20px;
}
.longedit::placeholder{
  font-style: italic;
  color: #ff0000;
}
div#yesno_message_dialog {
  border-spacing: 10px;
  width: auto;
  padding-top: 8px;
  padding-bottom: 15px;
  background-color: #365985;
  color: #d0e4fe;
  padding: 10px;
}

.info,
.accept_uzi,
.accept,
.warning_uzi,
.error_uzi,
.validation {
  text-align: center;
  font-size: 15px;
  font-weight: bold;
  border: 1px solid;
  margin: 10px 0px;
  padding: 15px 10px 15px 50px;
  background-repeat: no-repeat;
  background-position: 10px center;
  border-radius: 4px;
}
.info {
  color: #00529b;
  background-color: #bde5f8;
  background-image: url("../images/info.png");
}
.accept_uzi,
.accept {
  color: #4f8a10;
  background-color: #dff2bf;
  background-image: url("../images/success.png");
}
.warning_uzi {
  color: #9f6000;
  background-color: #feefb3;
  background-image: url("../images/warning.png");
}
.error_uzi {
  color: #d8000c;
  background-color: #ffbaba;
  background-image: url("../images/error.png");
}

/*.warning_uzi {
    font-weight: 700;
    color: magenta;
}*/
/*.error_uzi {
    font-weight: 700;
    color: red;
}*/
/*.accept_uzi {
    font-weight: 700;
    color: green;
}*/

.watermark {
  color: #f65151 !important;
}

ul,
menu,
dir {
  display: block;
  list-style-type: disc;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  padding-inline-start: 20px;
}

/*gombok*/
/*
input[type="button"],
input[type="file"],
input[type="submit"],
button {
  -moz-box-shadow: inset 0px 1px 0px 0px #9fb4f2;
  -webkit-box-shadow: inset 0px 1px 0px 0px #9fb4f2;
  box-shadow: inset 0px 1px 0px 0px #9fb4f2;
  background-color: #7892c2;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  border: 1px solid #4e6096;
  display: inline-block;
  cursor: pointer;
  color: #ffffff;
  font-size: 16px;
  padding: 6px 24px;
  text-decoration: none;
  text-shadow: 0px 1px 0px #283966;
  margin: 5px;
}
input[type="button"]:active,
button:active {
  position: relative;
  top: 1px;
}*/

.middlebutton {
  -moz-box-shadow: inset 0px 1px 0px 0px #9fb4f2;
  -webkit-box-shadow: inset 0px 1px 0px 0px #9fb4f2;
  box-shadow: inset 0px 1px 0px 0px #9fb4f2;
  background-color: #7892c2;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  border: 1px solid #4e6096;
  display: inline-block;
  cursor: pointer;
  color: #fff;
  font-size: 14px;
  text-decoration: none;
  text-shadow: 0px 1px 0px #283966;
  margin: 5px;
  width: 175px;
  height: 50px;
  overflow: hidden;
}
.shortbuttonplus_old {
  -moz-box-shadow: inset 0px 1px 0px 0px #9fb4f2;
  -webkit-box-shadow: inset 0px 1px 0px 0px #9fb4f2;
  box-shadow: inset 0px 1px 0px 0px #9fb4f2;
  background-color: #7892c2;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  border: 1px solid #4e6096;
  display: inline-block;
  cursor: pointer;
  color: #fff;
  font-size: 12px;
  text-decoration: none;
  text-shadow: 0px 1px 0px #283966;
  margin: 5px;
  min-width: 120px !important;
  width: 120px !important;
  min-height: 80px !important;
  height: 80px !important;
  overflow: hidden;
  white-space: normal;
  word-wrap: break-word;
}

.shortbuttonplus {
  background-color: #7892c2;
  border: none;
  border-radius: 5px;
  color: #fff;
  cursor: pointer;
  font-size: 14px;
  margin: 5px;
  outline: none;
  padding: 8px 16px;
  transition: background-color 0.3s ease;
}

.shortbuttonplus:hover {
  background-color: #5679a3;
}

.shortbutton {
  -moz-box-shadow: inset 0px 1px 0px 0px #9fb4f2;
  -webkit-box-shadow: inset 0px 1px 0px 0px #9fb4f2;
  box-shadow: inset 0px 1px 0px 0px #9fb4f2;
  background-color: #7892c2;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  border: 1px solid #4e6096;
  display: inline-block;
  cursor: pointer;
  color: #fff;
  font-size: 13px;
  text-decoration: none;
  text-shadow: 0px 1px 0px #283966;
  margin: 5px;
  width: 87px;
  height: 60px;
  overflow: hidden;
}
.longbutton {
  -moz-box-shadow: inset 0px 1px 0px 0px #9fb4f2;
  -webkit-box-shadow: inset 0px 1px 0px 0px #9fb4f2;
  box-shadow: inset 0px 1px 0px 0px #9fb4f2;
  background-color: #7892c2;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  border: 1px solid #4e6096;
  display: inline-block;
  cursor: pointer;
  color: #fff;
  font-size: 13px;
  text-decoration: none;
  text-shadow: 0px 1px 0px #283966;
  margin: 5px;
  width: 250px;
  height: 60px;
  overflow: hidden;
}


.ui-button-text {
  color: #fff;
  font-size: 14px;
  background-color: #7892c2;
}

.flachspec {
  -moz-box-shadow: inset 0px 1px 0px 0px #9fb4f2;
  -webkit-box-shadow: inset 0px 1px 0px 0px #9fb4f2;
  box-shadow: inset 0px 1px 0px 0px #9fb4f2;
  background-color: #7892c2;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  border: 1px solid #4e6096;
  display: inline-block;
  cursor: pointer;
  color: #fff;
  font-size: 1.0rem;
  padding: 4px 8px;
  text-decoration: none;
  text-shadow: 0px 1px 0px #283966;
  margin: 5px;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.flachspec:hover {
  background-color: #6b83b2;
}

.flachspec:focus {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.flachspec:active {
  background-color: #5671a0;
  box-shadow: inset 0px 2px 3px 0px #6b83b2;
}

.paymentbutton {
  
  -moz-box-shadow: inset 0px 1px 0px 0px #9fb4f2;
  -webkit-box-shadow: inset 0px 1px 0px 0px #9fb4f2;
  box-shadow: inset 0px 1px 0px 0px #9fb4f2;
  background-color: #b0c4de;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  border: 1px solid #d9e3ef;
  display: inline-block;
  cursor: pointer;
  color: #000000;
  padding:  0px 0px ;
  font-size: 16px !important;
  text-shadow: 0px 1px 0px #283966;
 /* padding-top: 50px;
 /* line-height: 120px;*/
  margin: 1px;
  min-width: 120px !important;
  width: 120px !important;
  min-height: 90px !important;
  height: 90px !important;
  overflow: hidden;
  
}

.payment_delete{
  -moz-box-shadow: inset 0px 1px 0px 0px #9fb4f2;
  -webkit-box-shadow: inset 0px 1px 0px 0px #9fb4f2;
  box-shadow: inset 0px 1px 0px 0px #9fb4f2;
  background-color: #b0c4de !important;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  border: 1px solid #d9e3ef;
  display: inline-block;
  min-width: 196px !important;
  width: 196px !important;
  cursor: pointer;
  color: #000000 !important;
  font-size: 18px !important;
  padding: 8px 0px !important;
  text-decoration: none;
  text-shadow: 0px 1px 0px #283966;
  margin: 5px;
}

.sales_button{
  -moz-box-shadow: inset 0px 1px 0px 0px #9fb4f2;
  -webkit-box-shadow: inset 0px 1px 0px 0px #9fb4f2;
  box-shadow: inset 0px 1px 0px 0px #9fb4f2;
  background-color: #7892c2;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  border: 1px solid #8e949c;
  display: inline-block;
  cursor: pointer;
  color: #000000;
  font-size: 20px;
  font-weight: bolder;
  text-decoration: none;
  text-shadow: 0px 1px 0px #283966;
  margin: 5px;
  height:70px;
  width:auto; 
  white-space: normal;
  min-width:100%;
  overflow: hidden;

}
.next_topay{
  background-color: #32dc50;
  border: 1px solid #8e949c;
  cursor: pointer;
  color: #000000;
  font-size: 20px;
  font-weight: bolder;
}
.back_tomodify{
  background-color: #e6df17;
  border: 1px solid #8e949c;
  cursor: pointer;
  color: #000000;
  font-size: 20px;
  font-weight: bolder;
}
.menubar_options{
  background-color: #ffa600;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  border: 1px solid #8e949c;
  display: inline-block;
  cursor: pointer;
  color: #000000;
  padding:  0px 0px ;
  font-size: 18px !important;
  text-shadow: 0px 1px 0px #283966;
 /* padding-top: 50px;
 /* line-height: 120px;*/
  margin: 1px;
  min-width: 120px !important;
  width: 120px !important;
  min-height: 90px !important;
  height: 90px !important;
  overflow: hidden;

}
/*táblázatok*/
.hide_column.sorting_1 {
  visibility: collapse;
}

.user,
.bevettable,
.shoptable,
.eladottTab,
.keszletlista,
.rendtable,
.bevlist,
.bevetelezes_reszletek,
#dalist {
  width: auto;
  background-color: var(--dialog-background);
  color: var(--global-label-font-color);
  border-collapse: collapse;
}


.grid_container_for_form,
.middle_grid_container,
.small_grid_container,
.grid_container {
  border-spacing: 10px;
  width: auto;
  padding-top: 8px;
  padding-bottom: 15px;
  margin: 0 auto 20px auto;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 15px;
  padding: 0px;
}
.user a,
.eladottTab a,
.shoptable a,
.keszletlista a,
.rendtable a,
.bevlist a {
  color: #d0e4fe;
}

.user th,
.eladottTab th,
.shoptable th,
.keszletlista th,
.rendtable th,
.bevlist th {
  border-style: none;
  border-width: 0px;
  font-weight: 400 !important;
  background-color: var(--dialog-header-background);
  color: var(--global-button-font-color);
  padding: 10px 10px
}
.bevettablelista-wrapper,
.bevettable-wrapper{
  overflow-x: auto;
  overflow-y: auto;
  max-height: 817px;
  position: relative;
}
.bevettablelista-wrapper{
  max-height: 600px;
}


.scrollable-table thead,
.bevettable thead{
  position: sticky;
  top: 0;
  z-index: 10;
}
.scrollable-table tfoot,
.bevettable tfoot{
  position: sticky;
  bottom: 0;
  z-index: 10;
}

.bevettable th{
  border-style: none;
  border-width: 0px;
  font-weight: 400 !important;
  background-color: var(--dialog-header-background);
  color: var(--global-button-font-color);
  padding: 10px 4px;
}
.bevettable tbody td {
  padding: 6px 4px !important;

}
.left-position{
  text-align: left;
}
.del{
  width: 36px ;
}
.vonalkod{
  width: 120px ;
}
.bevmegnev{
  width: 160px;
}
.bevdarab{
  width: 70px ;
}
.bevafa{
  width: 40px;
}
.bevarres{
  width: 50px;
}
.bevmuveletek{
  width: 90px;
}
.bev-file-muveletek{
  width: 170px;
}

.bevettable_second_tr_color{
  background-color: var(--dialog-table-second_tr_color);
}

.shoptable_second_tr_color{
  background-color: var(--dialog-table-second_tr_color);
}
.bevettable tfoot tr{
  background-color: #f1f5f9;
  padding: 6px 4px !important;
  text-align: left;
  font-weight: 600;
  color: #64748b;
  font-size: 16px;
  border-bottom: 1px solid #e2e8f0;

}
.bevettable tfoot td{
  padding: 6px 4px !important;
  color: var(--global-label-font-color);
}

.shoptable tbody td,
.user tfoot td,
.eladottTab tfoot td,
.shoptable tfoot td,
.keszletlista tfoot td,
.rendtable tfoot td,
.bevlist tfoot td {
  padding: 10px 10px;
  color: var(--global-label-font-color);
}


.bevettable tbody td{
  padding: 4px 6px ;
  color: var(--global-label-font-color);
  border-bottom: 1px solid #e2e8f0;
}

.bevettable tbody tr,
.shoptable tbody tr{
  border-bottom: 1px solid #ccc;
}

.min-width{
  min-width: 120px;
}

.shoptable tfoot tr{
  border-bottom: 1px solid #ccc;
  background-color: var(--dialog-table-head-backgroun);
  color: var(--dialog-table-head-font-color);
}
.display {
  font-size: 15px;
  border-spacing: 10px;
  padding-top: 8px;
  padding-bottom: 15px;
  margin: 0 auto 20px auto;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 15px;
  padding: 0px;
}


.display th {
  border-style: none;
  font-weight: 400 !important;
  border-width: 1px;
  background-color: var(--global-datatablehead-background);
  padding-left: 5px;
  padding-right: 5px;
  color: #ffffff;
  font-weight: 400;
}
.display tr:first-child th {
  border-top: 0;
}
.display tr:last-child th {
  border-bottom: 0;
}
.display tr th:first-child {
  border-left: 0;
}
.display tr th:last-child {
  border-right: 0;
}

.display td {
  height: 25px;
  width: auto;
}
.display tfoot tr{
  border-width: 1px;
  background-color: #94A3B9;

}
.green-tr-class{
  background-color:#3e9f37 !important;
  color: white;
}
.red-tr-class{
  background-color:#d6382c !important;  /* #a94442 #f44336 #d6382c*/
  color: white;
}
/*scrollbarok*/
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  -webkit-border-radius: 10px;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  -webkit-border-radius: 10px;
  border-radius: 10px;
  background: rgba(180, 180, 180, 0.7);
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.2);
}
::-webkit-scrollbar-thumb:window-inactive {
  background: rgba(200, 200, 200, 0.4);
}
/*checkboxok*/
input[type="checkbox"]:not(.lcs_check) {
  display: inline-block;
  width: 19px;
  height: 19px;
  margin: -1px 4px 0 0;
  vertical-align: middle;
  /*background: url(../images/check_radio_sheet.png) left top no-repeat;
  background: var(--global-button-background) left top no-repeat;*/
  cursor: pointer;
}
/* menu-höz*/

/* Light modern menu styling with fixed positioning */
#primary_nav_wrap {
  margin-top: 0px;
  position: fixed; /* Fixed positioning */
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background-color: var(--menu-bg-color); /* Using CSS variable */
  box-shadow: 0 2px 5px var(--menu-shadow-color); /* Using CSS variable */
  transition: background-color 0.3s ease; /* Smooth transition for color changes */
  border-bottom: 1px solid var(--menu-border-color); /* Using CSS variable */
}

#primary_nav_wrap ul {
  z-index: 100;
  list-style: none;
  position: relative;
  float: left;
  margin: 0;
  padding: 0;
}

#primary_nav_wrap ul a {
  display: block;
  color: var(--menu-text-color); /* Using CSS variable */
  text-decoration: none;
  font-weight: var(--menu-font-weight); /* Using CSS variable */
  font-size: 16px;
  line-height: 40px;
  padding: 0 15px;
  margin: 0 5px; /* Add consistent margin */
  font-family: var(--menu-font-family);
  text-shadow: var(--menu-text-shadow); /* Using CSS variable */
  transition: all 0.2s ease; /* Smooth transition for hover effects */
  box-sizing: border-box; /* Include padding in width calculation */
}

#primary_nav_wrap ul li {
  position: relative;
  float: left;
  margin: 0;
  padding: 0;
/*  transition: background-color 0.2s ease;*/
}

/* Active menu item styling */
#primary_nav_wrap ul li.active-menu-item,
#primary_nav_wrap ul li.current-menu-item {
  /* Remove background from li element */
  background-color: transparent;
  /* border-bottom: 2px solid var(--menu-active-border-color); */ /* Using CSS variable */
  /* Make the active state more visible */
  font-weight: var(--menu-active-font-weight); /* Using CSS variable */
}

/* Apply rounded background to the anchor element instead of the li */
#primary_nav_wrap ul li.active-menu-item > a,
#primary_nav_wrap ul li.current-menu-item > a {
  background-color: var(--menu-hover-color); /* Using CSS variable */
  border-radius: 4px; /* Rounded corners */
  box-shadow: inset 0 0 5px rgba(0,0,0,0.1);
  /* Margin and padding already set in the base style */
}

#primary_nav_wrap ul li:hover {
  background-color: transparent; /* Remove background from li element */
}

#primary_nav_wrap ul li:hover > a {
  background-color: var(--menu-hover-color); /* Using CSS variable */
  border-radius: 4px; /* Rounded corners */
  /* Margin and padding already set in the base style */
}

#primary_nav_wrap li.li-no-hover:hover {
  background-color: transparent;
}

#primary_nav_wrap ul ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: var(--menu-bg-color); /* Using CSS variable */
  padding: 0;
  box-shadow: 0 4px 8px var(--menu-shadow-color); /* Using CSS variable */
  border-radius: 0 0 4px 4px; /* Rounded corners on bottom */
  min-width: 200px;
  width: 250px; /* Fixed width instead of max-content */
  border: 1px solid var(--menu-border-color); /* Using CSS variable */
  box-sizing: border-box; /* Include padding in width calculation */
}

#primary_nav_wrap ul ul li {
  float: none;
  width: 100%;
  min-width: 200px;
  box-sizing: border-box; /* Include padding in width calculation */
}

/* Ensure all submenu links have consistent width */
#primary_nav_wrap ul ul li a {
  display: block;
  width: calc(100% - 10px); /* Account for the horizontal margins */
  box-sizing: border-box; /* Include padding in width calculation */
}

#primary_nav_wrap ul ul a {
  line-height: 140%;
  padding: 8px 15px;
  margin: 0 5px;
  border-bottom: 1px solid rgba(0,0,0,0.05); /* Very subtle separator */
  color: var(--menu-text-color); /* Using CSS variable */
  box-sizing: border-box; /* Include padding in width calculation */
}

/* Active submenu item styling */
#primary_nav_wrap ul ul li.active-menu-item > a,
#primary_nav_wrap ul ul li.current-menu-item > a {
  background-color: var(--menu-hover-color); /* Using CSS variable */
  border-radius: 4px; /* Rounded corners */
  box-shadow: inset 0 0 5px rgba(0,0,0,0.1);
  /* Margin and padding already set in the base style */
}

#primary_nav_wrap ul ul li:last-child a {
  border-bottom: none; /* Remove border from last item */
}

#primary_nav_wrap ul ul li:hover {
  background-color: transparent; /* Remove background from li element */
}

#primary_nav_wrap ul ul li:hover > a {
  background-color: var(--menu-hover-color); /* Using CSS variable */
  border-radius: 4px; /* Rounded corners */
  /* Margin and padding already set in the base style */
}

#primary_nav_wrap ul ul ul {
  top: 0;
  left: 100%;
  background-color: var(--menu-bg-color); /* Using CSS variable */
  border-radius: 0 4px 4px 4px; /* Rounded corners except top-left */
}

#primary_nav_wrap ul li:hover > ul {
  display: block;
}

/*dialogok style*/

/*táblázatok adatatablesben*/

.kozep {
  text-align: center;
  vertical-align: middle;
}
.smallSzoveg {
  font-size: 10px;
}
.goog-te-banner-frame.skiptranslate {
  display: none !important;
}
body {
  top: 0px !important;
  margin: 0px;
  overflow-x: hidden; /* Hide horizontal scrollbar */
  font-family: 'Inter', Arial, sans-serif;
}
.jobb {
  text-align: right;
  vertical-align: middle;
}
.center{
  text-align: center;
  vertical-align: middle;
}

/* Adjust search filter position */
.dataTables_wrapper .dataTables_filter {
      margin-top: 5px;
}
/* Move length control to the right */
.dataTables_wrapper .dataTables_length {
  float: left !important;
  margin-left: 0px;
  margin-right: 10px;
  margin-top: 10px;
}

.dataTables_filter input {
  width: 160px;
  padding: 1px 5px;
  border: 0;
  height: 30px;
  margin-bottom: 2px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  outline: 0;
  background-color: #fff !important;
}
.dataTables_filter label {
  font-weight: 600 !important;

}
.dataTables_wrapper .dataTables_paginate {
  margin-top: 0.5em;
  font-size: 12px;
}


/* Removed empty rule for tr.calendar-row */
td.calendar-day {
  min-height: 80px;
  font-size: 11px;
  position: relative;
}
* html div.calendar-day {
  height: 80px;
}
td.calendar-day:hover {
  background: #eceff5;
}
td.calendar-day-np {
  background: #eee;
  min-height: 80px;
}
* html div.calendar-day-np {
  height: 80px;
}
td.calendar-day-head {
  background: #ccc;
  font-weight: bold;
  text-align: center;
  width: 120px;
  padding: 5px;
  border-bottom: 1px solid #999;
  border-top: 1px solid #999;
  border-right: 1px solid #999;
}
div.day-number {
  background: #999;
  padding: 5px;
  color: #fff;
  font-weight: bold;
  float: right;
  margin: -5px -5px 0 0;
  width: 20px;
  text-align: center;
}
/* shared */
td.calendar-day,
td.calendar-day-np {
  width: 120px;
  padding: 5px;
  border-bottom: 1px solid #999;
  border-right: 1px solid #999;
}

/*táblázatok a calendarokban*/
.today {
  background-color: #5a84e6;
}
.selectedDay {
  background-color: #162955;
}

.adatkuldes {
  table-layout: fixed;
}

.adatkuldes th,
.adatkuldes td {
  padding: 10px;

  text-align: center;
}
@media screen and (max-width: 620px) {
  .table-reflow {
    min-width: 100%;
    overflow: hidden;
  }
  /* Hide thead & tfoot */
  .table-reflow thead,
  .table-reflow tfoot {
    display: none !important;
  }
  /* tr style */
  .table-reflow tr {
    display: block;
    border: 1px solid #ddd;
    margin-top: 5px;
  }
  .table-reflow td {
    text-align: left;
    font-size: 10px;
    overflow: hidden;
    width: 100%;
    display: block;
    height: 100%;
  }
  /* Get title to each td:before; */
  .table-reflow td:before {
    content: attr(data-th) " : ";
    display: inline-block;
    text-transform: uppercase;
    font-weight: bold;
    margin-right: 10px;
    color: #910b2a;
  }
  .adatkuldes td {
    display: block !important;
    width: 95% !important;
  }
  .mobiltable td {
    display: block !important;
    width: 95% !important;
  }
}

@media screen and (max-width: 768px) {
  section div {
    float: left;
    height: 48vw;
    margin: 0;
    width: 100%;
  }
  .specialedit {
    width: 210px;
    padding: 1px 5px;
    border: 0;
    height: 20px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    margin-bottom: 2px;
    -webkit-box-shadow: 1px 1px 0 0 #fff, 5px 5px 40px 2px #eee7e7 inset;
    -moz-box-shadow: 1px 1px 0 0 #fff, 5px 5px 40px 2px #eee7e7 inset;
    box-shadow: 1px 1px 0 0 #fff, 5px 5px 40px 2px #eee7e7 inset;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    outline: 0;
  }
  .longedit,
  .editmezo {
    width: 210px;
    padding: 1px 5px;
    border: 0;
    height: 20px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    margin-bottom: 2px;
    -webkit-box-shadow: 1px 1px 0 0 #fff, 5px 5px 40px 2px #eee7e7 inset;
    -moz-box-shadow: 1px 1px 0 0 #fff, 5px 5px 40px 2px #eee7e7 inset;
    box-shadow: 1px 1px 0 0 #fff, 5px 5px 40px 2px #eee7e7 inset;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    outline: 0;
  }
  .dropdownlong {
    width: 120px;
    padding: 1px 5px;
    border: 0;
    margin-bottom: 2px;
    height: 20px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    -webkit-box-shadow: 1px 1px 0 0 #fff, 5px 5px 40px 2px #eee7e7 inset;
    -moz-box-shadow: 1px 1px 0 0 #fff, 5px 5px 40px 2px #eee7e7 inset;
    box-shadow: 1px 1px 0 0 #fff, 5px 5px 40px 2px #eee7e7 inset;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    outline: 0;
  }
 
select {
    width: 100%;
    padding: 10px 15px;
    font-size: 16px ;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: white;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23333%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: right 12px top 50%;
    background-size: 12px auto;
}

select:hover {
    border-color: #999;
}

select:focus {
    border-color: #4d90fe;
    outline: none;
    box-shadow: 0 0 0 2px rgba(77, 144, 254, 0.2);
}
  .autoedit {
    width: 120px;
    padding: 1px 5px;
    border: 0;
    height: 20px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    margin-bottom: 2px;
    -webkit-box-shadow: 1px 1px 0 0 #fff, 5px 5px 40px 2px #eee7e7 inset;
    -moz-box-shadow: 1px 1px 0 0 #fff, 5px 5px 40px 2px #eee7e7 inset;
    box-shadow: 1px 1px 0 0 #fff, 5px 5px 40px 2px #eee7e7 inset;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    outline: 0;
  }

  .textarea {
    width: 220px;
  }
  .textarea2 {
    height: 500px;
  }

  .next,
  .previous {
    display: none !important;
  }
  .wrapit {
    display: block;
  }

  .ui-accordion .ui-accordion-content {
    padding: 20px 10px;
    overflow: auto;
    width: auto;
  }

  table.nemtorni tr td {
    display: block;
    white-space: nowrap;
  }
  .torni {
    white-space: normal !important;
  }
}

.sale {
  width: auto;
  margin: 0;
  padding: 0;
}
.sale tr:not(.separated) {
  width: auto;
  color: #d0e4fe;
  background: #365985 !important;
}
.separated {
  width: auto;
  color: #d0e4fe;
  background: #5679a5 !important;
}
.sale td {
  width: auto;
}

.dark {
  background-color: #00529b;
  color: #fff;
  padding: 1px 5px;
  border: 0;
  margin-bottom: 2px;
  height: 20px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  -moz-box-shadow: 1px 1px 0 0 #fff, 5px 5px 40px 2px #eee7e7 inset;
  -webkit-box-shadow: 1px 1px 0 0 #fff, 5px 5px 40px 2px #eee7e7 inset;
  -webkit-box-shadow: 1px 1px 0 0 #fff, 5px 5px 40px 2px #eee7e7 inset;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  outline: 0;
  box-shadow: 1px 1px 0 0 #fff, 5px 5px 40px 2px #eee7e7 inset;
}

.container-login100 {
/*  width: 100%;  
  min-height: 100vh;*/
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  min-height: 80vh;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding: 15px;
 /* background: #f2f2f2;  */
}

.wrap-login100 {
  width: 360px;
  background: #f8f9fa;
  border-radius: 10px;
  font-size: 18px;
  overflow: hidden;
  padding: 20px 20px 20px 20px;

  -moz-box-shadow: 0 5px 10px 0px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 0 5px 10px 0px rgba(0, 0, 0, 0.1);
  -o-box-shadow: 0 5px 10px 0px rgba(0, 0, 0, 0.1);
  -ms-box-shadow: 0 5px 10px 0px rgba(0, 0, 0, 0.1);
  box-shadow: 0 5px 10px 0px rgba(0, 0, 0, 0.1);
}

.logineditmezo {
  width: 180px;
  padding: 1px 5px;
  border: 0;
  font-size: 18px;
  height: 26px;
  margin-bottom: 2px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  -moz-box-shadow: 1px 1px 0 0 #fff, 5px 5px 40px 2px #eee7e7 inset;
  -webkit-box-shadow: 1px 1px 0 0 #fff, 5px 5px 40px 2px #eee7e7 inset;
  -webkit-box-shadow: 1px 1px 0 0 #fff, 5px 5px 40px 2px #eee7e7 inset;
  box-shadow: 1px 1px 0 0 #fff, 5px 5px 40px 2px #eee7e7 inset;
  outline: 0;
}


.ntak_dialog_design{
   background: var(--dialog-background) !important;
   display: none;
   color: var(--text-primary) !important;
 }
 .pgepchoice{
  
  background-color:white; 
  width:auto;
  margin: 0 auto 20px auto; 
  border-spacing: auto; 
  padding-top: 8px;  
  padding-bottom: 15px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 15px;
  padding:10px;

}

.button-container {
    display: flex;
    justify-content: flex-start;
    overflow-x: auto;
    white-space: nowrap;
     
}

.vattext{
  color: #000000;
  font-size: 16px;
  font-weight: bolder;
  text-align: center;
  margin: 0 0 30px 0;

}

::placeholder { 
    /*color: red !important;*/
    opacity: 1; /* Firefox */
}

/* Datatables.net gombjainak font megadása */
.dt-button, 
button.dt-button, 
div.dt-button {
  background-color: var(--global-button-background) !important;
  color: #fff !important;
  font-family: var(--menu-font-family) ;/*'Inter', Arial, sans-serif !important;*/
  text-shadow: none !important; /* Remove any text shadow */
  font-weight: 600 !important; /* Use normal font weight instead of bold */
  letter-spacing: normal !important; /* Normal letter spacing */
  border: none !important;
  background: var(--global-button-background) !important;
  
}
/* Button styling for DataTables buttons */
div.dt-buttons button.dt-button {
  font-family: var(--menu-font-family);
  font-weight: 600;
  border-radius: 4px;
  line-height: 1.0;
  font-size:1.0em;
  text-align: center;

}
.dt-buttons {
  /*display: flex;
  width: 70%;*/
  text-align: center;
}
.cimsor_div{
  padding: 15px 20px;
  background-color: var(--global-page-background);  /*e9f5ff f1f5ff */
  margin-bottom: 0px;
  display: flex;
  align-items: center;
}
.dialog_table_div{
  padding: 10px 0px 0px 0px;
}
.dialog_table_div2{
  padding: 10px 0px 10px 0px;
}
.eredmeny_tabla_div{
  padding: 0px 10px 10px 10px;
}

.eredmeny_tabla_div.shops{
  display: flex;
  justify-content: center;
}

.cimsor_div h4 {
  color: var(--global-datatablehead-background);
  text-decoration: none;
}
.cimsor_div span {
  color: #333333 /*#666*/ ;
}
.div-padding-h4{
  padding: 10px !important;
}
.div-padding-left-right-content{
  padding: 0px 10px 0px;
}
.info-icon {
  margin-left: auto;
  color: #0066cc;
}
.info-btn{
  position: absolute;
  right: 10px;
  margin-top: 10px;
  transform: translateY(-50%);
}

/* Buttons */
.btn {
  padding: 8px 15px;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  font-size: 17px;
  transition: all 0.3s;
  font-family: var(--menu-font-family);
  font-weight: 600;
  color: var( --global-button-font-color);
}
.btn-flex{
  flex: 1;
}

.btn-light {
  background-color: var(--global-button-background);  
  color: var( --global-button-font-color);
}

.btn-green{
  background-color: #3e9f37;
}
.btn-yellow{
  background-color: #cc9e00;
}
.btn-light:hover {
  background-color: #f1f5ff;
}
.btn-red{
  background-color: #d13434;
}
.btn-lightblue{
  background-color: #30aed4;
}
.btn-payment{
  background-color: var(--global-button-background_second);
  color: var(--global-label-font-color);
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  padding: 8px 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 13px;
  min-height: 85px;
  width: 125px;
}
.btn-payment img{
  max-width: 36px;
  max-height: 36px;
  object-fit: contain;
}

.btn-block {
  display: block;
  text-align: center;
}

.btn-primary {
  background-color: var(--global-button-background);
}
.btn-bright {
  background-color: var(--global-button-background_second);
  color: #64748b;
}

.btn-hide{
  font-size: 28px;
  background: none;
  border: none;
  cursor: pointer;
  color: white;
}

.btn-kassza{
  background-color: var(--dialog-background);
  color: var(--global-label-font-color);
}

.btn-primary:hover {
  background-color: #0055aa;
}

.btn-margin{
  margin: 0px 0px 0px 0px;

}
.btn-margin2{
  margin: 0px 0px 5px 0px;
}
.btn-right{
  margin-right: 5px;
}
.btn-left{
  left: auto;
}
.btn-left-padding{
  text-align: left;
  padding-left: 40px;
}

.label-class{
  color: var(--global-label-font-color);
  font-family: var(--menu-font-family);
  font-size: 16px;
  font-weight: 600;
}
.label-class-large{
    color: var(--global-label-font-color);
  font-family: var(--menu-font-family);
  font-size: 19px;
  font-weight: bold;
}
/* Main container layout */
.filter-wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-bottom: 20px;
  padding-left: 10px;
  padding-right: 10px;
  box-sizing: border-box;
}

.filter-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 5px;
  width: 100%;
  box-sizing: border-box;
}

/* Filter tab and Shop selector - EQUAL WIDTH */
.filter-tab,
.filter-tab-szallito,
.filter-tab-szallito-napok,
.shop-selector-container,
.filter-tab-masodvonalkod,
.filter-tab-naptar {
  background-color: var(--table-background);
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 300px;
}
.filter-tab-naptar{
  min-width: 0px;
}

.filter-tab-szallito{
  min-width: 400px;
}
.filter-tab-szallito-napok{
  min-width: 600px;
}
.filter-tab-masodvonalkod{
  margin-top: 36px;
  width : auto;
  height: 380px
}


#shop-selector {
  width: 100%;
  max-height: 200px; /*Set a fixed height for the selector */
  overflow-y: auto; /* Enable vertical scrolling */
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 5px;
}

/* Header styling for both containers */
.section-header {
  background-color: var(--table-header);
  color: #ffffff;
  padding: 15px;  /* 15px*/
  font-size: 14px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

.section-header h3 {
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Content area for both containers */
.section-content{
  padding: 15px;
  flex: 1;
  display: flex;
  flex-direction: column;
 /* overflow: hidden;*/
}

/* Filter form layout */
.filter-form {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}
.filter-form-raktarkeszlet {
  display: flex;
  flex-wrap: wrap;
}

/* Selector groups */
.selector-group {
  width: 100%;
  max-width: 200px;
}

.selector-group label {
  display: block;
  margin-bottom: 5px;
}

/* Input fields section */
.input-fields {
  flex: 1;
  min-width: 250px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Input rows - KEEP INLINE IF THEY FIT */
.input-row {
  display: flex;
  flex-wrap: nowrap; /* Keep inline by default */
  gap: 15px;
  width: 100%;
}
.input-row-nowidth {
  display: flex;
  flex-wrap: nowrap; /* Keep inline by default */
  gap: 15px;
}

/* Input groups - KEEP INLINE IF THEY FIT */
.input-group {
  flex: 1;
  min-width: 0; /* Allow shrinking below min-width */
}

.input-group label {
  display: block;
  margin-bottom: 5px;
}

.input-group input[type="text"] {
  width: 100%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

/* Checkbox group */
.checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

.checkbox-group label {
  margin-right: 5px;
}

/* Date range */
.date-range {
  display: flex;
  align-items: center;
  gap: 10px;
}

.date-range input {
  flex: 1;
}

/* Shop selector buttons */
.shop-buttons-container {
  display: flex;
  gap: 10px;
  margin-top: auto; /* Push to bottom */
  padding-top: 15px; /* Add some space from the selector above */
}

/* Action buttons container - separate from filters */
.action-buttons-container {
  background-color: var(--table-background);
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  padding: 5px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  width: 100%;
  box-sizing: border-box;

}
.action-buttons-container-vevok{
  display: flex;
  /*flex-wrap: wrap;*/
  gap: 5px;
  justify-content: flex-end
}

.action-buttons-container button {
  padding: 10px 15px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
}



/* Select2 styling */
.select2-container--default .select2-selection--multiple {
  background-color: var(--global-input-background) !important;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 5px;
  max-height: 240px;
  overflow-y: auto !important;
  overflow: hidden;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background-color: var(--global-input-background) !important;
  border: 1px solid #aaa;
  border-radius: 4px;
  padding: 0 5px;
  color: #333;
}

.select2-container {
  width: 100% !important;
}
.select2-container--open .select2-dropdown {
  max-height: 300px;
  overflow-y: auto;
}
.select2-dropdown-scrollable {
  max-height: 300px;
  overflow-y: auto;
}
.select2-container--default .select2-selection--multiple .select2-selection__rendered {
  max-height: 180px;
  overflow-y: auto;;
}
.select2-container--default .select2-results>.select2-results__options {
  max-height: none !important;
  overflow-y: auto;
}

/* Responsive adjustments */
@media (max-width: 1200px) {
  .filter-container {
      /* At this breakpoint, keep them side by side but allow for different widths based on content */
      flex-wrap: wrap;
  }
  
  .selector-group {
      max-width: 100%;
      width: 100%;
  }
}

@media (max-width: 992px) {
  .filter-container {
      /* Stack them vertically on smaller screens */
      flex-direction: column;
  }
  
  .filter-tab,
  .shop-selector-container {
      width: 100%;
  }
}

@media (max-width: 768px) {
  /* Only wrap input rows on very small screens */
  .input-row {
      flex-wrap: wrap;
  }
  
  .input-group {
      width: 100%;
      min-width: 100%;
  }
  
  .action-buttons-container {
      flex-direction: column;
      align-items: stretch;
  }
  
  .settings-button {
      margin: 0 auto;
  }
  .fizmodokcontent-container {
      flex-direction: column;
  }
  .payment-sidebar {
      width: 100%;
      min-width: unset;
      border-right: none;
      border-bottom: 1px solid #e2e8f0;
  }
}
     
     /* Export format dialog styles */
     #exportFormatDialog {
         font-family: Arial, sans-serif;
     }
     
     #exportFormatDialog p {
         margin-bottom: 15px;
         font-weight: bold;
     }
     
     #exportFormatDialog label {
         margin-left: 8px;
         cursor: pointer;
     }
     
     #exportFormatDialog input[type="radio"] {
         cursor: pointer;
     }
/*Dialog bevét részlet*/
.modal-subheader {
  padding: 10px 10px;

} 
.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
}
.info-item {
  display: flex;
  flex-direction: column;
  border-bottom: 1px solid #ccc
}

.info-label {
  color: var(--global-label-font-color);
  font-family: var(--menu-font-family);
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 4px;
}

.info-value {
  color: var(--global-label-font-color);
  font-family: var(--menu-font-family);
  font-size: 16px;
  font-weight: 400;

}

/*Dialog */
.ui-state-default, 
.ui-widget-content .ui-state-default, 
.ui-widget-header .ui-state-default, 
.ui-button, 
html .ui-button.ui-state-disabled:hover, 
html .ui-button.ui-state-disabled:active {
   border: 0px solid #000 !important; 
  background: var(--global-button-background) !important;
  font-weight: 500 !important;
  color: var(--global-button-font-color) !important;
}

.ui-widget-content{
  background-color: var(--table-background) !important;
  padding: 0px !important;
  border:  0px !important;
  color: var(--global-label-font-color) !important;
  z-index: 1000 !important;
  
}
/*fejléc*/
.ui-widget-header{
  background: var(--table-header) !important;
  border: none !important;
}
/*fejléc szöveg padding*/
.ui-dialog-titlebar{ 
  padding: .8em 1em !important;
}
/*Bezáró X háttere*/
.ui-dialog-titlebar-close{
  background-color: transparent !important;
  border: 0px !important;
  width: 30px !important;
}

/*Dialog lábléc, gombok*/
/*Dialog gomb alap tulajdonsága*/
.ui-dialog-buttonset button {
  background-color: var(--global-button-background);
  color: var( --global-button-font-color);
  font-weight: 500;
  border: none;
  padding: 5px 15px;
  cursor: pointer;
}
/*Dialog gomb hover/kiejlölés és egyébb tulajdonsága*/
.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus,
.ui-button:hover,
.ui-button:focus {
	border: 0px solid #000 !important;
	background: #0055aa!important;
	font-weight: 500 !important;
	color: var(--global-button-font-color) !important;
}
.ui-dialog .ui-dialog-buttonpane button {
  margin-right: 15px !important;
  margin-bottom: 15px !important;
  margin-top: 15px !important;
  cursor: pointer;
}

.ui-corner-all,
.ui-corner-top,
.ui-corner-left,
.ui-corner-tl {
	 border-top-left-radius: 4px!important; 
}
.ui-corner-all,
.ui-corner-top,
.ui-corner-right,
.ui-corner-tr {
	 border-top-right-radius: 4px!important; 
}
.ui-corner-all,
.ui-corner-bottom,
.ui-corner-left,
.ui-corner-bl {
	border-bottom-left-radius: 4px!important
}
.ui-corner-all,
.ui-corner-bottom,
.ui-corner-right,
.ui-corner-br {
	 border-bottom-right-radius: 4px !important; 
}

.sortable-columns {
  list-style-type: none;
  padding: 0;
  margin: 0 0 20px 0;
}
.sortable-columns li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px;
  margin-bottom: 5px;
  background-color: #f8f8f8;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: move;
}
.sortable-columns li.ui-sortable-helper {
  background-color: #e8e8e8;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.sortable-columns li.ui-state-highlight {
  height: 36px;
  background-color: #ffffcc;
  border: 1px dashed #ccc;
}
.drag-handle {
  margin-right: 10px;
  color: #888;
  cursor: move;
}
.dialog-body{
  padding: 10px 0px 0px 0px;
}
.dialog-foot-buttons{
  display: block;
  float: right;
  padding: 6px;
}

/*----Login Divs-----*/
/* Login Container */

.login-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px;
  
}

.login-card {
  width: 350px;
  max-width: 450px;
  background-color: #fff;
  border-radius: 6px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
  overflow: hidden;
  margin-bottom: 20px;
}

.login-header {
  padding: 10px;
  background-color: #0066cc;
  color: #fff;
  text-align: center;
  position: relative;
}

.login-header h2 {
  font-weight: 500;
  font-size: 22px;
  margin-bottom: 0px;
  margin-top: 0px;
}
.login-body {
  padding: 20px;
}

/*----Login Divs-----*/
/* Login Container */
.bizonylat-container,
.arukereso-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px;
}
.bizonylat-container{
  padding: 0px;
}
/*Árukereső DIV"*/
.arukereso-card,
.bizonylat-card,
.bizonylat-ossz-card {
  width: 350px;
  background-color: #fff;
  border-radius: 6px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
  overflow: hidden;
  margin-bottom: 20px;
}
.bizonylat-card{
  width: 380px;
}
.bizonylat-ossz-card{
  width: 266px;
}

.arukereso-header {
  padding: 10px;
  background-color: #0066cc;
  color: #fff;
  text-align: center;
  position: relative;
}

.arukereso-header h3 {
  font-weight: 500;
  font-size: 22px;
  margin-bottom: 0px;
  margin-top: 0px;
}
.arukereso-body {
  padding: 20px;
}


/* Form Styles */
.form-group {
  margin-bottom: 20px;
}

.login-input-group {
  position: relative;
  display: flex;
  align-items: center;
}

.login-input-group i {
  position: absolute;
  left: 15px;
  color: #8da2b5;
  font-size: 16px;
}

.login-input-group .password-toggle {
  left: auto;
  right: 15px;
  cursor: pointer;
}

.form-control {
  width: 100%;
  padding: 12px 15px 12px 45px !important;
  border: 1px solid #e1e8ed;
  border-radius: 5px;
  font-size: 15px;
  transition: all 0.3s;
  background-color: var(--global-input-background);
}

.form-control-size{
  width: 172px;
  padding: 12px 15px 12px 12px !important;
  border: 1px solid #e1e8ed;
  border-radius: 5px;
  font-size: 15px;
  transition: all 0.3s;
  background-color: var(--global-input-background);
}
.form-control-size-plus{
  width: 100%;
}

.form-control:focus {
  outline: none;
  border-color: #0066cc;
  box-shadow: 0 0 0 3px rgba(0,102,204,0.1);
}

.login-btn {
  width: 100%;
  padding: 12px;
  background-color: #0066cc;
  color: #fff;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.login-btn:hover {
  background-color: #0055aa;
}

.login-btn i {
  font-size: 18px;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  .login-card {
      max-width: 100%;
  }

}
@media (max-width: 480px) {
  .login-body {
      padding: 20px;
  }
  
  .form-control {
      padding: 10px 10px 10px 40px;
  }
  
}
.content-layout-raktar {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
}
/*bolti bevét lista css */
.content-layout {
  display: flex;
  gap: 1.5rem;
  justify-content: center;
}
.filter-sidebar {
  width: 360px;
  flex-shrink: 0;
  margin-top: 38px;
}
.filter-sidebar-felhasznalo {
  width: 485px;
  flex-shrink: 0;
  margin-top: 36px;
}
.filter-sidebar-szallito {
  width: 460px;
  flex-shrink: 0;
  margin-top: 36px;
}
.filter-sidebar-rendeles-forgalom {
  width: 800px;
  flex-shrink: 0;
}
.filter-sidebar-naptar {
  width: 220px;
  flex-shrink: 0;
}
.filter-sidebar-vevo{
  width: 440px;
  flex-shrink: 0;
  margin-top: 36px;
}
.filter-sidebar-raktar{
  width: 560px;
  flex-shrink: 0;
  margin-top: 36px;
}
.filter-sidebar-szallito-napok {
  width: 600px;
  flex-shrink: 0;
  margin-top: 36px;
}

.form-divider {
  height: 1px;
  background-color: var(--dialog-header-background);
  margin: 1rem 0;
}
.form-divider-vertical-light,
.form-divider-vertical {
  width: 3px;
  background-color: var(--dialog-header-background);
  height: 100%;
}
.form-divider-vertical-light{
  width: 1px;
}
/* Custom Radio button*/
.radio-label .radio-custom:after {
  top: 5px;
  left: 5px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: white;
}
.radio-custom {
  background-color: var(--dialog-header-background);
  border-color: var(--dialog-header-background);
}

/* <i> referens elemeknek fix méret*/
.itag-class{
  font-size: 20px;
}
.itag-menu-class{
  padding: 8px;
}
.itag-penzugy-class{
  margin: 0px 10px 0px 0px;
}
.itag-margin{
  margin-right: 10px;
}
.itag-margin-forbevet{
  margin-right: 4px;
}
/* Responsive Styles */
@media (max-width: 1200px) {
  .content-layout {
      flex-direction: column;
  }
  
  .filter-sidebar {
      width: 100%;
  }
  
  .checkbox-group {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
  }
}
/*Dropdown button BEGIN*/
.dropdown-container {
  width: 100%;
  max-width: 320px;
  position: relative;
}

.dropdown-label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  color: var(--text-color);
  font-size: 14px;
}

.searchable-dropdown {
  position: relative;
  width: 100%;
}

.dropdown-button {
  width: 100%;
  padding: 12px 16px;
  font-size: 15px;
  text-align: left;
  background-color: var(--global-input-background);
  color: var(--text-color);
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all 0.2s ease;
  box-shadow: var(--shadow);
}

.dropdown-button:hover {
  border-color: solid 1px black;
}

.dropdown-button:focus {
  outline: none;
  border-color: solid 1px black;
  box-shadow: 0 0 0 1px black;
}

.dropdown-icon {
  transition: transform 0.3s ease;
}

.dropdown-button.active .dropdown-icon {
  transform: rotate(180deg);
}

.dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: 100%;
  background-color: var(--global-input-background);
  border: 1px solid #ddd;
  border-radius: 4px;
  box-shadow: var(--shadow);
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: all 0.3s ease;
  z-index: 100;
}

.dropdown-menu.show {
  max-height: 320px;
  opacity: 1;
}

.search-box {
  padding: 12px;
  border-bottom: 1px solid #ddd;
  position: sticky;
  top: 0;
  background-color: var(--global-input-background);
  z-index: 1;
}

.search-input {
  width: 100%;
  padding: 8px 12px;
  font-size: 14px;
  border: 1px solid #ddd;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.search-input:focus {
  outline: none;
  border-color: #5897fb;
  box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.1);
}

.dropdown-options {
  max-height: 240px;
  overflow-y: auto;
}

.dropdown-item {
  padding: 12px 16px;
  cursor: pointer;
  transition: all 0.2s ease;
  color: var(--text-color);
}

.dropdown-item:hover {
  background-color: rgba(79, 70, 229, 0.1);
  color: #5897fb;
}

.dropdown-item.selected {
  background-color: rgba(79, 70, 229, 0.1);
  color: #5897fb;
  font-weight: 500;
}

.dropdown-item:not(:last-child) {
  border-bottom: 1px solid #e2e8f0;
}

.no-results {
  padding: 16px;
  text-align: center;
  color: var(--text-light);
  font-size: 14px;
}

/* Scrollbar styling */
.dropdown-options::-webkit-scrollbar {
  width: 6px;
}

.dropdown-options::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
}

.dropdown-options::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 10px;
}

.dropdown-options::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

/*Dropdown button END*/

/*Kassza áttekintés menühöz BEGIN*/
.penzugyi-container{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-bottom: 20px
  /*max-width: 500px;*/
}
.penzugyi-container-content{
  max-width: 550px;
}

.penzugyi-container-content-raktarkeszlet{
    width: auto;
}
.summary-section {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 15px;
}
.summary-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background-color: var(--global-input-background);  /*#f8fafc*/
  border-radius: 8px;
  transition: all 0.2s ease;
}
.penzugy-divider {
  position: relative;
  text-align: center;
  margin: 0px 15px 0px 15px;
}

.penzugy-divider::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background-color: var(--dialog-header-background);
  z-index: 1;
}

.penzugy-divider span {
  position: relative;
  z-index: 2;
  background-color: var(--dialog-background);
  padding: 0 12px;
  font-size: 14px;
  color:  var(--dialog-header-background);
  font-weight: 500;
}


#bizonylat_kiiratas {
  font-family: monospace; /* monospace betűtípus */
}
#bizonylat_kiiratas table {
  width: 100%;
  border-collapse: collapse;
}
#bizonylat_kiiratas th, #bizonylat_kiiratas td {
  border: 1px solid black;
  text-align: left;
  padding: 8px;
}
#bizonylat_kiiratas th {
  background-color: #365985;
  color: white;
}

.blokk-container {
  max-width: 750px;
  margin: 0 auto;
  margin-top: 15px;
  margin-bottom: 15px;
}
.bolti_adatok_container{
  max-width: 1300px;
  margin: 0 auto;
  margin-top: 15px;
  margin-bottom: 15px;
}
.table-container {
  padding: 0;
  overflow-x: auto;
}

.product-table {
  width: 100%;
  border-collapse: collapse;
}

.product-table th{
  background-color: #f1f5f9;
  padding: 12px 16px;
  text-align: left;
  font-weight: 600;
  color: #64748b;
  font-size: 16px;
  border-bottom: 1px solid #e2e8f0;
}
.product-table-tfoot tr{
  background-color: #f1f5f9;
  padding: 12px 16px;
  text-align: left;
  font-weight: 800;
  color: #64748b;
  font-size: 16px;
  border-bottom: 1px solid #e2e8f0;
}

.product-table td {
  padding: 8px;
  border-bottom: 1px solid #e2e8f0;
  vertical-align: middle;
}
/*bevetlista tábla*/
.bevetlista-table {
  width: 100%;
  border-collapse: collapse;
}

.bevetlista-table th{
  background-color: #f1f5f9;
  padding: 10px 10px;
  text-align: left;
  font-weight: 600;
  color: #64748b;
  font-size: 16px;
  border-bottom: 1px solid #e2e8f0;
}
.bevetlista-table-tfoot tr{
  background-color: #f1f5f9;
  padding: 10px 10px;
  text-align: left;
  font-weight: 600;
  color: #64748b;
  font-size: 16px;
  border-bottom: 1px solid #e2e8f0;
}

.bevetlista-table td {
  padding: 10px;
  border-bottom: 1px solid #e2e8f0;
  vertical-align: middle;
}

.bevetlista-action-groups {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 10px;
  padding: 0px 10px;
}

.bevetlista-action-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  min-width: 300px;
}
.simple-padding {
  padding: 10px 10px;
}
.bevetlista-footer{
  padding: 10px 10px;
  background-color: #f1f5f9;
  border-top: 1px solid #e2e8f0;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}
.gomb-balra{
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}
.gomb-left{
  display: flex;
  gap: 4px;
  margin-bottom: 4px;
  max-width: 900px;
  overflow-x: auto;
}

/**/
.header-actions {
  display: flex;
  gap: 10px;
}
.action-button {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background-color: var(--primary-light);
  color: var(--primary-color);
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}
.inline-blokk{
  display: flex;
  gap: 8px;
  float: right;
}
.section-header-kassza{
    background-color: var(--table-header);
    color: #ffffff;
    padding: 15px;  /* 15px*/
    font-size: 14px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}
.section-header-kassza h3{
    margin: 0;
    padding: 0;
    font-size: 16px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}
.section-header-flex{
  display:flex;
  justify-content: space-between;
}

/*Kassza áttekintés menühöz END*/
.ui-datepicker {
  z-index: 1011 !important;
}
/*------------*/
/* Loading Modal BEGIN*/
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(15, 23, 42, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  backdrop-filter: blur(4px);
  transition: opacity 0.5s ease;
}

.modal-overlay.fade-out {
  opacity: 0;
}

.modal-dialog {
  background-color: var(--card-color);
  border-radius: 4px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  max-width: 90%;
  width: auto;
  animation: fadeInUp 0.3s ease-out;
}

@keyframes fadeInUp {
  from {
      opacity: 0;
      transform: translateY(20px);
  }
  to {
      opacity: 1;
      transform: translateY(0);
  }
}

.loading-dialog {
  background-color: var(--card-color);
  border-radius: 12px;
  padding: 2.5rem;
  width: 320px;
  text-align: center;
}

.loading-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
}

.loading-spinner {
  position: relative;
  width: 60px;
  height: 60px;
}

.spinner-ring {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: var(--primary-color);
  animation: spin 1.2s linear infinite;
}

.spinner-ring:before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  right: 3px;
  bottom: 3px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: var(--primary-hover);
  animation: spin 1.8s linear infinite;
}

.spinner-ring:after {
  content: "";
  position: absolute;
  top: 9px;
  left: 9px;
  right: 9px;
  bottom: 9px;
  border-radius: 50%;
  border: 3px solid transparent;
  border-top-color: var(--secondary-color);
  animation: spin 2.4s linear infinite;
}

@keyframes spin {
  0% {
      transform: rotate(0deg);
  }
  100% {
      transform: rotate(360deg);
  }
}

.loading-text {
  font-size: 2rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}

.loading-subtext {
  font-size: 1.25rem;
  color: var(--text-secondary);
  margin: 0;
}
/*Loading Modal END*/


.bev-attar-maincontainer{
  max-width: 1000px;
  margin : 0 auto;
  margin-bottom: 20px;
}

.file-bevet-maincontainer{
  display: flex;
  gap: 1.5rem;
  justify-content: center;
}
.bottom{
  margin-bottom: 20px;
}
.width800{
  width: 800px;
}

.file-bevet-Aside{
  max-width: 1000px;
 
}
.raktar-kiszereles{
  max-width: 1200px;
 
}
.csv-bevet-show{
  width: 900px;

}

.bev-bttn-groups{
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 10px;
  padding: 0px 10px;
}
.bev-bttn-group{
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  min-width: 300px;  
}
.same-width{
  width: 196px !important;
}

/*Message Dialog BEGIN*/



/* Dialog Styles */
.message-dialog {
  background-color: var(--card-color);
  border-radius: 12px;
  padding: 20px;
  width: 500px;
  text-align: center;
}

.message-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
}

.dialog-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}
.error-dialog .dialog-icon {
    color: var(--error-color);
}

.warning-dialog .dialog-icon {
    color: var(--warning-color);
}

.success-dialog .dialog-icon {
    color: var(--success-color);
}

.info-dialog .dialog-icon {
    color: var(--info-color);
}
/* Style for the unit price cell */
  .price-cell {
    position: relative;
    min-width: 100px;
  }
  
  /* Style for the percentage container */
  .percentage-container {
    position: absolute;
   /* right: 6px;*/
    left: calc(90px);
    align-items: baseline !important;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    font-size: 0.75em;
    line-height: 1.2;
  }
  
  /* Style for each percentage value */
  .percentage-value {
    color: #0066cc;
    white-space: nowrap;
  }

.header-with-sub {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.header-with-sub-gap {
  gap: 18px;
}
.header-with-sub-gap2 {
  gap: 26px;
}

.sub-label {
    font-size: 0.75em;
    font-weight: normal;
    line-height: 1.1;
}


  /* File Upload */
.file-upload-area {
  margin-bottom: 1.5rem;
}

.upload-zone {
  border: 2px dashed #e2e8f0;
  border-radius: 6px;
  padding: 10px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease;
  background-color: #f8fafc;
}

.upload-zone:hover,
.upload-zone.drag-over {
  border-color: #0066cc;
  background-color: #e6f0ff;
}

.upload-zone i {
  font-size: 60px;
  color: #94a3b8;
}

.upload-zone h3 {
  font-size: 16px;
  font-weight: bold;
  color:  #1e293b;
  margin-bottom: 4px;
}

.upload-zone h4 {
  color: #64748b;
  margin-bottom: 8px;
}

.browse-button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  background-color: #0066cc;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s;
}

.browse-button:hover {
  background-color: #0052a3;
}

.file-actions {
  display: flex;
  gap: 0.75rem;
  margin-top: 1rem;
}

.filename-filebevet {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1rem;
  background-color: white;
  color: #64748b;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.upload-button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  background-color:  #3e9f37;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.upload-button:disabled {
  background-color: #94a3b8;
  cursor: not-allowed;
}

.upload-button:not(:disabled):hover {
  background-color: #059669;
}

 /* File Upload END*/

 .margin-bottom{
  margin-bottom: 16px !important;
 }
  .margin-bottom-5px{
  margin-bottom: 5px;
 }

/* Action Buttons */
.action-buttons {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.action-btn {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  border: none;
  border-radius: 4px;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
  position: relative;
}

.action-btn i {
  font-size: 1rem;
  width: 1.25rem;
}

.action-btn span:first-of-type {
  flex: 1;
}

.btn-label {
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  background-color: rgba(255, 255, 255, 0.2);
  color: white;
}

.action-btn.primary {
  background-color: var(--primary-color);
  color: white;
}

.action-btn.primary:hover {
  background-color: var(--primary-hover);
}

.action-btn.success {
  background-color: var(--success-color);
  color: white;
}

.action-btn.success:hover {
  background-color: #059669;
}

.action-btn.info1 {
  background-color: var(--info-color);
  color: white;
}

.action-btn.info1:hover {
  background-color: #2563eb;
}

.scrollable-contaier,
.scrollable-contaier-masodvonalkod,
.scrollable-contaier-kiszereles{
  height: 470px;
  overflow-y: auto;
  overflow-x: hidden;
  
}
.scrollable-300px{
  height: 300px;
}
.scrollable-contaier-masodvonalkod{
  height: 300px;
}
.scrollable-contaier-kiszereles{
  height: 200px;
}
.leftmargin{
  margin-left:10px;
}

.paginate_button {
  border-radius: 0 !important;
}

.arrows{
  display: inline;
}

.fa-chevron-circle-down,
.fa-chevron-circle-up{
  cursor:pointer;
}
.form-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}
.form-row-center{
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
  justify-content: center;
}
.fizmodokcontent-container{
    flex: 1;
    display: flex;
    min-height: 0;
}
.payment-sidebar{
    width: 200px;
    min-width: 200px;
    padding: 15px;
    border-right: 1px solid #e2e8f0;
    display: flex;
    flex-direction: column;
    background-color: var(--global-page-background);
}
.payment-content{
    flex: 1;
    padding: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-content: start;
}
.payment-summary{
  flex: 1;
}