/*===================================================================================================================================*/
* {box-sizing: border-box;}
body {
  margin: 0;
  font-size: var(--fontmeret);
  font-family: Arial, Helvetica;
  background-color: var(--bodybc);
  color: var(--bodytc);
}
/*=================================================================================================================================== Header*/

.header {
  background-color: var(--headerbc);
  /*padding: 10px 15px;*/
  padding: 2px 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header h1 {
  margin: 1;
  color: var(--headertc);
  text-shadow: 1px 1px 1px var(--fontmeret);
}

.header img {
  border-radius: 50%;
  width: 50px;
  height: 50px;
}

/*=================================================================================================================================== Navbar*/
.navbar {
	overflow: hidden;
	background-color: var(--navbarbc);
	color: var(--navbartc);
  }
  
  /* Navigation links */
  .navbar a {
    float: left;
    font-size: var(--fontmeret);
    background-color: var(--navbarabc);
    color: var(--navbaratc);
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
  }

  .navbar a.active {
    background-color: var(--navbaraactivebc);
    color: var(--navbaraactivetc);
  }
  
  /* The subnavigation menu */
  .subnav {
	float: left;
	overflow: hidden;
  }
  
  /* Subnav button */
  .subnav .subnavbtn {
	font-size: var(--fontmeret);
	border: none;
	outline: none;
	color: var(--navbaratc);
	padding: 14px 16px;
	background-color: inherit;
	font-family: inherit;
	margin: 0;
  }
  .subnav .subnavbtn .active {
    background-color: var(--navbaraactivebc);
    color: var(--navbaraactivetc);
  }
  
  /* Add a red background color to navigation links on hover */
  .navbar a:hover, .subnav:hover .subnavbtn {
	background-color: var(--navbaraactivebc);
  color: var(--navbaraactivetc);
  }
  
  /* Style the subnav content - positioned absolute */
  .subnav-content {
    display: none;
    position: absolute;
    left: auto;
    right: auto;
    background-color: var(--navbaraactivebc);
    color: var(--navbaraactivetc);
    min-width: 200px;  /* szélesség fixálása */
    z-index: 9999;
    flex-direction: column; /* biztos, ami biztos */
  }
  
  /* Style the subnav links */
  .subnav-content a {
    display: block;      /* egymás alatt legyenek */
    float: none;         /* float-ot kikapcsoljuk */
    padding: 10px 16px;  /* kényelmes belső margó */
    color: var(--subnavtc);
    text-decoration: none;
    text-align: left;    /* szöveg igazítás */
  }
  
  /* Add a grey background color on hover */
  .subnav-content a:hover {
	background-color: var(--subnavahoverbc);
	color: var(--subnavahovertc);
  }
  
  /* When you move the mouse over the subnav container, open the subnav content */
  .subnav:hover .subnav-content {
	display: block;
  }

.navbar .login-container {
  float: right;
}

.navbar .navtext {
  padding: 6px;
  margin-top: 9px;
  font-size: var(--fontmeret);
  border: none;
  width:120px;
}

.navbar .login-container button {
  float: right;
  padding: 6px 10px;
  margin-top: 8px;
  margin-right: 16px;
  background-color: var(--default);
  color: var(--defaulttc);
  font-size: var(--fontmeret);
  border: none;
  cursor: pointer;
  border-radius: 5px; /* Lekerekítés */
  box-shadow: 0 4px 6px var(--traspfekete30);
  transition: background-color 0.3s ease; /* Színváltás animáció */
}

.navbar .login-container .loginabutton {
  float: right;
  padding: 6px 10px;
  margin-top: 8px;
  margin-right: 16px;
  background-color: var(--default);
  color: var(--defaulttc);
  font-size: var(--fontmeret);
  border: none;
  cursor: pointer;
  border-radius: 5px; /* Lekerekítés */
  box-shadow: 0 4px 6px var(--traspfekete30);
  transition: background-color 0.3s ease; /* Színváltás animáció */
}

.navbar .login-container .loginabutton:hover {
  background-color: var(--defaulth);
  color: var(--defaulthtc);
}


.navbar .login-container .loginp {
    float: left;
    color: white;
    margin-top: 15px;
    margin-right: 16px;
    font-size: var(--fontmeret);
}

.navbar .login-container button:hover {
  background-color: var(--defaulth);
  color: var(--defaulthtc);
}

@media screen and (max-width: 600px) {
  .navbar .login-container {
    float: none;
  }
  .navbar a, .navbar .navtext, .navbar .login-container button {
    float: none;
    display: block;
    text-align: left;
    width: 100%;
    margin: 0;
    padding: 14px;
  }
  .navbar input[type=text], input[type=password] {
    border: 1px solid #ccc;  
  }
}

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

.sticky + .content {
  padding-top: 60px;
}

/*=================================================================================================================================== Content*/
.content {
  padding: 5px;
  width: auto;
  background-color: var(--bodybc);
  color: var(--bodytc);
}
/*=================================================================================================================================== Buttons*/
.btn {
  border: none;
  color: white;
  padding: 10px 15px;
  font-size: var(--fontmeret);
  cursor: pointer;
  border-radius: 5px; /* Lekerekítés */
  box-shadow: 0 4px 6px var(--traspfekete30);
  transition: background-color 0.3s ease; /* Színváltás animáció */
}

a.btn {
    -webkit-appearance: button;
    -moz-appearance: button;
    appearance: button;
    text-decoration: none;
    border: none;
    color: white;
    padding: 6px 15px;
    font-size: var(--fontmeret);
    cursor: pointer;
}

.tblbtn {
  border: none;
  color: white;
  padding: 6px 15px;
  font-size: var(--fontmeret);
  cursor: pointer;
}

.success {background-color: var(--success);color: var(--successtc);} /* Green */
.success:hover {background-color: var(--successh);color: var(--successhtc);}

.info {background-color: var(--info);color: var(--infotc);} /* Blue */
.info:hover {background-color: var(--infoh);color: var(--infohtc);}

.warning {background-color: var(--warning);color: var(--warningtc);} /* Orange */
.warning:hover {background-color: var(--warningh);color: var(--warninghtc);}

.danger {background-color: var(--error);color: var(--errortc);} /* Red */ 
.danger:hover {background-color: var(--errorh);color: var(--errorhtc);}

.default {background-color: var(--default);color: var(--defaulttc);} /* Gray */ 
.default:hover {background-color: var(--defaulth);color: var(--defaulthtc);}


/*=================================================================================================================================== DivTable*/

.row {
  margin-left:5px;
  margin-right:5px;
}
  
.column {
  float: left;
  width: 50%;
  padding: 5px;
}

/* Clearfix (clear floats) */
.row::after {
  content: "";
  clear: both;
  display: table;
}

.tbl_content {
  overflow: auto;
  width: auto;
  text-align: center;
  height: 690px;
}

.h800 {
  height: 790px;
}

.tbl_content_max {
  overflow: auto;
  width: auto;
  text-align: center;
  height: 750px;
}

.tbl_content_biz {
  overflow: auto;
  width: auto;
  text-align: left;
  padding: 15px; 
  border-radius: 6px;
  background-color: var(--tablethtc);
  max-height: 750px;
}

.tbl_content_modal {
  overflow: auto;
  width: auto;
  text-align: center;
  height: 500px;
}

.tbl_content_half1 {
  overflow: auto;
  width: auto;
  text-align: center;
  height: 220px;
}
.tbl_content_half2 {
  overflow: auto;
  width: auto;
  text-align: center;
  height: 430px;
}

.tbl_zebra_res {
  width: 100%;
  border-collapse: collapse;
  background-color: var(--tabletdbc);
  table-layout: fixed;
}

.tbl_zebra_res td {
  padding: 6px;
  text-align: left;
  border-collapse: collapse;
  border: 1px solid var(--tabletdborder);
  overflow: hidden;
}

.tbl_zebra_res th {
  position: sticky; /* make the table heads sticky */
  top: 0px;
  padding: 10px;
  color: var(--tablethtc);
  background-color: var(--tablethbc);
  border-collapse: collapse;
  border: 1px solid var(--tabletdborder);
  text-overflow: clip;
}

.tbl_zebra_res th .resizer {
    position: absolute;
    top: 0;
    right: 0;
    width: 3px;
    height: 100%;
    cursor: ew-resize;
    background-color: var(--tablethbcres);
}

.tbl_zebra_res tr:hover {
  background-color: var(--tabletdhoverbc);
}

.fixed-header {
  position: sticky;
  top: 0;
  z-index: 4;
}

.fixed-column-1-besz {
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  width: 100px;
  background-color: var(--tabletdbc);
  border-right: 2px solid var(--tabletdborder);
  z-index: 3;
}
.fixed-column-2-besz {
  position: -webkit-sticky;
  position: sticky;
  left: 115px; /* Az oszlop szélességétől függően állítsd be */
  width: 250px;
  background-color: var(--tabletdbc);
  border-right: 2px solid var(--tabletdborder);
  z-index: 2;
}
.fixed-column-1-vr {
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  width: 100px;
  background-color: var(--tabletdbc);
  border-right: 2px solid var(--tabletdborder);
  z-index: 3;
}
.fixed-column-2-vr {
  position: -webkit-sticky;
  position: sticky;
  left: 101px; /* Az oszlop szélességétől függően állítsd be */
  width: 250px;
  background-color: var(--tabletdbc);
  border-right: 2px solid var(--tabletdborder);
  z-index: 2;
}
.fixed-column-3-vr {
  position: -webkit-sticky;
  position: sticky;
  left: 221px; /* Az oszlop szélességétől függően állítsd be */
  background-color: var(--tabletdbc);
  border-right: 2px solid var(--tabletdborder);
  z-index: 1;
}

.tbl_fikesz {
  background-color: var(--tabletdbc);
  border: 1px solid var(--tabletdborder);
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--tablethborder);
}

.tbl_fikesz td {
  text-align: left;
  vertical-align: middle;
  padding:7px;
  color: var(--tabletdtc);
  border: 1px solid var(--tablethborder);
}

.tbl_fikesz th {
  position: sticky;
  top: 0px;
  text-align: left;
  vertical-align: middle;
  padding:7px;
  color: var(--tablethtc);
  background-color: var(--tablethbc);
  text-overflow: clip;
  border: 1px solid var(--tablethborder);
}

.tbl_fikesz .nowrap-column {
  white-space: nowrap;
}

.tbl_fikesz .pre-column {
  white-space: pre;
}

.tbl_fikesz .pre-wrap-column {
  white-space: pre-wrap;
}

.tbl_fikesz .pre-line-column {
  white-space: pre-line;
}

.tbl_fikesz tr:hover {
  background-color: var(--tabletdhoverbc);
  color: var(--tabletdhovertc);
  border: 1px solid var(--tabletdborder);
}

.tbl_fikesz .ar {
  text-align: right;
}

.tbl_fikesz .ac {
  text-align: center;
}

.tbl_zebra {
  background-color: var(--tabletdbc);
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--tabletdborder);
  white-space: nowrap;
}

.tbl_zebra td {
  text-align: left;
  vertical-align: middle;
  padding:7px;
  border: 1px solid var(--tabletdborder);
}

.tbl_zebra th {
  position: sticky; /* make the table heads sticky */
  top: 0px;
  text-align: left;
  vertical-align: middle;
  padding:7px;
  color: var(--tablethcolor);
  background-color: var(--tablethbc);
  text-overflow: clip;
  border: 1px solid var(--tabletdborder);
}

.tbl_zebra tr:hover {
  background-color: var(--tabletdhoverbc);
}

.tbl_zebra2 {
    border-spacing: 0;
    width: 100%;
    white-space: nowrap;
}
  
.tbl_zebra2 td {
    text-align: left;
    padding: 5px;
    border-collapse: collapse;
    border: 1px solid var(--tabletdborder);
}

.tdleft {
    max-width:250px;
}

.tdinputh {
  height:37px;
}

.tbl_zebra2 th {
    top: 0px;
    text-align: left;
    padding: 10px;
    color: var(--tablethtc);
    background-color: var(--tablethbc);
    border-collapse: collapse;
    border: 1px solid var(--tabletdborder);
}
  


/*=================================================================================================================================== Notes*/
.note_danger {
  z-index: 1;
  left: 15px;
  right: auto;
  top: 15px;
  position: fixed;
  background-color: #ffdddd;
  border-left: 6px solid #f44336;
  margin-bottom: 5px;
  padding: 4px 12px;
}

.note_success {
  z-index: 1;
  left: 15px;
  right: auto;
  top: 15px;
  position: fixed;
  background-color: #ddffdd;
  border-left: 6px solid #039416;
  margin-bottom: 5px;
  padding: 4px 12px;
}

.note_info {
  z-index: 1;
  left: 15px;
  right: auto;
  top: 15px;
  position: fixed;
  background-color: #e7f3fe;
  border-left: 6px solid #517fa5;
  margin-bottom: 5px;
  padding: 4px 12px;
}

.note_warning {
  z-index: 1;
  left: 15px;
  right: auto;
  top: 15px;
  position: fixed;
  background-color: #ffffcc;
  border-left: 6px solid #ffeb3b;
  margin-bottom: 5px;
  padding: 4px 12px;
}

/*=================================================================================================================================== Notes V3*/

#notifications {
  position: fixed;
  top: 10px;
  left: 15px;
  right: auto;
  /*width: 300px;*/
  z-index: 9998;
}

.notification {
  margin-bottom: 7px;
  padding: 10px 12px;
  border-radius: 3px; /* Lekerekítés */
  box-shadow: 0 4px 6px var(--traspfekete30);
  animation: NotifadeIn 0.5s forwards;
}

.notification.success {
  background-color: var(--success);
  color: var(--successtc);
  border-left: 6px solid var(--successh);
}

.notification.warning {
  background-color: var(--warning);
  color: var(--warningtc);
  border-left: 6px solid var(--warningh);
}

.notification.error {
  background-color: var(--error);
  color: var(--errortc);
  border-left: 6px solid var(--errorh);
}

.notification.info {
  background-color: var(--info);
  color: var(--infotc);
  border-left: 6px solid var(--infoh);
}

@keyframes NotifadeIn {
  from {
    opacity: 0;
    transform: translateX(-26px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes NotifadeOut {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(-26px);
  }
}


/*=================================================================================================================================== Notes V2*/


.fikesz_note_success {
  z-index: 9998;
  left: 15px;
  right: auto;
  top: 15px;
  position: fixed;
  background-color: #ddffdd;
  border-left: 6px solid #039416;
  margin-bottom: 5px;
  padding: 4px 12px;
  border-radius: 3px; /* Lekerekítés */
  box-shadow: 0 4px 6px var(--traspfekete30);
}

.fikesz_note_danger {
  z-index: 9998;
  left: 15px;
  top: 15px;
  position: fixed;
  background-color: #ffdddd;
  border-left: 6px solid #f44336;
  margin-bottom: 5px;
  padding: 4px 12px;
  border-radius: 3px; /* Lekerekítés */
  box-shadow: 0 4px 6px var(--traspfekete30);
}

.fikesz_note_info {
  z-index: 9998;
  left: 15px;
  right: auto;
  top: 15px;
  position: fixed;
  background-color: #e7f3fe;
  border-left: 6px solid #517fa5;
  margin-bottom: 5px;
  padding: 4px 12px;
  border-radius: 3px; /* Lekerekítés */
  box-shadow: 0 4px 6px var(--traspfekete30);
}

.fikesz_note_warning {
  z-index: 9998;
  left: 15px;
  right: auto;
  top: 15px;
  position: fixed;
  background-color: #ffffcc;
  border-left: 6px solid #ffeb3b;
  margin-bottom: 5px;
  padding: 4px 12px;
  border-radius: 3px; /* Lekerekítés */
  box-shadow: 0 4px 6px var(--traspfekete30);
}

input[type=text], input[type=date], input[type=password], input[type=number], input[type=email] , input[type=file], input[type=tel] {
    padding:5px;
    border:none;
	  font-size: var(--fontmeret);
    border-radius: 3px; /* Lekerekítés */
    box-shadow: 0 4px 6px var(--traspfekete30);

}

select {
    padding:4px;
    border:none;
	  font-size: var(--fontmeret);
    border-radius: 3px; /* Lekerekítés */
    box-shadow: 0 4px 6px var(--traspfekete30);
} 


.w25 {
  width:25px;
}
.w50 {
  width:50px;
}
.w75 {
  width:75px;
}
.w100 {
  width:100px;
}
.w125 {
  width:125px;
}
.w150 {
  width:150px;
}
.w200 {
  width:200px;
}
.w250 {
  width:250px;
}
.w300 {
  width:300px;
}
.w400 {
  width:400px;
}
.w500 {
  width:500px;
}
.w600 {
  width:600px;
}
.w700 {
  width:700px;
}
.w800 {
  width:1000px;
}
.wautomax500 {
    max-width: 500px;
}
.pradio {
    margin: 0px;
}

  .w3-check,.w3-radio{width:20px;height:20px;position:relative;top:6px}

  .w3-amber,.w3-hover-amber:hover{color:#000!important;background-color:#ffc107!important}
  .w3-aqua,.w3-hover-aqua:hover{color:#000!important;background-color:#00ffff!important}
  .w3-blue,.w3-hover-blue:hover{color:#fff!important;background-color:#2196F3!important}
  .w3-light-blue,.w3-hover-light-blue:hover{color:#000!important;background-color:#87CEEB!important}
  .w3-brown,.w3-hover-brown:hover{color:#fff!important;background-color:#795548!important}
  .w3-cyan,.w3-hover-cyan:hover{color:#000!important;background-color:#00bcd4!important}
  .w3-blue-grey,.w3-hover-blue-grey:hover,.w3-blue-gray,.w3-hover-blue-gray:hover{color:#fff!important;background-color:#607d8b!important}
  .w3-green,.w3-hover-green:hover{color:#fff!important;background-color:#4CAF50!important}
  .w3-light-green,.w3-hover-light-green:hover{color:#000!important;background-color:#8bc34a!important}
  .w3-indigo,.w3-hover-indigo:hover{color:#fff!important;background-color:#3f51b5!important}
  .w3-khaki,.w3-hover-khaki:hover{color:#000!important;background-color:#f0e68c!important}
  .w3-lime,.w3-hover-lime:hover{color:#000!important;background-color:#cddc39!important}
  .w3-orange,.w3-hover-orange:hover{color:#000!important;background-color:#ff9800!important}
  .w3-deep-orange,.w3-hover-deep-orange:hover{color:#fff!important;background-color:#ff5722!important}
  .w3-pink,.w3-hover-pink:hover{color:#fff!important;background-color:#e91e63!important}
  .w3-purple,.w3-hover-purple:hover{color:#fff!important;background-color:#9c27b0!important}
  .w3-deep-purple,.w3-hover-deep-purple:hover{color:#fff!important;background-color:#673ab7!important}
  .w3-red,.w3-hover-red:hover{color:#fff!important;background-color:#f44336!important}
  .w3-sand,.w3-hover-sand:hover{color:#000!important;background-color:#fdf5e6!important}
  .w3-teal,.w3-hover-teal:hover{color:#fff!important;background-color:#009688!important}
  .w3-yellow,.w3-hover-yellow:hover{color:#000!important;background-color:#ffeb3b!important}
  .w3-white,.w3-hover-white:hover{color:#000!important;background-color:#fff!important}
  .w3-black,.w3-hover-black:hover{color:#fff!important;background-color:#000!important}
  .w3-grey,.w3-hover-grey:hover,.w3-gray,.w3-hover-gray:hover{color:#000!important;background-color:#9e9e9e!important}
  .w3-light-grey,.w3-hover-light-grey:hover,.w3-light-gray,.w3-hover-light-gray:hover{color:#000!important;background-color:#cacaca!important}
  .w3-dark-grey,.w3-hover-dark-grey:hover,.w3-dark-gray,.w3-hover-dark-gray:hover{color:#fff!important;background-color:#616161!important}
  .w3-pale-red,.w3-hover-pale-red:hover{color:#000!important;background-color:#ffdddd!important}
  .w3-pale-green,.w3-hover-pale-green:hover{color:#000!important;background-color:#ddffdd!important}
  .w3-pale-yellow,.w3-hover-pale-yellow:hover{color:#000!important;background-color:#ffffcc!important}
  .w3-pale-blue,.w3-hover-pale-blue:hover{color:#000!important;background-color:#ddffff!important}
  .w3-text-amber,.w3-hover-text-amber:hover{color:#ffc107!important}
  .w3-text-aqua,.w3-hover-text-aqua:hover{color:#00ffff!important}
  .w3-text-blue,.w3-hover-text-blue:hover{color:#2196F3!important}
  .w3-text-light-blue,.w3-hover-text-light-blue:hover{color:#87CEEB!important}
  .w3-text-brown,.w3-hover-text-brown:hover{color:#795548!important}
  .w3-text-cyan,.w3-hover-text-cyan:hover{color:#00bcd4!important}
  .w3-text-blue-grey,.w3-hover-text-blue-grey:hover,.w3-text-blue-gray,.w3-hover-text-blue-gray:hover{color:#607d8b!important}
  .w3-text-green,.w3-hover-text-green:hover{color:#4CAF50!important}
  .w3-text-light-green,.w3-hover-text-light-green:hover{color:#8bc34a!important}
  .w3-text-indigo,.w3-hover-text-indigo:hover{color:#3f51b5!important}
  .w3-text-khaki,.w3-hover-text-khaki:hover{color:#b4aa50!important}
  .w3-text-lime,.w3-hover-text-lime:hover{color:#cddc39!important}
  .w3-text-orange,.w3-hover-text-orange:hover{color:#ff9800!important}
  .w3-text-deep-orange,.w3-hover-text-deep-orange:hover{color:#ff5722!important}
  .w3-text-pink,.w3-hover-text-pink:hover{color:#e91e63!important}
  .w3-text-purple,.w3-hover-text-purple:hover{color:#9c27b0!important}
  .w3-text-deep-purple,.w3-hover-text-deep-purple:hover{color:#673ab7!important}
  .w3-text-red,.w3-hover-text-red:hover{color:#f44336!important}
  .w3-text-sand,.w3-hover-text-sand:hover{color:#fdf5e6!important}
  .w3-text-teal,.w3-hover-text-teal:hover{color:#009688!important}
  .w3-text-yellow,.w3-hover-text-yellow:hover{color:#d2be0e!important}
  .w3-text-white,.w3-hover-text-white:hover{color:#fff!important}
  .w3-text-black,.w3-hover-text-black:hover{color:#000!important}
  .w3-text-grey,.w3-hover-text-grey:hover,.w3-text-gray,.w3-hover-text-gray:hover{color:#757575!important}
  .w3-text-light-grey,.w3-hover-text-light-grey:hover,.w3-text-light-gray,.w3-hover-text-light-gray:hover{color:#f1f1f1!important}
  .w3-text-dark-grey,.w3-hover-text-dark-grey:hover,.w3-text-dark-gray,.w3-hover-text-dark-gray:hover{color:#3a3a3a!important}
  .w3-border-amber,.w3-hover-border-amber:hover{border-color:#ffc107!important}
  .w3-border-aqua,.w3-hover-border-aqua:hover{border-color:#00ffff!important}
  .w3-border-blue,.w3-hover-border-blue:hover{border-color:#2196F3!important}
  .w3-border-light-blue,.w3-hover-border-light-blue:hover{border-color:#87CEEB!important}
  .w3-border-brown,.w3-hover-border-brown:hover{border-color:#795548!important}
  .w3-border-cyan,.w3-hover-border-cyan:hover{border-color:#00bcd4!important}
  .w3-border-blue-grey,.w3-hover-border-blue-grey:hover,.w3-border-blue-gray,.w3-hover-border-blue-gray:hover{border-color:#607d8b!important}
  .w3-border-green,.w3-hover-border-green:hover{border-color:#4CAF50!important}
  .w3-border-light-green,.w3-hover-border-light-green:hover{border-color:#8bc34a!important}
  .w3-border-indigo,.w3-hover-border-indigo:hover{border-color:#3f51b5!important}
  .w3-border-khaki,.w3-hover-border-khaki:hover{border-color:#f0e68c!important}
  .w3-border-lime,.w3-hover-border-lime:hover{border-color:#cddc39!important}
  .w3-border-orange,.w3-hover-border-orange:hover{border-color:#ff9800!important}
  .w3-border-deep-orange,.w3-hover-border-deep-orange:hover{border-color:#ff5722!important}
  .w3-border-pink,.w3-hover-border-pink:hover{border-color:#e91e63!important}
  .w3-border-purple,.w3-hover-border-purple:hover{border-color:#9c27b0!important}
  .w3-border-deep-purple,.w3-hover-border-deep-purple:hover{border-color:#673ab7!important}
  .w3-border-red,.w3-hover-border-red:hover{border-color:#f44336!important}
  .w3-border-sand,.w3-hover-border-sand:hover{border-color:#fdf5e6!important}
  .w3-border-teal,.w3-hover-border-teal:hover{border-color:#009688!important}
  .w3-border-yellow,.w3-hover-border-yellow:hover{border-color:#ffeb3b!important}
  .w3-border-white,.w3-hover-border-white:hover{border-color:#fff!important}
  .w3-border-black,.w3-hover-border-black:hover{border-color:#000!important}
  .w3-border-grey,.w3-hover-border-grey:hover,.w3-border-gray,.w3-hover-border-gray:hover{border-color:#9e9e9e!important}
  .w3-border-light-grey,.w3-hover-border-light-grey:hover,.w3-border-light-gray,.w3-hover-border-light-gray:hover{border-color:#f1f1f1!important}
  .w3-border-dark-grey,.w3-hover-border-dark-grey:hover,.w3-border-dark-gray,.w3-hover-border-dark-gray:hover{border-color:#616161!important}
  .w3-border-pale-red,.w3-hover-border-pale-red:hover{border-color:#ffe7e7!important}.w3-border-pale-green,.w3-hover-border-pale-green:hover{border-color:#e7ffe7!important}
  .w3-border-pale-yellow,.w3-hover-border-pale-yellow:hover{border-color:#ffffcc!important}.w3-border-pale-blue,.w3-hover-border-pale-blue:hover{border-color:#e7ffff!important}  

.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 10; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
  padding-top: 10px;
  padding-bottom: 10px;
}

.modal-content {
    margin: 5% auto 5% auto; /* 5% from the top, 15% from the bottom and centered */
    /*border: 1px solid #888;*/
    padding: 5px;
    border-radius: 5px;
    background-color: rgb(255, 255, 255); /* Black w/ opacity */
    /*width: 70%; */
    max-width: 95%; 
    max-height: 85%;
    overflow-y: auto;
    box-shadow: 0 4px 6px var(--traspfekete70);
    /*animation: modalFadeIn 0.5s forwards;*/
  }

  @keyframes modalFadeIn {
    from { opacity: 0; transform: scale(0.7); }
    to { opacity: 1; transform: scale(1); }
  }

  textarea {
    background-color:#FAFAFA;
    border:#EFEFEF solid 1px;
    color:#333;
  }  

.richText {
  -webkit-box-shadow: 0 0 20px 0 #999;
  -moz-box-shadow: 0 0 20px 0 #999;
  box-shadow: 0 0 20px 0 #999;
}

#overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4); /* Szürke, 50%-os átlátszósággal */
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

/* Pörgő karika */
.spinner {
  border: 10px solid var(--spinnerbc1);
  border-top: 10px solid var(--spinnerbc2);
  border-radius: 50%;
  width: 100px;
  height: 100px;
  animation: spin 1s linear infinite;
  box-shadow:  0 4px 6px var(--traspfekete70);
}

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

/*=================================================================================================================================== Tabs*/

.ui-widget {
	font-size: var(--fontmeret);
  font-family: Arial, Helvetica;
}

.ui-widget-content {
	border: 1px solid var(--tabbc);
}

.ui-tabs {
	position: relative;/* position: relative prevents IE scroll bug (element with position: relative inside container with overflow: auto appear as "fixed") */
	padding: .2em;
}
.ui-tabs .ui-tabs-nav {
	margin: 0;
	padding: .2em .2em 0;
}
.ui-tabs .ui-tabs-nav li {
	list-style: none;
	float: left;
	position: relative;
	top: 0;
	margin: 1px .2em 0 0;
	border-bottom-width: 0;
	padding: 0;
	white-space: nowrap;
}
.ui-tabs .ui-tabs-nav .ui-tabs-anchor {
	float: left;
	padding: .5em 1em;
	text-decoration: none;
}
.ui-tabs .ui-tabs-nav li.ui-tabs-active {
	margin-bottom: -1px;
	padding-bottom: 1px;
}
.ui-tabs .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor,
.ui-tabs .ui-tabs-nav li.ui-state-disabled .ui-tabs-anchor,
.ui-tabs .ui-tabs-nav li.ui-tabs-loading .ui-tabs-anchor {
	cursor: text;
}
.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor {
	cursor: pointer;
}
.ui-tabs .ui-tabs-panel {
	display: block;
	border-width: 0;
	padding: 3em 0.1em 0.1em 0.1em;
	background: none;
}


/* Interaction states
----------------------------------*/
.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default,
.ui-button,

/* We use html here because we need a greater specificity to make sure disabled
works properly when clicked or hovered */
html .ui-button.ui-state-disabled:hover,
html .ui-button.ui-state-disabled:active {
	border: 1px solid #c5c5c5;
	background: #f6f6f6;
	font-weight: normal;
	color: #454545;
}
.ui-state-default a,
.ui-state-default a:link,
.ui-state-default a:visited,
a.ui-button,
a:link.ui-button,
a:visited.ui-button,
.ui-button {
	color: #454545;
	text-decoration: none;
}
.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: 1px solid #cccccc;
	background: #ededed;
	font-weight: normal;
	color: #2b2b2b;
}
.ui-state-hover a,
.ui-state-hover a:hover,
.ui-state-hover a:link,
.ui-state-hover a:visited,
.ui-state-focus a,
.ui-state-focus a:hover,
.ui-state-focus a:link,
.ui-state-focus a:visited,
a.ui-button:hover,
a.ui-button:focus {
	color: #2b2b2b;
	text-decoration: none;
}

.ui-visual-focus {
	box-shadow: 0 0 3px 1px rgb(94, 158, 214);
}
.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active,
a.ui-button:active,
.ui-button:active,
.ui-button.ui-state-active:hover {
	border: 1px solid var(--tabbc);
	background: var(--tabbc);
	font-weight: normal;
	color: var(--tabtc);
}
.ui-icon-background,
.ui-state-active .ui-icon-background {
	border: var(--tabbc);
	background-color: var(--tabtc);
}
.ui-state-active a,
.ui-state-active a:link,
.ui-state-active a:visited {
	color: var(--tabtc);
	text-decoration: none;
}

/* Interaction Cues
----------------------------------*/
.ui-state-highlight,
.ui-widget-content .ui-state-highlight,
.ui-widget-header .ui-state-highlight {
	border: 1px solid #dad55e;
	background: #fffa90;
	color: #777620;
}
.ui-state-checked {
	border: 1px solid #dad55e;
	background: #fffa90;
}
.ui-state-highlight a,
.ui-widget-content .ui-state-highlight a,
.ui-widget-header .ui-state-highlight a {
	color: #777620;
}
.ui-state-error,
.ui-widget-content .ui-state-error,
.ui-widget-header .ui-state-error {
	border: 1px solid #f1a899;
	background: #fddfdf;
	color: #5f3f3f;
}
.ui-state-error a,
.ui-widget-content .ui-state-error a,
.ui-widget-header .ui-state-error a {
	color: #5f3f3f;
}
.ui-state-error-text,
.ui-widget-content .ui-state-error-text,
.ui-widget-header .ui-state-error-text {
	color: #5f3f3f;
}
.ui-priority-primary,
.ui-widget-content .ui-priority-primary,
.ui-widget-header .ui-priority-primary {
	font-weight: bold;
}
.ui-priority-secondary,
.ui-widget-content .ui-priority-secondary,
.ui-widget-header .ui-priority-secondary {
	opacity: .7;
/*	-ms-filter: "alpha(opacity=70)"; /* support: IE8 */
	font-weight: normal;
}
.ui-state-disabled,
.ui-widget-content .ui-state-disabled,
.ui-widget-header .ui-state-disabled {
	opacity: .35;
/*	-ms-filter: "alpha(opacity=35)"; /* support: IE8 */
	background-image: none;
}
/*
.ui-state-disabled .ui-icon {
	-ms-filter: "alpha(opacity=35)"; /* support: IE8 - See #6059 
}
*/
/* Corner radius */
.ui-corner-all,
.ui-corner-top,
.ui-corner-left,
.ui-corner-tl {
	border-top-left-radius: 3px;
}
.ui-corner-all,
.ui-corner-top,
.ui-corner-right,
.ui-corner-tr {
	border-top-right-radius: 3px;
}
.ui-corner-all,
.ui-corner-bottom,
.ui-corner-left,
.ui-corner-bl {
	border-bottom-left-radius: 3px;
}
.ui-corner-all,
.ui-corner-bottom,
.ui-corner-right,
.ui-corner-br {
	border-bottom-right-radius: 3px;
}

.tooltip {
  position: relative;
  display: inline-block;  
}

.tooltip .tooltiptext {
visibility: hidden;
  width: auto;
  background-color: var(--tabletdbc);
  color: #000;
  text-align: left;
  border: 1px solid var(--tabletdborder);
  padding: 10px;
  position: absolute;
  z-index: 4;
  top: 10%; /* Pozícionálás felfelé */
  left: 10%;
  margin-left: 150px;
  border-radius: 10px; /* Lekerekített sarkok */
  box-shadow: 0 4px 6px var(--traspfekete30);
  transition: opacity 0.3s;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

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

.product-table th, .product-table td {
  border: 1px solid var(--tabletdborder);
  padding: 5px;
  text-align: left;
}

.invisible-link {
  color: transparent;
  text-decoration: none;
}
/*
.input-group {
  margin: 0px;
}

.input-group input[type="checkbox"],
.input-group input[type="radio"] {
  appearance: none;
  width: 17.7px;
  height: 17.7px;
  border: 2px solid var(--cbborder);
  border-radius: 3px;
  vertical-align: middle;
  margin-right: 2px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  box-shadow: 0 4px 6px var(--traspfekete30); 
}

.input-group input[type="checkbox"]:checked {
  background-color: var(--cbbcc);
  border-color: var(--cbborderc);
}

.input-group input[type="radio"] {
  border-radius: 50%;
}

.input-group input[type="radio"]:checked {
  background-color: var(--cbbcc);
  border-color: var(--cbborderc);
}
*/

.input-group {
  margin: 0px;
}

.input-group input[type="checkbox"],
.input-group input[type="radio"] {
  appearance: none;
  width: 17.7px;
  height: 17.7px;
  border: 2px solid var(--cbborder);
  border-radius: 3px;
  vertical-align: middle;
  margin-right: 2px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  box-shadow: 0 4px 6px var(--traspfekete30);
  position: relative; /* szükséges a ::after pozícionálásához */
}

.input-group input[type="checkbox"]:checked {
  background-color: var(--cbbcc);
  border-color: var(--cbborderc);
}

.input-group input[type="checkbox"]:checked::after {
  content: "✓"; /* vagy content: "✗"; ha X-et szeretnél */
  color: white;
  font-size: 14px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -55%);
  font-weight: bold;
}

.input-group input[type="radio"] {
  border-radius: 50%;
}

.input-group input[type="radio"]:checked {
  background-color: var(--cbbcc);
  border-color: var(--cbborderc);
}

.input-group input[type="radio"]:checked::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  background-color: white;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

table th a {
  color: var(--linkcolor);
}
table th a:hover{
  color: var(--linkcolorh);
}

table td a {
  color: var(--linkcolor2);
}
table td a:hover{
  color: var(--linkcolorh);
}

i.fikesz {
  font-weight: bold;
  cursor: default;
  transition: font-weight 0.2s;
  color: var(--linkcolor2);
}

i.fikesz:hover {
  font-weight: bold;
  cursor: pointer;
  color: var(--linkcolorh);
}


#log-content {
  white-space: pre-wrap;
  background:  var(--tablethbc);
  color: #fff;
  padding: 15px;
  text-align: left;
}
.log-contentdebug {
  color: lightblue;
}
.log-contentinfo {
  color: lightgreen;
}
.log-contenterror {
  color: lightcoral;
}

.invoiceTable {
    width: 100%;
    border-collapse: collapse;
    background-color: #ffffff;
}

.invoiceTable th,
.invoiceTable td {
    border: 1px solid #ccc;
    padding: 8px;
    text-align: center;
    vertical-align: top;
}

.invoiceTable .hamisth {
    background-color: var(--tablethbc);
    color: #ffffff;
}

.invoiceTable th {
    position: sticky;
    top: 0px;
    background-color: var(--tablethbc);
    color: #ffffff;
}
.invoice {
      background-color: #1b2036;
      color: #ffffff;
      padding: 4px;
      margin: 2px 0;
      cursor: grab;
      border-radius: 4px;
    }
    .droppable {
        min-height: 50px;
    }
    .droppable.over {
        outline: 2px dashed #ff7a00;
    }

.weekend {
    background-color: #eee;
    pointer-events: none; /* drag/drop tilos */
}

.context-menu {
    position: absolute;
    background: white;
    border: 1px solid #ccc;
    display: none;
    z-index: 1000;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
.context-menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.context-menu li {
    padding: 5px 10px;
    cursor: pointer;
}
.context-menu li:hover {
    background: #eee;
}

.day-sum {
    padding-top: 10px;
}

.severity-1 { color: rgb(255, 255, 255); border: 2px solid #06003f; background-color: #06003f; } /* Prio 1 */
.severity-2 { color: black; border: 2px solid #ff0000; background-color: #f57c00; } /*Fizetési felszólítás 3*/
.severity-3 { color: black; border: 2px solid #0d4b30; background-color: #f57c00; } /*Fizetési felszólítás 2*/
.severity-4 { color: black; border: 2px solid #23c0c0; background-color: #f57c00; } /*Fizetési felszólítás 1*/
.severity-5 { color: black; border: 2px solid #fffe00; background-color: #fffe00; } /*Ígéret*/
.severity-6 { color: black; border: 2px solid #ff0000; background-color: #ff0000; } /*20+ napja lejárt*/
.severity-7 { color: black; border: 2px solid #1c9b7b; background-color: #1c9b7b; } /*10-19 napja lejárt*/
.severity-8 { color: black; border: 2px solid #00cecd; background-color: #00cecd; } /*0-9 napja lejárt*/
.severity-9 { color: black; border: 2px solid #30ce00; background-color: #30ce00; } /*0-9 napja lejárt*/