.mydiv{
    width:500px;
    height:200px;
    background:#eeeeee;
    position:fixed;
    display: None;
    top:100px;
    left:50%;
    margin-left:-250px; /* negative half the size of width */
}
.icon {
	height: 0.7em;
	cursor: pointer;
}
.icon_edit {
	background: url("/vendor/flaticon/111317-essential-ui/png/gear.png");
        height: 0.7em;
        cursor: pointer;
	
}

.cur-pointer {
        cursor: pointer;
}
.table td.td-align-right {
   text-align: right;   
}
.table th.th-align-right {
   text-align: right;
}
.alignleft {
	float: left;
}
.alignright {
	float: right;
}




/* CSS used here will be applied after bootstrap.css */
.badge-info{
   background:red;
   position:absolute;
   top: 5px;
   left: 25px;
}

/* ============================================================
   Modern UI — shared across all pages (cards, params, modal…)
   ============================================================ */
#page-wrapper{ background:#f8fafc; }

/* reusable card (Bootstrap 3 has no .card) */
.card{ background:#fff; border:1px solid #e9edf3; border-radius:14px; }
.eyebrow{ font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:#94a3b8; font-weight:700; }
.page-head{ display:flex; align-items:center; gap:14px; margin:4px 0 18px; flex-wrap:wrap; }
.page-head h3{ margin:0; font-weight:700; color:#0f172a; }
.addbtn{ display:inline-flex; align-items:center; justify-content:center; gap:6px; background:#4f46e5; color:#fff !important; border:0; border-radius:9px; padding:8px 14px; font-size:13px; font-weight:600; cursor:pointer; text-decoration:none; }
.addbtn:hover{ background:#4338ca; }
.addbtn-sm{ width:30px; height:30px; padding:0; margin-left:auto; }
form#add-dropdown .fa-plus{ cursor:pointer; }   /* the + adds the selected field */

/* detail-page header (icon + title) */
.detail-head{ display:flex; align-items:center; gap:16px; padding:20px; margin-bottom:18px; }
.detail-icon{ width:54px; height:54px; border-radius:14px; background:#eef2ff; color:#4f46e5; display:flex; align-items:center; justify-content:center; font-size:24px; flex:0 0 auto; }
.detail-head h3{ margin:2px 0 0; font-weight:700; font-size:22px; color:#0f172a; }

/* sections + key/value rows */
.sect{ padding:18px; margin-bottom:18px; }
.sect-title{ font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:#94a3b8; font-weight:700; margin-bottom:12px; display:flex; align-items:center; gap:10px; }
.kv{ display:flex; gap:14px; padding:9px 0; border-top:1px solid #f1f5f9; font-size:14px; }
.kv:first-of-type{ border-top:0; }
.kv .k{ flex:0 0 140px; color:#64748b; font-weight:600; }
.kv .v{ color:#0f172a; flex:1; word-break:break-word; }
.kv-top{ align-items:flex-start; }

/* generic row list (lines, keys, members, entries) */
.rowlist{ list-style:none; padding:0; margin:0; }
.rowlist > li{ display:flex; align-items:center; gap:12px; padding:11px 14px; border:1px solid #eef2f7; border-radius:10px; margin-bottom:8px; }
.rowlist > li:last-child{ margin-bottom:0; }
.rowpos{ flex:0 0 30px; height:30px; display:flex; align-items:center; justify-content:center; background:#f1f5f9; border-radius:8px; font-weight:700; font-size:13px; color:#475569; }
.rowmain{ flex:1; font-size:14px; color:#0f172a; word-break:break-word; }
.rowmain .sub{ color:#64748b; font-weight:400; margin-left:6px; }
.rowacts{ display:flex; gap:6px; flex:0 0 auto; }
.muted{ color:#94a3b8; }

/* two-column detail grid */
.detail-cols{ display:grid; grid-template-columns:repeat(auto-fit,minmax(330px,1fr)); gap:18px; align-items:start; max-width:1100px; }

/* card grid (list pages shown as cards) */
.card-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:14px; }
.minicard{ position:relative; background:#fff; border:1px solid #e9edf3; border-radius:12px; padding:16px; cursor:pointer; transition:transform .12s, box-shadow .12s, border-color .12s; }
.minicard:hover{ border-color:#c7d2fe; box-shadow:0 6px 18px rgba(2,6,23,.07); transform:translateY(-1px); }
.minicard .mc-title{ font-weight:700; font-size:16px; color:#0f172a; font-variant-numeric:tabular-nums; word-break:break-word; }
.minicard .mc-sub{ color:#64748b; font-size:13px; margin-top:6px; min-height:18px; word-break:break-word; }
.minicard .mc-del{ position:absolute; top:10px; right:10px; opacity:0; transition:opacity .12s; }
.minicard:hover .mc-del{ opacity:1; }
.emptybox{ color:#94a3b8; font-size:15px; padding:40px; text-align:center; }

/* cards (Bootstrap panels restyled) */
.panel{ border:1px solid #e9edf3; border-radius:14px; box-shadow:none; background:#fff; margin-bottom:18px; }
.panel-default > .panel-heading{ background:#fff; border-bottom:1px solid #eef2f7; border-radius:14px 14px 0 0; color:#0f172a; font-weight:600; font-size:14px; padding:14px 18px; }
.panel-body{ padding:16px 18px; }
.panel-body .panel{ border:1px solid #eef2f7; border-radius:11px; margin-bottom:14px; }
.panel-body .panel:last-child{ margin-bottom:0; }
.panel-body .panel > .panel-heading{ background:#f8fafc; font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:#64748b; }

/* tables (gentle modern touch) */
.table > thead > tr > th{ border-bottom:1px solid #eef2f7; font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:#94a3b8; font-weight:600; }
.table > tbody > tr > td{ border-top:1px solid #f1f5f9; }
.table-hover > tbody > tr:hover{ background:#f8fafc; }

/* parameter lists (any page with dl#params) */
#params{ display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:8px; margin:0; align-items:start; }
#params dt{ grid-column:1 / -1; font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:#94a3b8; font-weight:700; margin:14px 0 0; }
#params dt:first-child{ margin-top:0; }
#params dd.prow-wide{ grid-column:1 / -1; }
#params dd.prow{ display:flex; align-items:center; gap:12px; margin:0; padding:11px 14px; background:#fff; border:1px solid #eef2f7; border-radius:10px; }
#params dd.prow:hover{ border-color:#e2e8f0; }
#params dd.prow .pk{ font-size:13px; color:#64748b; font-weight:600; flex:0 0 130px; }
#params dd.prow .pv{ font-size:14px; color:#0f172a; font-weight:600; flex:1; word-break:break-word; }
#params dd.prow .pacts{ display:flex; gap:6px; flex:0 0 auto; opacity:0; transition:opacity .12s; }
#params dd.prow:hover .pacts, #params dd.prow:focus-within .pacts{ opacity:1; }
#params dd.prow .plock{ font-size:12px; color:#94a3b8; }
@media (max-width:900px){ #params dd.prow .pacts{ opacity:1; } }

.pbtn{ width:32px; height:32px; display:inline-flex; align-items:center; justify-content:center; border:1px solid #e2e8f0; background:#fff; border-radius:8px; color:#64748b; cursor:pointer; transition:.12s; padding:0; }
.pbtn:hover{ border-color:#c7d2fe; color:#4f46e5; background:#f5f3ff; }
.pbtn-del:hover{ border-color:#fecaca; color:#dc2626; background:#fef2f2; }

/* chips */
.chips{ display:flex; flex-wrap:wrap; gap:6px; }
.chip{ display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:999px; background:#f1f5f9; color:#475569; font-size:12px; font-weight:600; border:1px solid #e9edf3; }
.chip-primary{ background:#eef2ff; color:#4338ca; border-color:#c7d2fe; }

/* modals */
.modal-content{ border-radius:16px; border:0; box-shadow:0 24px 60px rgba(2,6,23,.30); }
.modal-header{ border-radius:16px 16px 0 0; }
#change-param .modal-header, #notify-modal .modal-header, #deleteModal .modal-header{ background:#4f46e5; color:#fff; border:0; padding:16px 20px; }
#change-param .modal-title, #notify-modal .modal-title, #deleteModal .modal-title, #change-param #change-title{ font-weight:700; font-size:17px; color:#fff; }
#change-param .modal-header .close, #notify-modal .modal-header .close, #deleteModal .modal-header .close{ color:#fff; opacity:.9; text-shadow:none; font-weight:400; }
#change-param .modal-body{ padding:20px; }
#change-param .modal-body > .panel{ border:0; box-shadow:none; margin:0; background:none; }
#change-param .modal-body > .panel > .panel-body{ padding:0; }
#change-param .modal-footer{ border-top:1px solid #eef2f7; padding:14px 20px; }
#change-param .errorMessages{ list-style:none; padding:0; margin:0 0 8px; color:#b91c1c; font-size:13px; }
#change-param input[type=text], #change-param input[type=email], #change-param input[type=number],
#change-param input[type=password], #change-param input[type=datetime-local], #change-param select{
   width:100%; padding:10px 12px; border:1px solid #e2e8f0; border-radius:9px; font-size:14px; margin:5px 0 14px; background:#fff; }
#change-param input:focus, #change-param select:focus{ outline:none; border-color:#4f46e5; box-shadow:0 0 0 3px rgba(79,70,229,.15); }
#change-param input[type=radio], #change-param input[type=checkbox]{ width:auto; margin:0 6px 0 0; }
#change-param fieldset{ border:1px solid #eef2f7; border-radius:10px; padding:12px 14px; margin:6px 0 12px; }
#change-param legend{ width:auto; border:0; margin:0; padding:0 6px; font-size:12px; font-weight:700; color:#64748b; text-transform:uppercase; letter-spacing:.04em; }
#change-param .nav-tabs{ border-bottom:1px solid #e9edf3; margin-bottom:14px; }
#change-param .nav-tabs > li > a{ border:0 !important; color:#64748b; font-weight:600; background:none !important; padding:9px 14px; margin:0; }
#change-param .nav-tabs > li.active > a, #change-param .nav-tabs > li.active > a:hover, #change-param .nav-tabs > li.active > a:focus{ color:#4f46e5; border:0 !important; border-bottom:2px solid #4f46e5 !important; background:none !important; }

/* confirmation modal */
#mt-confirm .modal-header{ background:#dc2626; color:#fff; border:0; padding:16px 20px; border-radius:16px 16px 0 0; }
#mt-confirm .modal-title{ color:#fff; font-weight:700; font-size:17px; }
#mt-confirm .modal-header .close{ color:#fff; opacity:.9; text-shadow:none; font-weight:400; }
#mt-confirm .modal-body{ padding:20px; }
#mt-confirm #mt-confirm-msg{ margin:0; font-size:15px; color:#0f172a; }
#mt-confirm .modal-footer{ border-top:1px solid #eef2f7; padding:14px 20px; }

/* buttons */
.btn{ border-radius:9px; font-weight:600; }
.btn-primary{ background:#4f46e5; border-color:#4f46e5; }
.btn-primary:hover, .btn-primary:focus{ background:#4338ca; border-color:#4338ca; }
.btn-danger{ background:#dc2626; border-color:#dc2626; }
.btn-danger:hover, .btn-danger:focus, .btn-danger:active{ background:#b91c1c; border-color:#b91c1c; }
.btn-default{ background:#fff; border-color:#e2e8f0; color:#475569; }
.btn-default:hover, .btn-default:focus{ background:#f8fafc; border-color:#cbd5e1; color:#334155; }