@media screen and (min-width: 700px) {
:root {
  --left-menu-color: #eff3f6;
  --left-menu-width: 18%;
  --left-menu-text-color: #4b535c;
  --left-menu-bg-color: #fff;
  --left-menu-text-size: 14px;
  --main-container-width: 82%;

  --button-mainbg-color: #0c66da;
}
html {
	margin:0; padding:0;
}
body {
	position:relative;
    margin: 0;
    background-color: #EEE;
	/* font: 12px/18px Helvetica, Arial, Verdana, sans-serif; */
   /*  -webkit-font-smoothing: subpixel-antialiased; */
	font-family: "Inter", sans-serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
	height:100%;
	color:#444;
}
/***************************************************** LOGIN *****************************************/
/* Standalone page (User::showLogin/showExpired) - no left nav/top bar, so it
   can't lean on the :root vars (only defined inside the >=700px media query)
   and repeats their values directly to stay correct at any width. */
.login-page {
	display:flex;
	align-items:center;
	justify-content:center;
	min-height:100vh;
	background-color:#eff3f6;
	padding:20px;
	box-sizing:border-box;
}
.login-card {
	width:100%;
	max-width:900px;
	background:#fff;
	border-radius:15px;
	padding:40px;
	box-sizing:border-box;
}
.login-card-narrow { max-width:420px; }
.login-logo {
	font-size:30px;
	font-style:italic;
	font-weight:500;
	color:#4b535c;
	margin-bottom:30px;
}
.login-logo span { color:#0c66da; }
.login-body {
	display:flex;
	gap:40px;
	align-items:flex-start;
}
.login-info { flex:1 1 0; min-width:0; }
.login-info h1 {
	font-size:20px;
	font-weight:600;
	color:#4b535c;
	margin:0 0 10px;
}
.login-info p {
	font-size:14px;
	line-height:1.6;
	color:#444;
	margin:0 0 15px;
}
.login-features { margin:0 0 15px; padding-left:18px; }
.login-features li {
	font-size:14px;
	line-height:1.6;
	color:#444;
	margin-bottom:8px;
}
.login-contact a { color:#0c66da; }
.login-form-col { width:320px; flex:0 0 320px; }
.login-form .error { margin-bottom:10px; }
.login-submit { width:100%; opacity:1; margin-top:10px; }
.login-expired-msg {
	font-size:15px;
	color:#4b535c;
	margin:0 0 20px;
}
.login-expired-msg.success { color:#1a8a3f; }
.login-pwd-rules {
	font-size:13px;
	line-height:1.7;
	color:#777;
	margin-top:15px;
}
/***************************************************** GLOBAL *****************************************/
.overlay {
	display:block;
	position:absolute;
	background:rgba(0,0,0,0.5);
	top:0;
	left:0;
	height:100%;
	width:100%;
	z-index:1000;
}
.overlay .message {
	position:relative;
	margin:200px auto;
	padding:10px;
	width:400px;
	height:150px;
	border-radius:5px;
	font-size:13px;
	font-weight:bold;
	color:#f00;
	background-color:#fff;
	vertical-align:middle;
}
.message a {
	float:right;
	margin-left:5px;
}
.message .btndiv {
	width:60px;
	padding:3px 0 2px 0;
	border:1px solid #ccc;
	background-color:#e5e5e5;
	text-align:center;
	border-radius:3px;
	color:#222;
	position:absolute;
	bottom:15px;
	left:150px;
	cursor:pointer;
}
.save-status {
	position:fixed;
	width:800px;
	height:28px;
	top:0;
	left:50%;
	margin-left:-400px;
	margin-top:0 !important;
	padding-top:4px;
	border-radius:4px;
	text-align:center;
	font-size:14px !important;
	font-weight:bold;
	color:#333 !important;
	z-index:999;
	display:none;
}
.save-status.error { background-color:#F00; }
.save-status.success { background-color:#0F0; }
.error-status {
	position:fixed;
	max-width:600px;
	top:10px;
	left:50%;
	transform:translateX(-50%);
	margin-top:0 !important;
	padding:10px 16px;
	border-radius:8px;
	text-align:center;
	font-size:14px !important;
	font-weight:500;
	color:#a12622 !important;
	background-color:#fdecea;
	border:1px solid #f5c6c3;
	box-shadow:0 2px 8px rgba(0,0,0,0.15);
	z-index:999;
	display:none;
}
/***************************************************** LINKS GLOBAL ***********************************/
* { box-sizing:border-box; }
a {
	color: var(--c-primary, #2563eb);
  	text-decoration:none;
}

a:visited { 
	text-decoration:none;
	color: var(--c-primary, #2563eb);
}
a:hover {
	text-decoration: none;
}
a.small-btn {
	display:block;
	width:21px;
	height:21px;
	margin-left:4px;
	background-repeat:no-repeat;
	background-position:center;
	background-size:18px;
	opacity:0.7;
}
a.small-btn.plus {
	background-image:url(../images/plus_3.png);
	opacity:0.4;
}
a.small-btn.edit {
	background-image:url(../images/edit_normal.png);
	background-size:17px;
}
a.small-btn.save {
	background-image:url(../images/save.png);
	background-size:17px;
}
a.small-btn.cancel {
	background-image:url(../images/cancel.png);
	background-size:21px;
}
a.small-btn.calculate {
	background-image:url(../images/calculator.png);
}
a.small-btn.search {
	background-image:url(../images/search_white.png);
	background-size:16px;
}
a.small-btn.history {
	background-image:url(../images/history.png);
	height:18px;
	width:18px;
}
a.small-btn.add {
	background-image: url(../images/icons/add_v1.png);
	background-size:21px;
}
a.small-btn.add-all {
	background-image: url(../images/icons/add_all_v1.png);
	background-size:21px;
}
a.small-btn.print {
	background-image:url(../images/print.png);
}
a.small-btn.history {
	background-image:url(../images/history.png);
}
a.small-btn.list {
	background-image:url(../images/list.png);
}
a.small-btn.print:hover {
	background-image:url(../images/print_red.png);
}
a.small-btn.link {
	background-color:var(--c-primary, #2563eb);
	border-radius:4px;
	opacity:0.8;
}
a.small-btn.barcode {
	background-image:url(../images/barcode_v2.png);
}
a.small-btn.import {
	background-image:url(../images/icons/import_v2.png);
	opacity: 0.7;
}
a.small-btn.refresh {
	background-image:url(../images/refresh_1.png);
}
a.small-btn.sms {
	background-image:url(../images/sms_icon_black.png);
	width:25px;
	height:25px;
	background-size:25px;
	opacity:1;
}
a.small-btn.sms.sent {
	background-image:url(../images/sms_icon_red.png);
}
a.small-btn:hover {
	cursor:pointer;
	opacity:1;
}
a.small-btn.black { 
	opacity:0.7;
} 
a.small-btn.black:hover {
	opacity:0.9;
}
a.small-btn.hidden { display:none; }
/* #btnAddExam only, not the shared .small-btn base - it's the add-exam
   button at the bottom of the exam list (VisitExams/PatientRequest) and was
   too small/faint to notice next to the search box. */
#btnAddExam {
	width:30px;
	height:30px;
	background-size:24px;
	opacity:0.7;
}
/***************************************************** INPUTS GLOBAL **********************************/
.w20 { width:20px !important; }
.w30 { width:30px !important; }
.w40 { width:40px !important; }
.w50 { width:50px !important; }
.w60 { width:60px !important; }
.w70 { width:70px !important; }
.w80 { width:80px !important; }
.w86 { width:86px !important; }
.w90 { width:90px !important; }
.w100 { width:100px !important; }
.w120 { width:120px !important; }
.w130 { width:130px !important; }
.w140 { width:140px !important; }
.w150 { width:150px !important; }
.w160 { width:160px !important; }
.w170 { width:170px !important; }
.w180 { width:180px !important; }
.w200 { width:200px !important; }
.w250 { width:250px !important; }
.w300 { width:300px !important; }
.w340 { width:340px !important; }
.w350 { width:350px !important; }
.w400 { width:400px !important; }
.w450 { width:450px !important; }
.w500 { width:500px !important; }
.w600 { width:600px !important; }
.w650 { width:650px !important; }

.h30 	{ height:30px !important; 	}
.h40 	{ height:40px !important; 	}
.h50 	{ height:50px !important; 	}
.h80 	{ height:80px !important; 	}
.h90 	{ height:90px !important; 	}
.h100 	{ height:100px !important; 	}
.h120 	{ height:120px !important; 	}
.h150 	{ height:150px !important; 	}
.h200 	{ height:200px !important; 	}
.h250 	{ height:250px !important; 	}
.h300 	{ height:300px !important; 	}
.h335 	{ height:335px !important; 	}

.w100percent 	{ width:100% !important;	}
.w90percent 	{ width:90% !important;		}
.w85percent 	{ width:85% !important;		}
.w80percent 	{ width:80% !important;		}
.w75percent 	{ width:75% !important;		}
.w67percent 	{ width:67% !important;		}
.w50percent 	{ width:50% !important;		}
.w45percent 	{ width:45% !important;		}
.w40percent 	{ width:40% !important;		}
.w33percent 	{ width:33% !important; 	}
.w30percent 	{ width:30% !important; 	}
.w25percent 	{ width:25% !important; 	}
.w20percent 	{ width:20% !important; 	}
.w17percent 	{ width:17% !important; 	}
.w15percent 	{ width:15% !important; 	}
.w12percent 	{ width:12.5% !important; 	}
.w10percent 	{ width:10% !important; 	}
.w8percent 		{ width:8% !important; 		}
.w5percent 		{ width:5% !important; 		}

.mt20 { margin-top:20px !important; }
.mt10 { margin-top:10px !important; }
.mb10 { margin-bottom:10px !important; }


.center { text-align:center; }
.right { text-align:right; }
.bold { font-weight: bold; }
.black { color:#333 !important; }
.hidden { display:none !important; }
.f-left { float:left; }
.f-right { float:right !important; }
.f-none { float:none !important; }
.all-over {
	position:fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
	z-index:100;
	background: rgba(0, 0, 0, 0.5);
}
.clear {
	display:block;
	clear:both;
	float:none;
}
.error {
	margin-top:10px;
	font-size:13px;
	color:red;
}
.no-margin { margin:0 !important; }
.no-border { border:none !important; }
.no-padding { padding:0 !important; }
label { display:block; }
input {
	color: #222;
    border: 1px solid #e1e3e5;
	height: 30px;
    padding: 5px 6px;
	margin: 0;
    border-radius: 6px;
    font-family: "Inter", sans-serif;
	font-weight: 400;
	font-size: 15px;
	background-color: #fff;
}
input:not(:placeholder-shown) {
    background-color: #f9fbfc;
}
input:read-only {
	background-color:#EEE;
}
input.locked {
	background-color:#EEE;
}
input.number { text-align:right; }
input[type=date] {
	padding:0px 2px 1px;
}
input[type=date].simple { font-size:12px; }
input[type=date].simple::-webkit-inner-spin-button {
    -webkit-appearance: none;
    display: none;
}
input[type=date].simple::-webkit-calendar-picker-indicator {
    -webkit-appearance: none;
    display: none;
}
input[type=time] {
	font-size:12px;
}
input[type=file] {
	width:auto !important;
	max-width:260px;
	height:36px;
	padding:0;
	font-size:13px;
	overflow:hidden;
}
/* The native "Choose File" segment renders as an OS-styled gray button that
   clashes with the app's own button look - restyle it (standard property
   plus the older webkit-only pseudo-element some engines still need) to
   match input.button instead. */
input[type=file]::file-selector-button,
input[type=file]::-webkit-file-upload-button {
	height:36px;
	margin-right:10px;
	padding:0 16px;
	border:none;
	border-right:1px solid #e1e3e5;
	background-color:#fff;
	color:var(--left-menu-text-color);
	font-family:"Inter", sans-serif;
	font-weight:500;
	font-size:13px;
	cursor:pointer;
}
input[type=file]:hover::file-selector-button,
input[type=file]:hover::-webkit-file-upload-button {
	background-color:var(--left-menu-bg-color);
}
input.file-desc {
	height: 27px;
    width: 300px !important;
    margin-left: 5px;
}
select {
	height: 23px;
	color: #222;
    border:1px solid #e1e3e5;
    padding: 2px 2px;
    border-radius: 6px;
	background-color: #fff;
	font-family: "Inter", sans-serif;
	font-weight: 400;
	font-size: 15px;
}
select:has(option:checked:not([value="0"])) {
    background-color: #f9fbfc;
}

select:disabled { background-color:#EEE; }
input.submit, input.button {
	height: 36px;
    min-width: 80px;
    padding: 8px 25px;
	color: #fff;
    cursor: pointer;
    text-align: center;
    font-weight: 500;
	font-size: 17px;
	border-radius: 10px;
}
input.submit {
	color:#fff;
	background-color: var(--button-mainbg-color);
	opacity: 0.7;
}
input.submit:hover {
	border:none;
	opacity:1;
	outline:none !important;
	outline-offset: 0 !important;
}
input.button {
	color:var(--left-menu-text-color);
	background-color: #fff;
}
input.button:disabled, input.submit:disabled {
	background-image: -webkit-linear-gradient(top, #ccc , #888);
}
input.button.taxed { 
	color:#F91A1D;
	text-shadow:none;
}
input.button.template {
	background-color: #fcad03;
	background-image: -webkit-linear-gradient(top, #fcad03, #cf7208);
}
input[type="text"]:disabled { background-color:#EEE !important; }
input[type="date"]:disabled { background-color:#EEE !important; }
textarea:disabled { background-color:#EEE !important; }
.cke_editor_examDesc {
	border:none !important;
	padding:0px !important;
}
.cke_editor_echoDesc {
	display:block;
	float:left;
	border:none !important;
	width:655px;
}
.cke_editor_tReport {
	border:none !important;
	padding:0px !important;
}
.section-tree {
	border:none;
	margin-left:10px;
	padding:0px;
}
/**************************************************** main divs ***************************************/
.global-container {
	display:block;
	overflow:auto;
	min-height:700px;
	width:100%;
	margin:0;
	background-color: var(--left-menu-color);
}
.container { /* olsi nuk e di a duhet kjo */
	width:100%;
	margin:0 auto;
}
.left-container {
	display:block;
	width:var(--left-menu-width);
	background: var(--left-menu-color);
	margin:0;
	padding:10px;
	float: left;
}
.main-container {
	display:block;
	width: var(--main-container-width);
	background:transparent; /* :#fff; */
	padding:0px;
	margin:0;
	border-top-left-radius: 15px;
	border-radius: 15px;
	padding-right: 10px;
	padding-bottom:20px;
	float:left;
}
.right-container {
	display:block;
	width:15%;
	background:#FDFDFD;
	margin:0;
	padding:10px;
	float: left;
}
.content-col { position:relative; }
/***************************************************** top div *****************************************/
.top-container {
	position:relative; 
	display:block;
	width:100%; 
	height: 50px;
	color:#ddd;
	background-color:var(--left-menu-color); /* olsi temp */
	text-align: center;
	overflow: visible;   /* let the search results drop below the bar */
	z-index: 100;
}
.top-container .edoc-logo {
	width: var(--left-menu-width);
	height: 100%;
    font-size: 30px;
	font-style:italic;
    color:#fff;
	background-color: var(--left-menu-color);
	position: relative;
	float: left;
}
.top-container .edoc-logo a {
	display:block;
	margin:0;
	text-decoration:none;
	color:var(--button-mainbg-color);
	text-align: left;
	padding-left: 15px;
	padding-top: 10px;
}
.top-container .edoc-logo a:hocer {
	text-decoration:none;
}
.top-container .edoc-logo span {
	color:var(--button-mainbg-color);
}
.top-container .quick-links { display:none; 
	float:left;
	width:300px;
	position:relative;
	margin:12px 0 0 50px;
}
.top-container .top-content {
	display: flex;
	position: relative;
	width: var(--main-container-width);
	height: 100%;
	float:left;
	justify-content: center;
  	align-items: center; 
}
.top-container .menu-title {
	font-size: 20px;
	font-weight: 600;
	color: var(--left-menu-text-color);
	position:absolute;
	left: 0px;
}
/***************************************************** search div **************************************/
.search-container {
	background-color: transparent;
    position: relative;
    width: 30%;
	height: 100%;
}

.search-container .mobile-menu { display:none; }
.search-container .search-div {
	float:right;
	width:100%;
	position:relative;
	margin:8px auto 0;
}
.search-container .search-input {
    display: block;
	width: 100%;
    height: 34px;
    line-height: 34px;
    background: #fff url(../images/search.png) no-repeat 8px 9px;
    font-size: 17px;
    text-indent: 30px;
    border-radius: 17px;
    border: 1px solid #bbb;
    padding: 0;
	outline:none;
	float:right;
}
.search-container .search-type { 
	position: absolute;
    z-index: 2;
    top: 4px;
	right: 5px;
    height: 26px;
    width: 80px;
    padding: 0 0px;
    margin: 0 0 0 5px;
    display: none; 
}
.search-container .search-button {
	position: absolute;
	display: block;
    z-index: 2;
    top: 4px;
	right: 6px;
    height: 27px;
    width: 80px;
    padding: 6px 22px;
    margin: 0 0 0 5px;
	color: #fff;
    cursor: pointer;
    text-align: center;
    font-weight: bold;
    background-color: #399;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
	border: 1px solid #bbb;
	border-radius: 3px;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
	background-image: -webkit-linear-gradient(top, #3CC, #399);
}
.search-div .search-list {
	position:absolute; 
	display:none;
	left:0; 
	top:34px;
	width:100%;
	border:1px solid #ddd;
	border-bottom:none; 
	background-color:#fafafa;
	font-size:14px;
	z-index:1000;
	-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.4);
	-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.4);
	box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.4);
}
.search-div .search-item {
	box-sizing:border-box;
	padding:5px 6px;
	font-weight:normal;
	width:100%;
	border-bottom:1px solid #eee;
	cursor:pointer;
}
.search-div .search-item:hover {
	background-color:#eee;
}
.search-div .search-item span.patient {
	font-size:15px;
}
/* Rounded results box, left-aligned plain dark names */
.search-div .search-list { border-radius:10px; overflow:hidden; text-align:left; }
.search-div .search-item span.patient,
.search-div .search-item span.patient * { font-weight:normal; color:#222; }
.search-div .search-item span.age {
	font-size:12px;
	color:#888;
}
.search-div .search-item a.lastvisit {
	display:block;
	float:right;
	font-size:13px;
}
.quick-links .shortcut {
	display:block;
	width:36px;
	height:34px;
	/*border-radius:5px;
	border:1px solid #eee; */
	float:left;
	margin-right:10px;
	background-size:34px;
	background-repeat:no-repeat;
	background-position:center;
	/* opacity:0.6; */
}
.quick-links .shortcut:hover { opacity:0.7; }
.quick-links .new-patient { 
	background-image:url(../images/new_ptn_v4.png); 
}
.quick-links .show-calendar {
	background-size:31px;
	background-image:url(../images/calendar_v2.png); 
}
.quick-links .ax-todo {
	background-image:url(../images/test_tube_v1.png);
}
.quick-links .ax-barcode {
	background-size:32px;
	background-image:url(../images/barcode_v2.png);
}
.quick-links .go-report {
	background-image:url(../images/report_v3.png);
}
/**************************************************** logged info ***********************************/
.logged-container {
	position:relative;
	margin:0;
	color:var(--left-menu-text-color);
	font-size:14px;
	width: auto;
	position: absolute;
	right:10px;
}
.logged-container .links a {
	display: block;
	float:right;
    font-size: 15px;
    font-weight: 500;
	height: 22px;
	width: 22px;
	background-position:center;
	background-repeat:no-repeat;
	background-size:20px;
	color:var(--left-menu-text-color);
	padding: 0 10px;
}
.logged-container .links a.message {
	width: 30px;
	background-image: url(../images/icons/email_v2.png);
}
.logged-container .links a.logout {
	background-size: 22px;
	background-image:url(../images/icons/logout_v1.png);
}
.logged-container .links a.logout:hover {
	background-image: url(../images/icons/logout_v1_red.png);
}
.logged-container .links a.username {
	width: auto;
	padding-right: 5px;
	padding-top: 1px;
}
.logged-container .links a.date {
	width: auto;
}
/**************************************************** left navigator ***********************************/
.left-nav {
	margin:0;
	padding:0;
	list-style:none;
  	font-weight: 400;
  	font-style: normal;
}
.left-nav li {
	background: transparent;
	font-size: var(--left-menu-text-size); 
}
.left-nav li ul {
	list-style-type:none;
	padding-left:25px;
}
.left-nav li a {
	display:block;
	position:relative;
	padding: 6px 10px;
    cursor: pointer;
    display: block;
    border-radius: 7px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
	color:var(--left-menu-text-color);
	border-radius: 4px;
}
.left-nav li a.root {
	padding-left:28px;
	/* background-image: url(../images/menu/tools_normal.png); */
	background-repeat: no-repeat;
	background-size: 18px;
	background-position: 4px 6px;
}
.left-nav li a:hover {
	color:#38373a;
	text-decoration: none;
	font-weight: 500;
}
.left-nav li a.active {
	color:#38373a;
	background-color:var(--left-menu-bg-color);
	border-style: solid;
	border-color: #e3e5e6;
	border-width: 2px;
	border-radius: 8px;
	font-weight: 600;
	padding:8px 10px;
}
.left-nav li a.active.root {
	padding-left: 28px;
}
.left-nav li a.active:after{
  content: "";
  position: absolute;
  right: 15px;
  top: 12px;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-right: 2px solid #e3e5e6;
  border-bottom: 2px solid #e3e5e6;
  transform: rotate(-45deg);
}
.left-nav li ul { display:none; }
.left-nav li.expanded > a {
	color:#38373a;
	font-weight: 600;
}
.left-nav li.expanded > ul { display:block; }
/*********************************************** FILTER DATA *************************************/
.filter-data {
	position:relative;
}
/* Variant for a .filter-data that also has a trailing small-btn (e.g. "add"),
   not just the input + dropdown. Without this, the input's own width:100%
   leaves no room for the button - a.small-btn's display:block (needed for
   plain standalone icon links elsewhere) then makes it overflow past the
   column edge instead of sitting cleanly inside it, the same class of bug
   .refer-data had. Also drops the input's baked-in search-icon background,
   since a dedicated add button right next to it makes that icon redundant
   clutter rather than a useful affordance. */
.filter-data-with-add {
	display:flex;
	align-items:center;
	gap:4px;
}
.filter-data-with-add .filter-input {
	width:auto !important;
	flex:1 1 auto;
	min-width:0;
	background-image:none !important;
}
.filter-data .filter-list {
	position:absolute;
	display:none;
	left:0;
	top:32px;
	width:100%;
	border:1px solid #ddd;
	border-bottom:none;
	background-color:#fff;
	font-size:14px;
	z-index:2;
	-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.4);
	-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.4);
	box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.4);
}
.filter-data .filter-item {
	box-sizing:border-box;
	padding:9px 12px;
	font-weight:normal;
	width:100%;
	border-bottom:1px solid #ddd;
	cursor:pointer;
}
.filter-data .filter-item:hover {
	background-color:#eee;
}
.filter-data .filter-item.active {
	background-color:#ddd;
}
.filter-data .filter-input {
	width:100%;
	background-image:url(../images/ico_search.png);
	background-repeat:no-repeat;
	background-size:12px;
	background-position:97% 9px;
}
.filter-data .filter-input.light {
	background-image:url(../images/ico_search_light.png);
}
.filter-data .filter-input.filled {
	background-color:#F4EFAC;
}
.filter-data .filter-input:disabled {
	background-color:#EEE;
}
.filter-data .filter-other:disabled {
	background-color:#EEE;
}
.filter-data .small-btn {
	margin-top:-2px;
}
/*********************************************** PATIENT OR VISIT EXISTS **************************/
.record-exist {
	border:1px dashed #F00;
	border-radius:5px;
	padding:5px;
	margin-bottom:20px;
}
.record-exist p.warning {
	color:#f00;
	font-weight:bold;
}
.record-exist p.explain {
	font-style:italic;
	margin-top:-10px;
}
.record-exist .item-table tfoot td { height:1px; }

/*********************************************** REFER DATA ***************************************/
/* The input and the save/cancel icons are flex-laid-out in a row - without
   this, a.small-btn's own display:block (needed elsewhere for plain icon
   links) makes each icon wrap onto its own line below the input instead of
   sitting beside it. */
.refer-data {
	display: flex;
	align-items: center;
	gap: 4px;
}
/*********************************************** DATA ENTRY FORM **********************************/
fieldset {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: flex-start;
	position:relative;
	text-align:left;
    padding:10px;
	border-radius:15px;
	background-color: #fff;
	border:none;
}
/* A <fieldset> defaults to min-width:auto (min-content) even with an explicit
   width set, so a nested fieldset used as a flex item won't shrink to its
   percentage width and wraps to its own row instead of sitting beside its
   sibling. Force it to respect the width like any other flex item. */
fieldset.general > fieldset { min-width: 0; }
fieldset.grey { background-color:#f8f8f8; }
/* width:100%: fieldset.view is a flex item inside its parent fieldset's
   implicit flex row (fieldsets never got a display:block override), so
   without an explicit full-row width, a short one (e.g. an analiza group
   with few rows) leaves enough space for the next sibling fieldset.view to
   sit beside it instead of stacking below - e.g. two analiza group cards
   ("Biokimike", "GJAK KOMPLET") rendering their legends on the same line. */
fieldset.view {
	width:100%;
	margin:20px 0 0;
	padding:10px 0 0;
	border:none;
	border-radius:0px;
	border-top:1px solid #ddd;
}
fieldset.subview {
	background-color:#fafafa !important;
}
fieldset.visit {
	width:100%;
	margin-top:30px;
}
/* A <legend> straddles its fieldset's top border by default, and since the
   card has no border (just a white rounded box), half the legend renders
   above the card on the page's gray background - it reads as a separate
   floating chip instead of a card header. Shift it down so it sits fully
   inside the card. */
fieldset.collapsible:not(.collapsed) > legend,
fieldset.bx-results:not(.collapsed) > legend {
	position:relative;
	top:20px;
	margin-bottom:5px;
}
fieldset.ros {
	margin-bottom:20px;
}
fieldset.analize {
	padding:0 5px;
	margin-bottom:10px;
}
fieldset.submit { 
	border:none;
	margin-top:20px;
	background-color: transparent !important;
	padding: 0;
}
fieldset.payments, 
fieldset.invoice-notes, 
fieldset.invoice-totals,
fieldset.invoice-items { 
	width:450px;
	background-color:#f2f7fc;
	padding:2px 5px 5px;
	float:left;
}
fieldset.invoice-items {
	width:100%;
}
fieldset.invoice-items .item-table { margin-bottom:0; }
fieldset.invoice-totals { 
	width:240px; 
	float:right; 
}
fieldset.invoice-totals.subview { width:300px; }
fieldset.payments legend, 
fieldset.invoice-notes legend,
fieldset.invoice-totals legend { 
	margin-left:5px; 
}
fieldset.invoice-notes span {
	max-width:92%;
	font-weight:bold;
	float:left; 
}
fieldset.invoice-notes textarea { 
	width:350px;
	margin-right:5px;
	float:left;
}
fieldset.rx-items {
	width:100%;
	background-color:#f2f7fc;
	padding:2px 5px 5px;
}
fieldset legend a {
	color: var(--c-primary, #2563eb); /* e93a00 */
	font-size: 14px;
	font-weight: bold;
	padding-left: 20px;
    background: url('../images/menu-expanded.png') 5px 75% no-repeat;
}
fieldset legend a.no-drop {
	padding-left:5px;
	background: none;
}
fieldset legend a:hover { 
	color:var(--c-primary, #2563eb); 
	cursor:pointer; 
}
fieldset legend a:visited { text-decoration:none; }
fieldset.view legend { 
	font-size:14px;
	font-weight:bold;
	padding: 0 5px 0 0;
	color:#399; /* kjo duhet ndryshuar sipas invoice/exams/analiza etj... */
}
fieldset.subview legend {
	font-size:13px;
	color:#666;
}
fieldset.static legend { 
	font-size:14px;
	font-weight:bold;
	color:#555; /* kjo duhet ndryshuar sipas invoice/exams/analiza etj... */
}
fieldset.warning {
	border-color:#F00;
}
fieldset.warning legend {
	color:#f00;
}
fieldset.collapsed {
	position:relative;
	padding: 0 10px;
    margin: 15px 0 15px;
    background-color: transparent !important;
    border-bottom-width: 0;
    border-left-width: 0;
    border-right-width: 0;
    height: 1em;
}
/* !important: same specificity as `fieldset .form-item { display:block; }`,
   and without it the later rule wins the cascade, leaving collapsed content
   visible (e.g. AnalizaSettings' "Prints" section). */
fieldset.collapsed * { display:none !important; }
fieldset.collapsed legend { display:block !important; }
fieldset.collapsed legend a {
	display:block !important;
	background-image: url('../images/menu-collapsed.png');
    background-position: 5px 50%;
}
fieldset .quarter-box {
	width:169px;
	float:left;
}
fieldset .quarter-box.first { width:280px; }
fieldset .quarter-box input { width:124px; }
fieldset .quarter-box .list {
	width:150px;
	height:150px;
	margin-top:5px;
}
fieldset .left-box {
	width:50%;
	display: flex;
	flex-direction:rows;
	flex-wrap: wrap;
	align-items: flex-start;
}
fieldset .right-box {
	width:50%;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: flex-start;
}
fieldset .right-box.list {
	padding-left:100px;
}
fieldset .left-third-box {
	width:40%;
	float:left;
}
fieldset .right-third-box {
	width:30%;
	float:left;
}
/* position:absolute so it sits in the corner instead of claiming a full row.
   A <legend> is laid out above the fieldset's flex content regardless of the
   fieldset's own display, so the content box (and this absolute box, which
   shares the same containing block) starts right after the legend - the
   fieldset.view/fieldset.general:has() rules below reserve enough top
   padding for this element's own height so the content that follows (the
   analiza results table, .left-box/.right-box, ...) never renders under it. */
fieldset.view .quick-links,
fieldset.general .quick-links {
	position:absolute;
	display:block;
	top:0px;
	right:14px;
	font-size:14px;
}
fieldset.view:has(> .quick-links) {
	padding-top:34px;
}
fieldset.general:has(> .quick-links) {
	padding-top:34px;
}
fieldset .content {
	overflow:auto;
}
fieldset .content.fill {
	width:665px;
	background-color: #f6f6f6;
    border: 1px solid #f1f1f1;
    border-radius: 5px;
    padding: 4px;
}
fieldset .form-item {
	position:relative;
	display: block;
	margin-bottom: 5px;
    padding: 5px;
}
fieldset .form-item label {
	display: block;
}
fieldset .form-item input {
	width: 100%;
}
fieldset .form-item .small-btn {
	height:28px;
	width:28px;
	background-size: 26px;
}
/* fieldset.static is the read-only "info card" pattern (patient details,
   etc.) - it reuses .form-item/label from the editable-form pattern above,
   where the label sits on its own line over an input. For a plain value
   there's no input to sit over, so label-above-value just doubles the line
   count and leaves label/value looking identical. Lay them out on one line
   instead, with the label muted and narrower than the value. */
fieldset.static .form-item {
	display:flex;
	align-items:baseline;
	gap:10px;
	width:100%;
	flex:1 0 100%;
	font-size:15px;
}
fieldset.static .form-item label {
	display:inline-block;
	width:150px;
	flex:0 0 150px;
	margin-bottom:0;
	color:#8993a4;
	font-size:14px;
	font-weight:400;
}
/* Invoice header line ("Nr : x / Date e regj: y / ..."): shared with the
   unstyled print popup, which relies on <i>/<b> alone to tell label from
   value - here (main_desktop.css isn't loaded by the print popup) give the
   label the same muted, non-italic treatment as the other read-only labels
   instead of the browser's default italic, and the value a smaller, plain
   (not bold) but darker weight so it reads as data, not a heading. */
.ivc-label,
.ivc-value {
	font-size:14px;
	font-style:normal;
	font-weight:400;
}
.ivc-label {
	color:#8993a4;
}
.ivc-value {
	color:#333;
}


/* Bare fallback: .form-title is used on ~90 pages, most with no .form-entry/
   .view-entry/etc. wrapper around it (e.g. VisitForm::show_title(), printed
   directly with no ancestor class) - without this it rendered as plain
   unstyled text. The scoped rules below stay for pages that intentionally
   override it independently of this default. */
.form-title {
	width: 100%;
	font-size:18px;
	font-weight:600;
	color:var(--left-menu-text-color);
	margin:5px 0 10px 5px;
}
/********************************************** FORM ENTRY *********************************/
.form-entry .form-title {
	width: 100%;
	font-size:18px;
	font-weight:600;
	color:var(--left-menu-text-color);
	margin:5px 0 10px 5px;
}
/* .underlinks otherwise inherits .form-title's 18px/600 heading style since
   <a> doesn't reset font-size/weight - it needs its own, smaller, normal-
   weight style so the action links don't read as a second heading. */
.form-entry .form-title .underlinks {
	font-size:15px;
	font-weight:400;
	margin-top:4px;
}
/******************************************** VIEW ENTRY ************************************/
/* Read-only record header + card (e.g. the patient details page): kept
   separate from .form-entry (real editable forms with inputs/selects/etc.)
   so the two can be restyled independently - .form-view was already taken
   by the exams module's fixed-width detail view, so this is a new name. */
.view-entry .form-title {
	width: 100%;
	font-size:18px;
	font-weight:600;
	color:var(--left-menu-text-color);
	margin:5px 0 10px 5px;
}
.view-entry .form-title .underlinks {
	font-size:15px;
	font-weight:400;
	margin-top:4px;
}
.form-entry .form-info {
	font-size: 13px;
	color:#999;
	padding-left: 10px;
	font-style: italic;
	border-left:1px solid #ccc;
}
.form-entry.half {
	width:370px;
	float:left;
}
.form-entry.half.second {
	width:420px;
	margin-left:20px;
}
.form-entry.one-third {
	width:290px;
	float:left;
}
.form-entry.two-third {
	width:510px;
	margin-left:10px;
	float:left;
}
.form-entry.two-third .left-box { width:265px; }
.form-entry.two-third .right-box { width:220px; }
.form-entry label, .form-view label, fieldset label {
	display:block;
	width:100%;
	text-align: left;
    word-wrap:normal;
    margin-bottom: 5px;
    font-weight: 400;
    font-size: 13px;
    color: #8a929b;
}
fieldset label.pmt-type { width:50px !important; }
.form-entry label.check {
	width:80px;
	font-weight:normal;
}
.form-entry label.check.echo {
	width:auto;
	margin-right:10px;
}
.form-entry label.ros-check {
	width:185px;
	float:none;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
}
.form-entry label.one-four { display:inline-block; width:55px; text-align:center; }
/* Lets the "Krahasimi" label and its blank counterpart in the header row
   above it share a line with the .one-four fields that follow, instead of
   the base fieldset-label block rule pushing those fields onto a new line
   and breaking the header/input column alignment. */
.form-entry label.flag-lead { display:inline-block; width:90px; margin-bottom:0; vertical-align:middle; }
.form-entry label .required {
	color: #F00;
	margin: 0;
    padding: 0;
}
.form-entry input.full {
	width:450px;
}
.form-entry label.checkbox {
	display: flex;
	align-items: center;
	font-weight: 400;
	font-size: 14px;
	height: 30px;
	border:1px solid #e5e5e5;
	padding: 5px 10px;
	border-radius: 6px;
}
.form-entry label.checkbox .check-text {
	min-width: 120px;
}
.form-entry input.checkbox {
	width:16px;
	height:16px;
	margin:0;
	display: inline-flex;
	margin-right: 5px;
}
.form-entry .form-item.options {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
}
.form-entry label.option {
	display: inline-flex;;
	font-weight: 400;
	font-size: 14px;
	height: 32px;
	border:1px solid #e5e5e5;
	padding: 5px 10px;
	border-radius: 6px;
}
.form-entry input.option {
	width:16px;
	height:16px;
	margin:0;
	display: inline-flex;
	margin-right: 5px;
}
.form-entry input.button { width:auto; margin-left:10px; }
.form-entry textarea {
	width:100%;
	color: var(--left-menu-text-color);
    border: 1px solid #bbb;
    padding: 3px 2px;
	background-color: #fff;
    border-radius: 6px;
}
.form-entry textarea.full { width:100%; }
.form-entry textarea.medium { width:420px; }
.form-entry.anamnesis textarea { width:790px; }
.form-entry textarea.small {
	width:100%;
	height:30px;
}
.form-entry .one-four { width:55px; }
.form-entry .two-four { width:80px !important; }
.form-entry .three-four { width:120px; }
.form-entry .five-four { width:200px; }
.form-entry .six-four { width:240px; }
.form-entry .w110 { width:110px !important; }
.form-entry .w322 { width:322px !important; }
.form-entry .w475 { width:475px !important; }
.form-entry select {
	width: 100%;
	height: 30px;
	font-size: 14px;
}
.form-entry.two-third select.list {
	width:200px;
	height:100px; 
}
.form-entry input:hover, 
.form-entry select:hover, 
.form-entry textarea:hover {
	outline: -webkit-focus-ring-color auto 4px; 
	outline-offset: -2px;
}
.form-entry .placeholder {
	position:absolute;
	top:2px;
	left:150px;
	color:#888;
}
.form-entry .placeholder.ages { left:150px; }
.form-entry .placeholder.months { left:210px; }
.form-entry .explain {
	display: block;
	margin: 3px 0 9px 120px;
	color: #555;
	padding: 3px 0 0;
    line-height: 10px;
	clear: both;
}
.form-entry .divider {
	margin-top:3px;
	font-weight:bold;
	padding:0 4px;
}
.form-entry .info {
	display:inline-block;
	padding:3px 0 0 5px;
	font-size:12px;
	font-style:italic;
}
.form-entry .data {
	font-size:12px;
}
.form-entry .small-btn { 
	float:left;
	width:23px;
	height:23px;
	background-size:20px;
}
.form-entry .small-btn.search {
	width:22px;
	height:22px;
}
.form-entry .filter-data {
	width:100%;
	float:left;
}
.form-entry .filter-data.fluid {
	width:100%;
	float:none;
}
.form-entry.two-third .filter-data {
	width:200px;
}
.form-entry.two-third .filter-input { width:200px !important; }
.form-entry .filter-data .small-btn {
	position:absolute;
	float:left;
	top:2px;
	right:0px;
}
.form-entry div.error {
	color:#F00;
	font-weight:bold;
}
.form-entry .form-item {
	width:100%;
}
.exam-desc,
.cke_editor_examDesc {
	width: 100% !important;
}
/* Sits two fieldsets side by side (e.g. AnalizaFill's Mjeku/Shenime card and
   its Uploads card) - fieldsets are plain block children of .form-entry, not
   flex items of it, so without this they just stack full-width instead. */
.form-columns {
	display:flex;
	align-items:flex-start;
	gap:15px;
	width:100%;
}
.form-columns > fieldset {
	flex:1 1 0;
	min-width:0;
	margin-top:20px;
}
/* AnalizaItems' "Vlerat normale"/"Flags" pair are each their own <form>
   (separate submits), not bare fieldsets, so they need the same treatment. */
.form-columns > form {
	flex:1 1 0;
	min-width:0;
	margin-top:20px;
}

/******************************************* FORM VIEW ***********************************/
.form-view { width:800px; }
.form-view .form-item {
	margin-top:2px;
}
.form-view .html-view {
	display:block;
	float:left;
	width:800px;
	overflow:auto;
	background-color:#fafafa;
	border:1px solid #f1f1f1;
	border-radius:5px;
	padding:4px;
	overflow-wrap: anywhere;
}
.form-view .html-view p {
	margin:0 0 5px;
}
.form-view .html-view.small { width:665px; }
.form-view .dr-list {
	display:block;
	float:left;
}
.form-view .dr-add {
	display:block;
	float:left;
	margin-left:10px;
}
.form-view .dr-add .small-btn { height:20px; background-size:20px; } 
.form-view .dr-add select { height:21px; }
.form-view .dr-list a { font-weight:bold; }

/******************************************* FILTER FORM *********************************/
.form-filter {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: flex-start;
	position:relative;
	text-align:left;
    padding:10px;
	padding-right:50px;
	border-radius:15px;
	background-color: #fff;
	border:none;
}
.form-filter .form-title {
	width: 100%;
        font-size: 18px;
        font-weight: 600;
        color: var(--left-menu-text-color);
        margin: 5px 0 10px 5px;
}
.form-filter .form-item {
	position: relative;
    display: block;
    margin-bottom: 5px;
    padding: 5px;
}
.form-filter .filter-button {
	position: absolute;
	top: 0;
	right: 0;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: 0;
	overflow: visible;
}
.form-filter .filter-button label { display: none; }
.form-filter input[type=date] { width: 100%; }
.form-filter input[type=text] { width:100%; }
.form-filter label {
	display: block;
	width: 100%;
    text-align: left;
    white-space: nowrap;
    margin-bottom: 5px;
    font-weight: 400;
}
.form-filter label.checkbox {
	display: flex;
    align-items: center;
    font-weight: 400;
    font-size: 14px;
    height: 30px;
    border: 1px solid #e5e5e5;
    padding: 5px 10px;
    border-radius: 6px;
	overflow: hidden;
}
.form-entry .option-row,
.form-filter .option-row {
	display: flex;
	gap: 10px;
}
.form-filter input.option {
	width: 16px;
    height: 16px;
    margin: 0;
    display: inline-flex;
    margin-right: 5px;
}
.form-filter select {
	width: 100%;
	height: 30px;
	font-size: 14px;
}
.form-filter .filter-data {
	width:100%;
}
.form-filter .filter-data.article {
	width:282px;
}
.form-filter .filter-data.article input[type=text] { width:100%; }
.form-filter .search {
	width:30px;
	height:30px;
	border:none;
	background-image: url(../images/icons/search_v2.png);
    background-size: 30px;
	background-repeat:no-repeat;
	background-position:center;
	background-color: transparent;
	cursor: pointer;
	opacity: 0.8;
	position: absolute;
	top: 74px;
	right: 15px;
}
.form-filter .search:hover { opacity:1; }
.form-filter .barcode {
	width:26px;
	height:23px;
	border:none;
	border-radius:4px;
	background-color: var(--c-primary, #2563eb);
	background-image: url(../images/barcode_white.png);
    background-size: 19px 16px;
	background-repeat:no-repeat;
	background-position:center;
	margin-left:3px;
	opacity: 0.8;
}
.form-filter .barcode:hover { opacity:1; }
.form-filter .print {
	position:relative;
	width:72px;
	height:23px;
	border:none;
	border-radius:4px;
	background-color: var(--c-primary, #2563eb);
	background-image: url(../images/print_white.png);
    background-size: 16px;
	background-repeat:no-repeat;
	background-position:46px center;
	color:#FFF;
	text-align:left;
	padding-left:8px;
	margin-left:7px;
	top:-7px;
	opacity: 0.8;
}
.form-filter .print:hover { opacity:1; }
/******************************************* TOP TABS ************************************/
.head-tab, .head_sub_tab {
	position:relative;
	float:left;
	width:100%;
	padding:0;
	margin:10px 0 5px;
	list-style:none;
}
.head-tab.endo, .head-sub-tab.endo { margin-bottom:5px; }
.head-tab li, .head_sub_tab li {
	float:left;
	margin:0 1px 0 0;
	padding:0;
	height:32px;
}
.head-tab a, .head_sub_tab a {
	font-size: 14px;
	font-weight: bold;
	padding: 7px 15px;
    margin: 0 3px 0 0;
    color: #fff;
    background-color: #999;
    border-color: #777;
    border-radius: 6px;
}
.head-tab a:hover, .head_sub_tab a:hover {
	background-color:var(--c-primary, #2563eb); /*e93a00; */
	text-decoration:none;
	cursor:pointer;
}
.head-tab a.active, .head_sub_tab a.active {
	background-color:var(--c-primary, #2563eb); /* e93a00; */
} 

/************************************************* ANALIZA **************************************/
.analiza-head {
	background-color: #fff;
	border-radius: 15px;
	padding: 15px 15px 5px;
	margin-bottom: 10px;
}
/* .analiza-head sits as a sibling before <form class="form-entry">, not nested
   inside it, so the .form-entry .form-title rule never matches here - give it
   the same heading treatment directly instead of relying on that ancestor. */
.analiza-head .form-title {
	width: 100%;
	font-size: 18px;
	font-weight: 600;
	color: var(--left-menu-text-color);
	margin: 0 0 12px;
}
.head-tab-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 8px;
}
.head-tab-row .head-tab { margin: 0; }
.head-tab-actions {
	display: flex;
	align-items: center;
	gap: 15px;
	margin-bottom: 10px;
}
.head-tab-actions a {
	font-size: 12px;
	font-weight: 500;
	color: var(--left-menu-text-color);
	text-decoration: underline;
	cursor: pointer;
}
.ax-form input {
	width:100px;
	float:none;
}
.ax-form thead td, .ax-view thead td { 
	color:#777;
	font-style:italic;
	border-bottom:none !important;
}
.ax-form tr, .ax-form td,
.ax-view tr, .ax-view td { 
	border-color:#eee !important; 
}
.ax-view .ax-desc { font-size: 13px; }
.ax-view td.ax-desc { font-size:12px; }
.ax-view tr.i_larte td.ax-value,
.ax-view tr.e_larte td.ax-value,
.ax-view tr.i_ulet td.ax-value,
.ax-view tr.e_ulet td.ax-value {
	font-weight:bold;
}
.ax-view tr.i_larte td.ax-name,
.ax-view tr.e_larte td.ax-name,
.ax-view tr.i_ulet td.ax-name,
.ax-view tr.e_ulet td.ax-name {
	font-weight:bold;
}
.ax-form tr:hover, .ax-view tr:hover{
	background-color:#fafafa !important;
}
.ax-form td.vlera { padding-right:38px; }
.ax-barcode thead td {
	border-bottom-color:#bbb !important; 
}
.ax-barcode tbody tr, .ax-barcode tbody td {
	border:none !important;
}
.ax-barcode tbody td.dif-block {
	border-top:1px solid #bbb !important;
}
.ax-barcode tbody td.dif-visit {
	background-color:#aaa;
	height:1px;
	padding:0;
}
.ax-form .cbc-images img {
	width:10%;
	padding:1px;
}
.ax-form .ax-desc { font-size: 13px; color:#888; }
/************************************************* MIKROBIOLOGJI **************************************/
/* Metoda e perdorur / Rezultati / Ekzaminimi / Kampioni sit on one row -
   flex-grow:1 0 100% claims the whole row (so Organizmi shkaktar right after
   it always wraps to its own line below, the same "claim the row" trick
   used for .quick-links elsewhere), and the four fields split it 50/20/20/20
   via flex-grow ratios rather than literal widths, since 50%+20%*3 adds up
   to more than 100% as plain widths. */
.bx-results .form-row {
	display:flex;
	flex-wrap:wrap;
	flex:1 0 100%;
	gap:15px;
	width:100%;
}
.bx-results .form-row .form-item {
	width:auto;
	flex-basis:0;
	flex-grow:20;
}
.bx-results .form-row .form-item.bx-metoda { flex-grow:50; }
.bx-results .item-table {
	margin-top:5px;
	width:100%;
}
.bx-results .item-table tfoot,
.bx-results .item-table tfoot tr { border-top:none; }
.bx-results .item-table tfoot td { padding:0; }
.bx-results .filter-other { width:60px; }
.bx-results .filter-other:disabled {
	background-color:#EEE;
}
.bx-results .small-btn {
	float:none;
	margin-left:6px;
}

/* fieldset's own align-items:flex-start means each column only takes its
   own natural height, so whichever side (Antibiotiket vs Identifikimi
   Biokimik) has fewer rows stops short instead of filling down to the
   bottom of the shared card - stretch both to match the taller one. */
fieldset.analize.bx-form { align-items:stretch; }
.bx-form .left-box,
.bx-form .right-box { display:flex; flex-direction:column; }
.bx-form .right-box { border-left:1px solid #ddd; }
.bx-form .item-table tr { height:26px; }
.bx-form .filter-data { width:220px; }
.bx-form select { width:120px; }
.bx-form label.check { width:40px; }
.bx-form input.checkbox { margin-top:2px !important; }

/***************************************************** ENDOSCOPY **************************************/
.endo-place, 
.endo-terms, 
.endo-attrib, 
.endo-text {
	border: solid;
 	border-width: 1px;
 	border-color: #ccc;
	border-radius:3px;
	margin-top:5px;
	padding:6px;
	width:250px;
	float:left;
}
.endo-place-attribs {
	width:260px;
	float:left; 
}
.endo-terms {
	height:522px;
	overflow:auto;
}
.endo-text {
	width:290px;	
	height:522px;
	margin-left:10px;
	padding-right:5px;
}
.endo-place {
	height:350px;
	margin-left:10px;
	overflow:auto;
}
.endo-attrib {
	height:162px;
	margin-left:10px;
	margin-top:10px;
	overflow:auto;
}
.endo-final {
	background-color: transparent;
    overflow: auto;
    width: 100%;
    height: 335px;
    margin-bottom: 5px;
    margin-top: 5px;
    padding: 0px;
    border-left: 2px solid #808080;
    border-top: 2px solid #808080;
    border-bottom: 2px solid #d4d0c8;
    border-right: 2px solid #d4d0c8;
}
.endo-final .sub-final {
	padding:2px;
	cursor:pointer;
}
.endo-text #tfinal {
	position:static;
	top:0px;
	width:100%;
	height:100%;
	margin-bottom:5px;
	z-index:-1;
}
.endo-text .temp-text {
	width:100%;
	height:105px;
}
.endo-terms label,
.endo-place label,
.endo-attrib label {
	white-space:nowrap;
	display:inline-block;
	float:none;
}
.attrib-popup, .place-popup {
	position: absolute;
    top: 5px;
    width: 195px;
    height: 52px;
    border-top: 1px solid #eee;
    border-left: 1px solid #eee;
    border-bottom: 1px solid #666;
    border-right: 1px solid #666;
    background: #d4d0c8;
    display: none;
}
.attrib-popup input[type=text], 
.place-popup input[type=text] {
	width:30px;
	padding:2px;
	font-size:12px;
}
.endo-photo {
	width: 252px;
    height: 190px;
    border: solid 1px #ccc;
	border-radius:3px;
    margin: 5px;
    background-position: center;
    background-repeat: no-repeat;
	background-size: contain;
	float:left;
}
.endo-photo.view {
	width:124px;
	height:93px;
	margin:3px;
}
.div-translate-seek {
	width:60%;
	margin-top:40px;
	margin-left:100px;
	text-align:left;
}
.div-translate-seek #btnPrev {
	margin-right:10px;
}
.div-translate-seek #btnNext {
	margin-left:10px;
}
.div-translate-seek #tcurrent {
	width:30px;
	text-align:center;
	font-weight:bold;
}
.div-loading {
	position:relative;
	margin:auto;
	background-image:url(../images/loading45.gif); 
	display:block;
	width:100px;
	height:100px;
}
/***************************************** EYES VISIT **********************************/
.form-entry.eyes table, 
.form-view.eyes table {
	width:100%; 
	font-size:12px; 
	margin-bottom:10px;
	border:1px solid #eee;
	border-radius:4px;
}
.form-entry.eyes table input {
	width:80px;
	text-align:center;
	float:none; 
}
.form-entry.eyes table td, 
.form-view.eyes table td {
	font-weight:bold;
	text-align:center;
	padding:4px;
}
.form-entry.eyes table td.big, 
.form-view.eyes table td.big {
	width:100px;
	font-weight:bold;
	font-size:13px;
	color:var(--c-primary, #2563eb);
}
.form-entry.eyes table tr, 
.form-view table tr {
	background-color:#f8f8f8;
}
.form-entry.eyes table tr.labels, 
.form-view table tr.labels {
	background-color:#eee;
}
.form-entry.eyes table tr.values td, 
.form-view table tr.values td { 
	font-weight:normal; 
}
/***************************************** ITEM TABLE ********************************/
.list-container {
	width:100%;
	overflow:auto;
	background-color: #fff;
	border-radius: 15px;
	margin-top:20px;
	padding: 10px;
}
.item-table {
	width:100%;
    border-collapse: collapse;
	font-size: 14px;
}
.item-table.ax-form {
	margin:0;
}
.item-table.ax-form input { text-align:center; }
/* Compact analysis results: smaller text and tighter inputs */
.item-table.ax-form td { font-size:13px; padding-top:2px; padding-bottom:2px; }
.item-table.ax-form input { height:24px; padding:2px 6px; font-size:14px; }
.analiza-head .head-tab a { font-size:13px; font-weight:normal; padding:5px 12px; }
fieldset.analize + .form-columns > fieldset { margin-top:0; }
fieldset.analize ~ fieldset.submit input.submit,
fieldset.analize ~ fieldset.submit input.button { height:30px; padding:4px 18px; font-size:14px; }
.item-table.invoice { margin-bottom:20px; }
.item-table.invoice tbody {
	border-bottom:1px solid #e7e7e7;
}
.item-table tr {
	border-top: 1px solid #e7e7e7;
}
.item-table tr.current {
	background-color:#fcfde8;
}
.item-table tr.to-select {
	cursor:pointer;
}
.item-table tr.to-select:hover {
	background-color:#ebebdf;
}
.item-table.view tr {
	border-color:#f5f5f5;
}
.item-table.view tbody {
	border-bottom:1px solid #f5f5f5;
}
.item-table td {
	font-size: 14px;
}
.item-table td.ellipsis {
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
}
.item-table td.ellipsis.w30 { max-width:30px; width:auto !important; }
.item-table td.ellipsis.w50 { max-width:30px; width:auto !important; }
.item-table td.ellipsis.w60 { max-width:60px; width:auto !important; }
.item-table td.ellipsis.w65 { max-width:65px; width:auto !important; }
.item-table td.ellipsis.w70 { max-width:70px; width:auto !important; }
.item-table td.ellipsis.w80 { max-width:80px; width:auto !important; }
.item-table td.ellipsis.w90 { max-width:90px; width:auto !important; }
.item-table td.ellipsis.w100 { max-width:100px; width:auto !important; }
.item-table td.ellipsis.w120 { max-width:120px; width:auto !important; }
.item-table td.ellipsis.w130 { max-width:130px; width:auto !important; }
.item-table td.ellipsis.w140 { max-width:140px; width:auto !important; }
.item-table td.ellipsis.w150 { max-width:150px; width:auto !important; }
.item-table td.ellipsis.w160 { max-width:160px; width:auto !important; }
.item-table td.ellipsis.w170 { max-width:170px; width:auto !important; }
.item-table td.ellipsis.w180 { max-width:180px; width:auto !important; }
.item-table td.ellipsis.w200 { max-width:200px; width:auto !important; }
.item-table td.ellipsis.w250 { max-width:250px; width:auto !important; }
.item-table td.ellipsis.w300 { max-width:300px; width:auto !important; }
.item-table td.ellipsis.w350 { max-width:350px; width:auto !important; }
.item-table td.ellipsis.w400 { max-width:400px; width:auto !important; }
.item-table td.ellipsis.w500 { max-width:500px; width:auto !important; }
.item-table td.error {
	color:#f00;
	height:23px;
}
.item-table thead tr {
	border-top:none;
}
.item-table thead td {
	font-weight:500;
	padding: 2px 4px;
    border-bottom: 1px solid #e7e7e7;
	color: #888;
	padding: 5px 4px;
}
.item-table thead .top-head select {
	width: auto;
	min-width: 50px;
	height:28px;
	font-size:13px;
	margin-left:-2px;
	color:var(--left-menu-text-color);
	font-size: 13px;
	font-weight: 400;
	font-family: "Inter", sans-serif;
}
.item-table.view thead td {
	 border-bottom:2px solid #f5f5f5;
}
.item-table.payments thead td { border-bottom:1px solid #e7e7e7; }
.item-table tbody td {
	padding:4px 4px;
	height:23px;
	color:var(--left-menu-text-color);
}
.item-table tbody td.status { 
	font-size:24px;
	cursor:default;
	height:21px;
}
.item-table tbody td.status.normal { font-size:12px; }
.item-table tbody td.status.small { font-size:18px; }
.item-table tbody td.status.open { color:#F00; }
.item-table tbody td.status.closed { color:#CCC; }
.item-table tbody td.status.active { color:#0F0; }
.item-table tbody td.status.finished { color:#0F0; }
.item-table tbody td.status.waiting { color:#BBB; }
.item-table tbody td.status.sent { color:#F2E906; }
.item-table tbody td.status.accepted { color:#00F; }
.item-table tbody td.status.canceled { color:#EF1FBA; }
.item-table tbody td.status.received { color:#0F0; }
.item-table tbody td.status.transmitted { color:#888; }
.item-table tbody td.status.none { color:transparent; }
.item-table tbody tr:hover {
	background-color:#f3f3f3;
}
.item-table tbody tr.current:hover {
	background-color:#F4EFAC;
}
.item-table tfoot {
	border-top: 1px solid #ccc;
}
.item-table tfoot.no-border { border:none; }
.item-table tfoot td {
	padding:3px;
	height:20px;
	font-weight:700;
}
.item-table tfoot td.note {
	font-weight:normal;
	font-style:italic; 
	font-size:12px;
	color:#388;
}
.item-table tfoot input { padding:2px 2px 3px; }
.item-table tfoot a { 
	width:20px; 
	height:20px;
}
.item-table tfoot tr.totali td {
	height:20px;
	font-weight:bold;
}
.item-table td:nth-child(1) {
	padding-left:4px;
}
.item-table .find-item {
	width:22px; 
	height:20px; 
	padding:0px; 
	background-image:url(../images/search_icon.png); 
	background-position:center; 
	background-repeat:no-repeat;
	background-size:14px;
	margin:1px 0px;
}
.item-table a.edit-item {
	display:block;
	width:20px; 
	height:20px; 
	padding:0px; 
	background-image:url(../images/edit_normal.png); 
	background-position:center; 
	background-repeat:no-repeat;
	background-size:16px;
	margin:1px 0px;
	opacity:0.7;
}
.item-table a.edit-item:hover {
	background-image:url(../images/edit_hover.png); 
	cursor:pointer;
}
.item-table a.open-item {
	display:block;
	width:20px; 
	height:20px; 
	padding:0px; 
	background-image:url(../images/open_other.png); 
	background-position:center; 
	background-repeat:no-repeat;
	background-size:16px;
	margin:1px 0px;
	opacity:0.7;
}
.item-table a.open-item:hover {
	background-image:url(../images/open_other_hover.png); 
	cursor:pointer;
}
.item-table a.open-item.jpeg,
.item-table a.open-item.jpg,
.item-table a.open-item.png {
	background-image:url(../images/open_jpg.png);
}
.item-table a.open-item.txt {
	background-image:url(../images/open_text.png);
}
.item-table a.open-item.txt:hover {
	background-image:url(../images/open_text_hover.png);
}
.item-table a.open-item.pdf {
	background-image:url(../images/open_pdf.png);
}
.item-table a.open-item.doc,
.item-table a.open-item.docx {
	background-image:url(../images/open_doc.png);
}
.item-table a.del-item {
	display:block;
	width:20px;
	height:20px; 
	padding:0px;
	background-image:url(../images/delete_normal.png); 
	background-position:center; 
	background-repeat:no-repeat;
	background-size:16px;
	margin:1px 0px;
	opacity:0.7;
}
.item-table a.del-item:hover {
	background-image:url(../images/delete_hover.png);
	cursor:pointer;
}
.item-table a.copy-item {
	display:block;
	width:20px;
	height:20px; 
	padding:0px;
	background-image:url(../images/copy_icon.png); 
	background-position:center; 
	background-repeat:no-repeat;
	background-size:16px;
	margin:1px 0px;
	opacity:0.7;
}
.item-table a.del-item:hover {
	opacity:1;
}
.item-table a.select-item {
	display:block;
	width:22px; 
	height:20px; 
	padding:0px; 
	background-image:url(../images/select_row.png); 
	background-position:center; 
	background-repeat:no-repeat;
	background-size:16px;
	margin:1px 0px;
	opacity:0.5;
}
.item-table a.select-item:hover {
	opacity:0.9;
}
.item-table .disc-item {
	display:block;
	width:22px; 
	height:20px; 
	padding:0px;
	background-image:url(../images/discount_icon.png); 
	background-position:center; 
	background-repeat:no-repeat;
	background-size:16px 14px;
	margin:1px 0px;
}
.item-table .clear-item {
	width:22px; 
	height:20px; 
	padding:0px; 
	background-image:url(../images/delete_icon.png); 
	background-position:center; 
	background-repeat:no-repeat;
	background-size:16px 14px;
	margin:1px 0px;
}
.item-table .search-item {
	width:22px; 
	height:20px; 
	padding:0px;
	background-image:url(../images/search_icon.png); 
	background-position:center; 
	background-repeat:no-repeat;
	background-size:16px 14px;
	margin:1px 0px;
}
.item-table .add-item {
	width:22px; 
	height:20px; 
	padding:0px; 
	margin:0px; 
	background-image:url(../images/plus_icon.png); 
	background-position:center; 
	background-repeat:no-repeat;
}
.item-table .check-item {
	width:25px; 
	height:22px; 
	padding:0px; 
	margin:0px; 
	background-image:url(../images/check_icon.png); 
	background-position:center; 
	background-repeat:no-repeat;
}
.item-table .print-item {
	width:22px; 
	height:20px; 
	padding:0px; 
	margin:0px; 
	background-image:url(../images/print_icon.png); 
	background-position:center; 
	background-repeat:no-repeat;
	background-size:16px 14px;
}
.item-table .ecr-item {
	display:block;
	width:22px; 
	height:20px; 
	padding:0px; 
	margin:0px; 
	background-image:url(../images/ecr_icon_black.png); 
	background-position:center; 
	background-repeat:no-repeat;
	background-size:16px 16px;
	opacity:0.8;
}
.item-table .save-item {
	display:block;
	width:22px; 
	height:20px; 
	padding:0px;  
	background-image:url(../images/save_icon.png); 
	background-position:center; 
	background-repeat:no-repeat;
	background-size:14px;
	margin:1px 0px;
}
.item-table .send-item {
	display:block;
	width:22px; 
	height:20px; 
	padding:0px;  
	background-image:url(../images/send_icon.png); 
	background-position:center; 
	background-repeat:no-repeat;
	background-size:16px;
	margin:1px 0px;
	opacity:0.7;
}
.item-table .accept-item {
	display:block;
	width:22px; 
	height:22px; 
	padding:0px;  
	background-image:url(../images/accept_icon_v2.png); 
	background-position:center; 
	background-repeat:no-repeat;
	background-size:16px;
	margin:1px 0px;
	opacity:0.7;
}
.item-table .refuse-item {
	display:block;
	width:22px; 
	height:22px; 
	padding:0px;  
	background-image:url(../images/refuse_icon.png); 
	background-position:center; 
	background-repeat:no-repeat;
	background-size:16px;
	margin:1px 0px;
	opacity:0.7;
}
.item-table .transfer-item {
	display:block;
	width:22px; 
	height:22px; 
	padding:0px;  
	background-image:url(../images/transfer_icon.png); 
	background-position:center; 
	background-repeat:no-repeat;
	background-size:16px;
	margin:1px 0px;
	opacity:0.7;
}
.item-table .cancel-item {
	display:block;
	width:22px;
	height:20px;
	padding:0px;
	background-image:url(../images/cancel_icon.png);
	background-position:center;
	background-repeat:no-repeat;
	background-size:16px;
	margin:1px 0px;
}
.item-table.payments {
	margin-top:-4px;
}
.item-table a.inside-button {
	display: inline-block;
    padding: 0px 6px;
    margin: 0 1px;
    background-color:#CCC;
    font-size: 10px;
    color: #fff !important;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px;
}
.item-table a.inside-button:hover {
	background-color:#999;
	text-decoration:none;
}
.item-table input.checkbox {
	vertical-align:middle;
	margin-top:-2px;
}
.item-table .head-links table tr:hover { background-color:#fff; }
.item-table .head-links a { 
	display:block; 
	float:left; 
	width:3.7%; 
}
.item-table.transfer thead td { 
	font-size:11px; 
	padding:2px; 
}
.item-table a span { color:#229A05; }
/******************************************** ITEM TABLE REPORT *******************************/
.item-table.report { 
	margin-bottom:15px;
}
.item-table.report td.index {
	color:#888;
}
.item-table.report thead td {
	border-color:#ddd;
}
.item-table.report tr {
	border-color:#f5f5f5;
}
.item-table.report tbody tr:hover {
	background-color:#f5f5f5;
}
.item-table.report tfoot td {
	border-top:2px solid #ddd;
}
.item-table.report .group-by {
	vertical-align:middle;
	margin-top:-2px;
}
.item-table.situation {
	cursor:default;
}
.item-table.situation tr.alert td { background-color:#F9F7B1; }
.item-table.situation tr:hover .edit { display:block !important; }
.item-table.situation tr:hover .no-show { display:none !important; }
/***************************************** VISIT FORM *****************************/
.visit-form {
	margin-top:10px;
}
.visit-form .item-table {
	margin-top:0;
}

/***************************************** INVOICE ********************************/
.invoice-totals table {
	width:100%;
	font-size:12px;
	font-weight:bold;
}
.invoice-totals table td.label {
	font-style:italic;
	color:#888;
}
.invoice-totals input[type=text] {
	width:50px;
	text-align:right;
}
.invoice-totals td.warning { color:#F00; }
.invoice-buttons { padding-top:10px; }
/******************** **********************/
/*table #invPayments {
	border:1px solid #8F8686;
}
table #invPayments thead td {
	border-bottom:1px dotted #8F8686;
	height:18px;
	font-size:12px;
	background-color:#DCD4D5;
} */
div.divAjaxStatus {
	text-align:center;
	padding:3px;
	border-top:1px dotted #FFF;
	display:none;
}
.efshehur {
	display:none;	
}
.report-filter .bold, .report-filter b {
	font-size:12px;
}
.reports_table {
	width:100%;
	margin-top:10px;
	border:1px solid #EEE;	
}
.reports_table thead td {
	height:20px;
	font-size:12px;
	font-weight:bold;
	font-style:italic;
	border-bottom:1px dashed #EEE;
	padding-right:4px;		
}
.reports_table tbody td {
	padding:1px 4px 1px 0;
	font-size:12px;
}
.reports_table tfoot td {
	height:20px;
	font-size:12px;
	font-weight:bold;
	border-top:1px dashed #EEE;
	padding-right:4px;		
}
table.quicklist thead td {
	height:20px;
	font-style:italic;
	font-weight:bold;
	border-bottom:1px dotted #000;
}
table.quicklist td {
	height:20px;	
}
table.transferUnit {
	border:1px solid #EEE;	
}
table.transferUnit td {
	padding-left:3px;
	padding-top:1px;
}
table.transferUnit td.headLabel {
	font-weight:normal;
	text-align:center;
	height:20px;
}
table.alerts {
	width:100%;
	margin-top:20px;
	border:1px solid #EEE;	
}
table.alerts thead td {
	height:25px;
	font-weight:bold;
	font-style:italic;
/*  border-bottom:1px dashed #EEE; */
	padding-right:4px;
	background-color:#57BED9;		
}
table.alerts tbody tr.red {
	background-color:#FF0000;
}
table.alerts tbody tr.yellow {
	background-color:#FFFF00;
}
table.alerts tbody tr.green {
	background-color:#00FF00;
}
table.alerts tbody td {
	padding-right:4px;
	height:24px;
	border-top:1px thin #EEE;
	border-top:1px dotted #EEE;
}
/******************************************* FILTER EXAMS ********************************/
.search-exam {
	display:flex;
	align-items:center;
	float:right;
	margin:0 0 14px;
}
.search-exam label {
	width:40px;
	height:21px;
	padding-top:2px;
}
.search-exam input {
	width:240px;
}

.filter-exams {
	margin:-5px 0 10px; 
	clear:both; 
}
.filter-exams span {
	display:block;
	margin:5px 0;
}
.filter-exams .cab-check {
	margin-top:-2px;
}
.filter-exams .cab-div {
	overflow:auto;
}
.letter-section {
	display:block;
	width:100%;
	border-bottom:1px dotted #FFF;
	font-size:16px;
	font-weight:bold;
	padding:5px 0 0 5px;
	margin:0 0 5px;
	clear:both;
	float:none;
}
.exam-checkbox, .service-checkbox {
	width:270px;
	margin:0 8px 0 0;
	padding:1px 8px;
	border-radius:8px;
	float:left;
}
.exam-checkbox:hover, .service-checkbox:hover {
	background-color:var(--left-menu-bg-color);
}
.exam-label, .service-label {
	display:flex;
	align-items:center;
	gap:8px;
	width:100%;
	cursor:pointer;
	overflow:hidden;
  	text-overflow: ellipsis;
	white-space: nowrap;
	font-size:14px;
}
.exam-label input.exmchk,
.service-label input {
	flex:0 0 auto;
	margin:0;
}
.exam-label:hover, .service-label:hover {
	font-weight:600;
}
/* Paketat: was sharing .exam-checkbox's bare float+ellipsis treatment, which
   with no padding/row feedback and long names truncating mid-word read as a
   messy wall of text - give it its own card-row look (padding, rounded
   hover, checkbox/text aligned on one baseline via flex). */
.packet-checkbox {
	width:270px;
	margin:0 8px 0 0;
	padding:1px 8px;
	border-radius:8px;
	float:left;
}
.packet-checkbox:hover {
	background-color:var(--left-menu-bg-color);
}
.packet-label {
	display:flex;
	align-items:center;
	gap:8px;
	width:100%;
	cursor:pointer;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
	font-size:14px;
}
.packet-label input.pktchk {
	flex:0 0 auto;
	margin:0;
}
.packet-label:hover {
	font-weight:600;
} /*
.print-from-view {
	position:absolute;
	display:block;
	top:5px;
	right:10px;
	font-weight:bold;
}
.edit-from-view {
	position:absolute;
	display:block;
	top:5px;
	right:60px;
	font-weight:bold;
} */


/********************************* alpha import *******************/
.alpha-import {
	margin-top:20px;
}
.alpha-import .alpha-status {
	margin-top:10px;
}
/********************************* qucik exam **********************/
.quick-exam-prices {
	position:fixed;
	width:250px;
	top:26px;
	right:-100%;
	bottom:0;
	background-color:#FAFAFA;
	border-left:1px solid #ccc;
	overflow-x:scroll;
	overflow-y:hidden;
	z-index:90;
}
.quick-exam-prices .quick-buttons {
	width:100%;
	padding:10px 5px;
}
.quick-buttons input {
	vertical-align:top;
	padding:3px;
	width:165px;
}
.quick-buttons button {
	height:23px;
	width:30px;
	margin-left:5px;
	border:1px solid #aaa;
	border-radius:3px;
	background-color:transparent;
	vertical-align:top;
	background-position:center;
	background-repeat:no-repeat;
	background-size:16px;
	opacity:0.6;
}
.quick-buttons .search {
	background-image:url('../images/ico_search.png');
}
.quick-buttons .hide {
	width:24px;
	background-image:url('../images/ico_hide.png');
}
.quick-buttons .show {
	display:block;
	position:fixed;
	width:24px;
	top:36px;
	right:10px;
	z-index:90;
	background-color:#FAFAFA;
	background-image:url('../images/ico_show.png');
}
.quick-exam-prices .quick-results {
	padding:5px 0;
	border-top:1px solid #ddd;
}
.quick-results .error {
	padding:5px;
	font-size:12px;
	color:#f00;
}
.quick-results .item {
	padding:3px 8px 3px 5px;
	border-bottom:1px solid #f0f0f0;
	cursor:default;
}
.quick-results .item:hover {
	background-color:#f9f9f9;
}
.quick-results .item p {
	margin:0;
	font-size:12px;
	display:inline-block;
}
.quick-results .item .name {
	width:75%;
	text-align:left;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
}
.quick-results .item .price {
	width:24%;
	text-align:right;
}
.visit-exam-list td.refer span {
	display:block;
	float:left;
	min-width:100px;
	margin-top:1px;
}
.visit-exam-list td.refer a { float:left; }
.visit-exam-list td.refer select {
	display:inline-block;
	width:150px;
	vertical-align:top;
	margin-top:1px;
	margin-right:9px;
}
.mail-working, .mail-success, .mail-error {
	width:100%;
	margin-top:10px;
	font-size:18px;
	font-weight:bold;
	text-align:center;
	padding:10px;
	border:1px solid #eee;
	border-radius:2px;
	display:none;
}
.mail-success { color:#093; }
.mail-error { color:#F00; }
.mail-working {
	animation: blinker 2s linear infinite;
}
/************************************** ACL ADMINISTRATION ************************************/
.acl-block {
	display:block;
	overflow:auto;
	margin:10px 0 0 0;
	padding-right: 10px;
	padding-bottom:5px;
}
.acl-block .acl-content {
	width: 100%;
	border: 1px solid #ccc;
	border-radius:3px;
}
.acl-block .root-menu {
	width: 100%;
	color:var(--left-menu-text-color);
	padding:4px 10px;
	background-color:#f9fbfc;
	border-bottom:1px solid #f9fbfc;
	font-weight:500;
	font-size: 15px;
	cursor:pointer;
	background-image: url(../images/icons/dropup_v2.png);
	background-repeat: no-repeat;
	background-size: 20px;
	background-position: 96% center;
	border-bottom: 1px solid #ccc;
}
.acl-block .root-menu input {
	margin-left:-5px;
}
.acl-block label {
	display:block;
	width: 100%;
	font-size: 13px;
	margin-bottom: 0px;
}
.acl-block input {
	vertical-align:middle;
}
.acl-block.collapsed { 
	padding-bottom:0; 
	border-bottom:none; 
}
.acl-block.collapsed label { display:none; }
.acl-block.collapsed .root-menu { 
	color:#444;
	background-image: url(../images/icons/dropdown_v2.png);
}
/************************************** MEMCARDS ADMINISTRATION ************************************/
.memcard-block {
	display:block;
	overflow:auto;
	margin:0 10px 10px 0;
	float:left;
	border: 1px solid #ccc;
	border-radius:5px;
	padding-bottom:5px;
}
.memcard-block .cab-name {
	padding:4px 10px;
	background-color:#ddd;
	border-bottom:1px solid #ccc;
	font-weight:bold;
	cursor:pointer;
}
.memcard-block .cab-name span { color:#f00; }
.memcard-block .cab-name input {
	margin-left:-5px;
}
.memcard-block .memcard-item { 
	width:250px;
	border-bottom:1px solid #eee;
	overflow:auto;
}
.memcard-block .exam-name {
	float:left;
	display:block;
	padding:4px 4px 0 4px;
	width:200px;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
}
.memcard-block .exam-price {
	width:50px;
	text-align:right;
	padding:4px 3px 0 0;
}
.memcard-block input {
	vertical-align:middle;
}
.memcard-block.collapsed { padding:0; border-bottom:none; }
.memcard-block.collapsed .memcard-item { display:none; }
.memcard-block.collapsed .root-menu { color:#444; }
/************************************************** UPLOADS ********************************/
.upload-thumbs .preview {
	display:block;
	float:left;
	background-repeat:no-repeat;
	background-position:center;
	position:relative;
	height:80px;
	width:80px; 
	text-align:center;
	margin-top:5px;
	margin-right:5px;
	border:1px solid #ddd;
	cursor:pointer;
	background-color:#eee;
}
.upload-thumbs .preview:hover {
	opacity:0.7;
}
.upload-thumbs .preview.video {
	background-image:url(../images/flowpl_logo.png);
}
.upload-thumbs .preview.adobe {
	 background-image:url(../images/adobe_icon.png);
	 border:none;
}
.upload-thumbs .preview.word {
	background-image:url(../images/word_icon.png); 
	border:none;
}
.upload-thumbs .preview.text {
	background-image:url(../images/text_icon.png); 
	border:none;
}
.upload-thumbs .preview.other {
	background-image:url(../images/file_icon_2.png); 
	border:none;
}
.upload-thumbs .preview .remove {
	position:absolute;
	top:2px;
	right:2px; 
	border:none;
	background-image:url(../images/close1.png);
	height:11px;
	width:11px;
	visibility:hidden;
}
.upload-thumbs .preview .remove:hover {
	background-image:url(../images/close4.png);
}
.upload-thumbs .preview:hover .remove {
	visibility:visible;
}
.upload-form {
	margin-top:10px;
	display:flex;
	align-items:center;
	gap:10px;
}
.upload-thumbs .uploading {
	display:block;
	position:relative;
	width:80px;
	height:80px;
	border:1px solid #eee;
	border-radius:2px;
	margin-top:5px;
	margin-right:5px;
	float:left;
} 
.spinner:before {
  content: '';
  box-sizing: border-box;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  margin-top: -20px;
  margin-left: -20px;
  border-radius: 50%;
  border: 1px solid #ccc;
  border-top-color: #07d;
  animation: spinner .6s linear infinite;
}
/************************************************* RECETE FORM ******************************************/
.rx-diagnose { width:668px !important; }
.rx-form {
	display:block;
	width:100%;
	margin:5px 0;
	float:left; 
}
.rx-form .rx-section {
	display:block;
	margin:5px 0;
	padding:5px;
	background-color:#f3f3f3; 
	border:1px solid #eee; 
	border-radius:5px;
}
.rx-section .rx-item {
	display:table;
	margin-bottom:2px;
	
}
.rx-section label { width:115px; }
.rx-section input {
	width:200px;
}
.rx-section input.drug {
	width:350px;
}
/*********************************************** SELECT CALENDAR *****************************************/
.sel-cld {
	width:500px;
	margin-top:30px;
}
.sel-cld .day-list {
	height:35px;
}
.sel-cld .day-item {
	display:block;
	width:14%;
	height:40px;
	border:4px solid #fff;
	float:left;
}
.sel-cld .day-item span {
	display:block;
	width:100%;
	height:100%;
	border:1px solid #ddd;
	border-radius:5px;
	background-color:#fafafa;
	padding-top:5px;
	text-align:center;
	font-size:14px;
}
.sel-cld .day-item span.holiday {
	background-color:#F4F77D;
	border-color:#E4D017;
}
.sel-cld .day-name {
	height:100%;
	font-weight:bold;
}
.sel-cld .day-name span {
	font-size:12px;
	background-color:transparent;
	border:none;
}
.sel-cld .day-name.sunday span {
	color:red;
}
.sel-cld .day-item .check {
	float:right;
	width:18px;
	margin-right:5px;
	margin-top:3px;
	opacity:0.6;
}
/************************************** RX-SELECT-LIST *****************************/
.rx-select {
	position:fixed;
	top:10px;
	bottom:10px;
	left:10px;
	right:10px;
	background-color:#fff;
	z-index:90;
	overflow:scroll;
	padding:10px 15px;
	font-size:14px;
	display:none;
}
.rx-select .title {
	font-size:18px;
	height:20px;
	margin:10px 0;
	text-transform:uppercase;
}
.rx-select .close {
	position:fixed;
	top:22px;
	right:52px;
	width:25px;
	height:25px;
	background-image:url(../images/cancel_icon.png);
	background-position:center;
	background-size:contain;
	background-repeat:no-repeat;
	cursor:pointer;
	opacity:0.5;
}
.rx-select .close:hover { opacity:1; }
.rx-select .accept {
	position:fixed;
	top:22px;
	right:102px;
	width:25px;
	height:25px;
	background-image:url(../images/accept_icon.png);
	background-position:center;
	background-size:contain;
	background-repeat:no-repeat;
	cursor:pointer;
	opacity:0.5;
}
.rx-select .accept:hover { opacity:1; }
.rx-select .rx-list {
	width:55%;
	padding-right:10px;
	float:left;
}
.rx-select .rx-dtn {
	width:15%;
	padding-right:10px;
	float:left;
}
.rx-select .rx-ds {
	width:30%;
	padding-right:10px;
	float:left;
}
.rx-select .rx-item {
	width:100%;
	background-color:#f5f5f5;
	padding:4px 8px;
	margin-bottom:3px;
	border-radius:3px;
	height:26px;
	line-height:19px;
	overflow:hidden;
	cursor:pointer;
}
.rx-select .rx-item:hover {
	background-color:#e5e5e5;
}
.rx-select .rx-item.selected {
	background-color:#F4EFAC;
}
/******************************************* EXAM PREVIEW *************************************/
.exam-show {
	position:relative;
	width:100%;
}
.exam-show > div,
.exam-show > div > div,
.exam-show > span {
	position:absolute;
	vertical-align:middle;
	padding-top:3px;
}
.exam-show input,
.exam-show select,
.exam-show textarea {
	position:absolute;
}
.exam-show input[type="checkbox"],
.exam-show input[type="radio"] {
	position:relative;
	vertical-align:middle;
	margin-right:5px;
	margin-top: -3px;
}
.exam-show input[type="radio"] { margin-top:-2px; }
.exam-show label {
	float:none;
}
.exam-model .exam-show {
	position:relative;
	border:1px solid #eee;
	border-radius:4px;
	padding:10px 0 0;
}
.recete-items {
	overflow-y:auto;
}
/************************************ PAP TEST DATA ***************************/
.pp-data {
	position:relative; 
	display:none;
}
/*.ptn-data:hover .pp-data {
	display:block;
}
/************************************ DENT CHART ******************************/
.dent-form { 
	width:100%; 
	margin-top:72px;
	overflow:auto;
}
.dent-form .dent-chart {
	position:relative;
	width:400px;
	float:left;
}
.dent-chart img.chart {
	width:100%;
	border-radius:4px;
}
.dent-chart .dent-area {
	background-color:#6D6C6F;
}
.dent-chart .dent {
	position:absolute;
	opacity:0%;
}
.dent-chart .dent:hover {
	cursor:crosshair;
	opacity:40%;
}
.dent-chart .dent.selected {
	opacity:100%;
}
.dent-chart .dent-info {
	position:absolute;
	top:145px;
	left:96px;
	width:206px;
	height:320px;
	border:1px solid #ddd;
	border-radius:4px;
}
.dent-chart .dent-info .info-item {
	padding:1px 3px;
	cursor:pointer;
}
.dent-chart .dent-info .info-item:hover,
.dent-chart .dent-info .info-item.selected {
	background-color:#ddd;
}
.dent-chart .dent-info .info-item .date { font-style:italic; }
.dent-chart .dent48 {
	top:345px;
	left:10px;
}
.dent-chart .dent47 {
	top:400px;
	left:17px;
}
.dent-chart .dent46 {
	top:454px;
	left:38px;
}
.dent-chart .dent45 {
	top:512px;
	left:53px;
}
.dent-chart .dent44 {
	top:552px;
	left:74px;
}
.dent-chart .dent43 {
	top:586px;
	left:92px;
}
.dent-chart .dent42 {
	top:605px;
	left:129px;
}
.dent-chart .dent41 {
	top:611px;
	left:162px;
}
.dent-chart .dent31 {
	top:614px;
	left:194px;
}
.dent-chart .dent32 {
	top:607px;
	left:219px;
}
.dent-chart .dent33 {
	top:586px;
	left:245px;
}
.dent-chart .dent34 {
	top:552px;
	left:265px;
}
.dent-chart .dent35 {
	top:512px;
	left:279px;
}
.dent-chart .dent36 {
	top:453px;
	left:286px;
}
.dent-chart .dent37 {
	top:400px;
	left:309px;
}
.dent-chart .dent38 {
	top:345px;
	left:324px;
}
.dent-chart .dent28 {
	top:274px;
	left:322px;
}
.dent-chart .dent27 {
	top:210px;
	left:321px;
}
.dent-chart .dent26 {
	top:143px;
	left:308px;
}
.dent-chart .dent25 {
	top:104px;
	left:301px;
}
.dent-chart .dent24 {
	top:65px;
	left:284px;
}
.dent-chart .dent23 {
	top:33px;
	left:264px;
}
.dent-chart .dent22 {
	top:13px;
	left:235px;
}
.dent-chart .dent21 {
	top:5px;
	left:194px;
}
.dent-chart .dent11 {
	top:5px;
	left:147px;
}
.dent-chart .dent12 {
	top:12px;
	left:109px;
}
.dent-chart .dent13 {
	top:33px;
	left:76px;
}
.dent-chart .dent14 {
	top:65px;
	left:52px;
}
.dent-chart .dent15 {
	top:104px;
	left:31px;
}
.dent-chart .dent16 {
	top:143px;
	left:10px;
}
.dent-chart .dent17 {
	top:209px;
	left:3px;
}
.dent-chart .dent18 {
	top:273px;
	left:10px;
}

.dent-form .dent-data {
	width:430px;
	min-height:600px; 
	float:left;
}
}

@keyframes spinner {
  to {transform: rotate(360deg);}
}
@keyframes blinker {  
  50% { opacity: 0; }
}
/* ===================================================================
   edoctorserver-only rules preserved from the pre-port stylesheet.
   These exist in edoctorserver but not in edoctorserver (newer modules).
   =================================================================== */
@media screen and (min-width: 700px) {
a.small-btn.update {
	background-image:url(../images/update.png);
	background-size:19px;
}
a.small-btn.insert {
	background-image:url(../images/insert_rows_icon_red.png);
	width:28px;
	height:28px;
	background-size:28px;
}
.ros-item {
	width:190px;
	float:left;
	padding-right:5px;
	margin-right:5px;
}
.item-table td.ellipsis.w40 { max-width:40px; width:auto !important; }
}

/* ===================================================================
   List tables that are not (yet) wrapped in <div class="list-container">
   get the same card treatment, so the 66 modules that still emit a bare
   <table class="item-table"> match the ported screens without needing a
   markup change in every file.
   =================================================================== */
@media screen and (min-width: 700px) {
.main-container > .item-table,
.main-container > form > .item-table {
	background-color:#fff;
	border-radius:15px;
	margin-top:20px;
	padding:10px;
}
}
/* AnalizaFill's Detajet (Mjeku / Lab. Referent / Shenime) and Uploads cards:
   equal heights, titled alike, and the upload controls in a drop-zone box
   above the thumbnails instead of a bare file input under an empty area. */
.form-columns.ax-extra { align-items:stretch; }
.form-columns.ax-extra > fieldset {
	align-content:flex-start;
	padding:8px 10px;
}
.ax-extra .form-title {
	margin:0 5px 5px;
	font-size:16px;
}
.form-entry .ax-extra textarea.small {
	height:30px;
	min-height:30px;
	padding:5px 8px;
	resize:vertical;
	font-family:inherit;
	font-size:14px;
	border-color:#e1e3e5;
}
.ax-extra .upload-form {
	order:1;
	display:flex;
	align-items:center;
	gap:10px;
	width:100%;
	margin:5px 0 5px 5px;
	padding:6px;
	border:1px dashed #cfd6de;
	border-radius:10px;
	background-color:#fafbfc;
}
.ax-extra .upload-form input[type=file] {
	flex:1 1 auto;
	max-width:none;
	border:1px solid #e1e3e5;
	border-radius:8px;
	background-color:#fff;
}
.ax-extra .upload-form input.button {
	margin-left:0;
	border:1px solid #e1e3e5;
	height:30px;
	padding:0 16px;
	font-size:14px;
}
.ax-extra .upload-form input[type=file],
.ax-extra .upload-form input[type=file]::file-selector-button,
.ax-extra .upload-form input[type=file]::-webkit-file-upload-button { height:30px; }
.ax-extra .upload-thumbs:not(:empty) { padding-top:5px; }
.ax-extra .upload-thumbs {
	order:2;
	width:100%;
	padding:0 5px;
}
.ax-extra .upload-thumbs:empty::before {
	content:'Nuk ka file te ngarkuara.';
	display:block;
	color:#999;
	font-size:13px;
}
.ax-extra .upload-thumbs .preview { border-radius:8px; }
.ax-extra .clear { display:none; }
@media screen and (min-width: 1700px) {
	.main-container { width:90%; }
}
@media screen and (min-width: 1800px) {
	.main-container { width:80%; }
}
@media screen and (min-width: 1900px) {
	.main-container { width:70%; }
}