:root { --eprms-green: #198754; --eprms-green-dark: #146c43; --eprms-green-light: #e9f7ef; --eprms-blue: #0d6efd; --eprms-red: #dc3545; --eprms-orange: #f59f00; --text-dark: #26332d; --text: #4f5b55; --text-light: #8a9690; --border: #198754; --border-light: #edf1ee; --background: #f4f7f5; --white: #ffffff; --radius: 8px; --radius-large: 12px; --shadow: 0 4px 18px rgba(0, 0, 0, 0.07); --shadow-hover: 0 8px 25px rgba(0, 0, 0, 0.11); } html { scroll-behavior: smooth; } body { min-width: 1000px; margin: 0; font-family: "Segoe UI", Arial, Helvetica, sans-serif; font-size: 13px; line-height: 1.5; color: var(--text); background: linear-gradient( 180deg, #f7faf8 0%, #f1f5f3 100% ); } body.login { background: none; padding-top: 100px; background: url('../images/header.png') top left repeat-x; } .clear:after { content: "."; display: block; height: 0; overflow:hidden; clear: both; visibility: hidden; } .clean-margin { margin: 0px !important; } .clean-padding { padding: 0px !important; } ul.standard.clean-padding { padding: 0 0 0 16px !important;} ol.standard.clean-padding { padding: 0 0 0 22px !important;} .hidden { display: block; } .display { display: block; } .half { width: 48% !important; } .trio { width: 31% !important; } .quad { width: 23% !important; } .full { width: 100%; } .size-40 { width: 40px; } .size-60 { width: 60px; } .size-80 { width: 80px; } .size-120 { width: 120px; } .size-140 { width: 140px; } .size-150 { width: 150px; } .size-170 { width: 170px; } .size-180 { width: 180px; } .size-190 { width: 190px; } .size-200 { width: 200px; } .size-220 { width: 220px; } .size-250 { width: 250px; } .size-300 { width: 300px; } .size-400 { width: 400px; } .size-500 { width: 500px; } .fl { float: left; } .fr { float: right; } .fl-space { float: left; margin-right: 5px; } .fr-space { float: right; margin-left: 5px; } .fl-space2 { float: left; margin-right: 10px; } .fr-space2 { float: right; margin-left: 10px; } .bt-space0 { margin-bottom: 0px !important; } .bt-space5 { margin-bottom: 5px !important; } .bt-space10 { margin-bottom: 10px !important; } .bt-space15 { margin-bottom: 15px !important; } .bt-space20 { margin-bottom: 20px !important; } .bt-space30 { margin-bottom: 30px !important; } .bt-space40 { margin-bottom: 40px !important; } .ln-normal { line-height: normal !important; } .ln-22 { line-height: 22px !important; } .left { text-align: left !important; } .center { text-align: center !important; margin: auto !important; } .right { text-align: right !important; } .block { text-align: justify; } img.block { display: block; } a { color: #666666; text-decoration: none;} a:hover { color: #666666; text-decoration: underline;} strong { color: #333333; } small { font-size: 11px; line-height: 14px; display: block; } code { color: #333333; font-family: "Courier New",Courier,monospace,sans-serif; } q { background:url("../images/quote.png") no-repeat 7px 8px #FFFFFF; color: #333333; display:block; font-family: "Times New Roman", arial; font-size: 14px; line-height: 18px; font-style: normal; min-height: 42px; padding: 10px 10px 10px 32px; quotes:"" ""; font-style:italic; -moz-border-radius: 3px 3px 3px 3px; -webkit-border-radius: 3px 3px 3px 3px; border-radius: 3px 3px 3px 3px;} q cite { color: #959595; display: block; font-size: 12px; padding-top: 5px; font-family: arial; } del { color: #FF001C; text-decoration:line-through; } .rule { padding-top: 2px; padding-bottom: 20px; background: url('../images/rule.gif') 0px 0px repeat-x; } .rule2 { padding-top: 4px; padding-bottom: 20px; background: url('../images/rule2.gif') 0px 0px repeat-x; } .sidebar .rule { padding-bottom: 15px; } .cr-help { cursor: help; } /*********************************/ /********** PAGE LAYOUT **********/ /*********************************/ .pagesize { width: 1000px; margin: 0px auto; text-align: left; } /*.pagetop { width: 100%; min-width: 1000px; background-color: #eeeeee; border-bottom: 4px solid #55CC00; position: relative; z-index: 100; }*/ .pagetop { width: 100%; min-width: 1000px; position: relative; z-index: 100; background: #ffffff; border-bottom: 3px solid var(--eprms-green); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06); } .head { padding: 0px 0px 0px 0px;} .head_top { position: relative; min-height: 60px; } .main { } .main-wrap { width: 100%; padding-top: 15px; } .page { padding-bottom: 50px; } .logo { padding-top: 20px; } .logo a { text-decoration: none; } .logo .picture { float: left; margin-right: 10px; } .logo .textlogo { float: left; font-size: 24px; color: #82A427; letter-spacing: +0.11em; padding: 30px 10px 25px 30px;} .logo .title { display: block; font-family: arial; font-size: 30px; color: #FFFFFF; font-weight: bold; margin-top: 5px; letter-spacing: -0.02em; } .logo .text { display: block; font-weight: bold; color: #FFFFFF; position: relative; top: -2px; } .breadcrumb { width: 100%; height: 29px; background: url('../images/breadcrumb.png') top left repeat-x; } .breadcrumb .bread-links { line-height: 26px; font-size: 11px; } .breadcrumb li { float: left; margin-right: 5px; } .breadcrumb li.first { padding-left: 16px; background: url('../images/ball_yellow_13.png') 0px 7px no-repeat; } .breadcrumb li span { padding-left: 5px; } /*** main menu ***/ .menu { } .menu ul { font-size: 13px; } .menu li { float: left; margin-right: 3px; padding-bottom: 5px; position: relative; } .menu li a { display: block; line-height: 16px; padding: 7px 15px 7px 15px; background: url('../images/button_glas1.png') center center repeat-x #555555; color: #FFFFFF; text-decoration: none; font-weight: bold; text-shadow: 1px 1px 1px #000000; -moz-border-radius: 3px 3px 3px 3px; -webkit-border-radius: 3px 3px 3px 3px; border-radius: 3px 3px 3px 3px; } .menu li a:hover { background: url('../images/button_glas1_ovr.png') center center repeat-x #666666; } .menu li.active a { background: #ffffff; color: #333333; text-shadow: 1px 1px 1px #BBBBBB;} .menu ul ul { display: none; font-size: 12px; width: 170px; position: absolute; top: 33px; left: 0px; background: url('../images/bck_white_95.png'); padding: 8px 0px 12px 0px; -moz-border-radius: 3px 3px 3px 3px; -webkit-border-radius: 3px 3px 3px 3px; border-radius: 3px 3px 3px 3px; -moz-box-shadow: 1px 2px 2px #888888; -webkit-box-shadow: 1px 2px 2px #888888; box-shadow: 1px 2px 2px #888888; /* IE7 hack */ *border-right: 1px solid #BBBBBB; *border-bottom: 1px solid #BBBBBB; /* IE8 hack */border-right: 1px solid #BBBBBB\0/; border-bottom: 1px solid #BBBBBB\0/;} .menu li:hover ul { } .menu li:hover ul ul { display: none; position: absolute; top: -8px; left: 151px; } .menu li li:hover ul { } .menu li li { padding: 0px 0px 0px 0px; margin: 0px; float: none; } .menu li li a { padding: 4px 12px 4px 22px !important; background: url('../images/arrow_sm_grey.gif') 12px 10px no-repeat !important; font-weight: normal; color: #959595!important; text-shadow: none !important; } .menu li li a:hover { color: #333333!important; background: url('../images/arrow_sm_black.gif') 12px 10px no-repeat !important; } .menu li li:hover a { color: #333333!important; background: url('../images/arrow_sm_black.gif') 12px 10px no-repeat !important; } .menu li li:hover li a { color: #959595!important; background: url('../images/arrow_sm_grey.gif') 12px 10px no-repeat !important;} .menu li li:hover li a:hover { color: #333333!important; background: url('../images/arrow_sm_black.gif') 12px 10px no-repeat !important; } .menu li li.active a { color: #333333!important; background: url('../images/arrow_sm_black.gif') 12px 10px no-repeat !important; font-weight: bold; } .menu li li.active li a { color: #959595!important; background: url('../images/arrow_sm_grey.gif') 12px 10px no-repeat !important; font-weight: normal; } .menu li li.active li a:hover { color: #333333!important; } .menu li li li.active a { color: #333333!important; background: url('../images/arrow_sm_black.gif') 12px 10px no-repeat !important; font-weight: bold; } /* --------------------------------------------------------- MAIN MENU ---IEJ --------------------------------------------------------- */ .menu ul {font-size: 13px;} .menu li {float: left;margin-right: 5px;padding-bottom: 6px;position: relative;} .menu li a {display: block;line-height: 20px;padding: 8px 15px;color: #56615b;background: #ffffff;border: 1px solid transparent;border-radius: 7px;text-decoration: none;font-weight: 600;text-shadow: none;transition:background .18s ease,color .18s ease,box-shadow .18s ease,transform .18s ease;} .menu li a:hover {color: var(--eprms-green);background: var(--eprms-green-light);border-color: #d4ebdc;box-shadow: none;} .menu li.active a {color: #ffffff;background:linear-gradient(135deg,var(--eprms-green),var(--eprms-green-dark));border-color: transparent;text-shadow: none;box-shadow:0 3px 8px rgba(25, 135, 84, .20);} /*** header ***/ .header { background: url('../images/line.gif') bottom left repeat-x; margin-bottom: 30px; } .header .links { float: right; line-height: 24px; color: #333333; padding: 6px 0px 6px 0px; } .header .links li { float: left; margin-left: 10px; } .header .links .icon { display: block; width: 24px; height: 24px; float: left; margin-right: 5px; } .header .links a { color: #333333; text-decoration: none; } .header .links a:hover { color: #00A5C4; text-decoration: none; } /* --------------------------------------------------------- TOP BUTTONS --- IEJ -------------------------------------------------------- */ .topbuts {position: absolute;top: 0;right: 0;} .topbuts li {float: left;margin-left: 3px;font-size: 11px;font-weight: 600;} .topbuts li a {display: block;padding: 5px 12px;color: #ffffff;background: var(--eprms-green);border-radius:0 0 5px 5px;transition: background .15s ease;} .topbuts li a:hover {color: #ffffff;background: var(--eprms-green-dark);} .topbuts li a.red {background: var(--eprms-red);} .topbuts li a.red:hover {background: #b02a37;} /* --------------------------------------------------------- USER AREA ---IEJ --------------------------------------------------------- */ .user {clear: both;float: right;padding-top: 20px;} .user img.avatar {display: block;float: right;margin-left: 14px;padding: 3px;background: #ffffff;border: 1px solid var(--border);border-radius: 50%;box-shadow:0 2px 8px rgba(0, 0, 0, .08);} .user-detail .name { color: var(--text-dark); font-size: 17px; font-weight: 600; padding: 2px 0 4px; } .user-detail .text { color: var(--text-light); font-size: 11px; } .user-detail a { color: var(--eprms-green); font-weight: 600; } .user-detail a:hover { color: var(--eprms-green-dark); text-decoration: none; } /*** main page contents ***/ h1 { color: #333333; font-size: 30px; font-weight: normal; padding-top: 0px; margin-bottom: 10px; } h1 a.label { color: #FFFFFF; text-decoration: none; background: url("../images/button_glas1.png") repeat-x center center #c0c0c0; display: inline-block; font-size: 11px; padding: 2px 10px 2px 10px; position: relative; top: -12px; -moz-border-radius: 3px 3px 3px 3px; -webkit-border-radius: 3px 3px 3px 3px; border-radius: 3px 3px 3px 3px;} h1 a.label:hover { color: #FFFFFF; text-decoration: none; background-color: #00A5C4; } h2 { color: #333333; font-size: 18px; font-weight: normal; padding-top: 0px; margin-bottom: 10px; } h3 { color: #333333; font-size: 18px; font-weight: bold; padding-top: 0px; margin-bottom: 10px; } h4 { color: #333333; font-size: 14px; font-weight: bold; padding-top: 0px; margin-bottom: 5px; } h5 { color: #959595; font-size: 14px; font-weight: bold; padding-top: 0px; margin-bottom: 5px; } h6 { color: #333333; font-size: 14px; font-weight: bold; padding-top: 0px; margin-bottom: 5px; padding-left: 1px; } .page p { margin: 0px; padding-bottom: 20px; line-height: 16px; } .page p.description { margin: 0px; padding-bottom: 5px; padding-top: 0px; font-size: 11px; line-height: 14px; } .thumb { display: block; border: 1px solid #BBBBBB; padding: 3px; background: #FFFFFF; -moz-border-radius: 3px 3px 3px 3px; -webkit-border-radius: 3px 3px 3px 3px; border-radius: 3px 3px 3px 3px; } a .thumb { border: 1px solid #BBBBBB; } a:hover .thumb { border: 1px solid #00A5C4; } .size48 { width: 48px; height: 48px; } .size64 { width: 64px; height: 64px; } .size120 { width: 120px; height: 120px; } .code { background: url('../images/bck_white_90.png'); color: #00A5C4; font-family: "Courier New",Courier,monospace,sans-serif; font-size: 12px; padding: 2px 5px 3px 5px; margin-bottom: 5px; } .code span { color: #ff001c; } ul.standard { list-style-type: square; padding: 10px 0 20px 16px; } ul.standard ul { list-style-type: square; padding: 5px 0 5px 16px; } ol.standard { list-style-type: decimal; padding: 10px 0 20px 22px; } ol.standard ol { list-style-type: lower-alpha; padding: 5px 0 5px 22px; } /* tree list */ ul.tree { list-style-type: none; padding: 0px 0 20px 0px; } ul.tree ul { padding-left: 5px; } ul.tree li { line-height: 20px; padding: 0px 0px 0px 5px; } ul.tree li span.item { padding-left: 20px; background: url('../images/ball_blue_16.png') 0px 2px no-repeat; font-weight: bold; display: block; -moz-border-radius: 3px 3px 3px 3px; -webkit-border-radius: 3px 3px 3px 3px; border-radius: 3px 3px 3px 3px; cursor: pointer; } ul.tree li li span.item { background: url('../images/ball_yellow_13.png') 2px 4px no-repeat; font-weight: normal; } ul.tree li li li span.item { background: url('../images/ball_green_13.png') 2px 4px no-repeat; } ul.tree li li li li span.item { background: url('../images/ball_purple_13.png') 2px 4px no-repeat; } ul.tree li li li li li span.item { background: url('../images/ball_black_13.png') 2px 4px no-repeat; } ul.tree li li li li li li span.item { background: url('../images/ball_red_13.png') 2px 4px no-repeat; } ul.tree li li li li li li li span.item { background: url('../images/ball_grey_13.png') 2px 4px no-repeat; } ul.tree li li { padding-left: 10px !important; } ul.tree li.tree-item-main { padding-left: 0px;} ul.tree li.tree-item { padding-left: 0px;} ul.tree ul { background: url('../images/tree_line.gif') 7px top no-repeat;} ul.tree ul ul { background: none; } ul.tree li.last ul { background: none; } li.tree-item { background: url('../images/tree_simple.png') 0px 0px no-repeat; } li.tree-item.last { background: url('../images/tree_simple_last.png') 0px 0px no-repeat; } li.tree-item.parent { background: url('../images/tree_point.png') 0px 0px no-repeat; } li.tree-item.parent.last { background: url('../images/tree_point_last.png') 0px 0px no-repeat; } ul.space, ol.space { padding-bottom: 10px;} .space li { padding-bottom: 10px; } dl.standard { padding: 10px 0px 15px 0px; } dl.standard dt { color: #333333; font-weight: bold; } dl.standard dd { padding-bottom: 10px; } .mark { background: #FFFFFF; color: #333333; display:block; padding: 10px 10px 0px 10px; margin-bottom: 15px; border: 1px solid #DDDDDD; border-bottom: 1px solid #CCCCCC; -moz-border-radius: 3px 3px 3px 3px; -webkit-border-radius: 3px 3px 3px 3px; border-radius: 3px 3px 3px 3px; } .mark p { padding-bottom: 10px; } .mark_blue { background: #FFF; color: #333333; display:block; padding: 10px 10px 0px 10px; margin-bottom: 15px; border: 1px solid #D7DEE4; border-bottom: 1px solid #C6CDD3; -moz-border-radius: 3px 3px 3px 3px; -webkit-border-radius: 3px 3px 3px 3px; border-radius: 3px 3px 3px 3px; } .mark_blue p { padding-bottom: 10px; } /* --------------------------------------------------------- BUTTONS --------------------------------------------------------- */ .button, input.button, input.submit { display: inline-flex; align-items: center; justify-content: center; min-height: 34px; padding: 7px 16px; border: 0; border-radius: 7px; color: #ffffff; background: linear-gradient( 135deg, var(--eprms-green), var(--eprms-green-dark) ); font-family: "Segoe UI", Arial, sans-serif; font-size: 12px; font-weight: 600; line-height: 18px; cursor: pointer; text-align: center; box-shadow: 0 3px 7px rgba(25, 135, 84, .18); transition: transform .15s ease, box-shadow .15s ease, filter .15s ease; } .button:hover, input.button:hover, input.submit:hover { color: #ffffff; text-decoration: none; transform: translateY(-1px); box-shadow: 0 5px 12px rgba(25, 135, 84, .25); filter: brightness(1.04); } .button:active, input.button:active, input.submit:active { transform: translateY(0); } .button.green { background: linear-gradient( 135deg, #198754, #146c43 ); } .button.red { background: linear-gradient( 135deg, #dc3545, #b02a37 ); } .button.blue { background: linear-gradient( 135deg, #0d6efd, #0a58ca ); } .button.grey { background: linear-gradient( 135deg, #7c8781, #626b66 ); } /*************** **** COLUMNS *** ***************/ /* main columns */ .columns { width: 100%; } .lastcol { margin-right: 0px !important; } .col1-2 { width: 484px; float: left; margin-right: 32px; } .col1-3 { width: 312px; float: left; margin-right: 32px; } .col2-3 { width: 656px; float: left; margin-right: 32px; } .col1-4 { width: 226px; float: left; margin-right: 32px; } .col2-4 { width: 484px; float: left; margin-right: 32px; } .col3-4 { width: 742px; float: left; margin-right: 32px; } /* cols inside of main columns */ .col2-3 .col1-2 { width: 312px; float: left; margin-right: 32px; } .col2-3 .col1-3 { width: 198px; float: left; margin-right: 31px; } .col2-3 .col2-3 { width: 427px; float: left; margin-right: 31px; } .col3-4 .col1-3 { width: 226px; float: left; margin-right: 32px; } .col3-4 .col2-3 { width: 484px; float: left; margin-right: 32px; } .col3-4 .col1-4 { width: 163px; float: left; margin-right: 30px; } .col3-4 .col2-4 { width: 356px; float: left; margin-right: 30px; } .col3-4 .col3-4 { width: 549px; float: left; margin-right: 30px; } /* cols inside of fullboxes */ .content-box .col1-2 { width: 468px; float: left; margin-right: 18px; } .content-box .col1-3 { width: 306px; float: left; margin-right: 18px; } .content-box .col2-3 { width: 630px; float: left; margin-right: 18px; } .content-box .col1-4 { width: 225px; float: left; margin-right: 18px; } .content-box .col2-4 { width: 468px; float: left; margin-right: 18px; } .content-box .col3-4 { width: 711px; float: left; margin-right: 18px; } /* cols for boxes with sidebars */ .content-box .col1-2 .col1-2 { width: 225px; float: left; margin-right: 18px; } .content-box .col2-3 .col1-2 { width: 306px; float: left; margin-right: 18px; } .content-box .col3-4 .col1-2 { width: 346px; float: left; margin-right: 19px; } .content-box .col3-4 .col1-3 { width: 225px; float: left; margin-right: 18px; } .content-box .col3-4 .col2-3 { width: 468px; float: left; margin-right: 18px; } .sidebar1-2 .sidebar .col1-2 { width: 214px; float: left; margin-right: 20px;} /* cols for boxes(without sidebars only) inside of main columns */ .col1-2 .content-box .col1-2 { width: 210px; float: left; margin-right: 18px; } .col2-3 .content-box .col1-2 { width: 296px; float: left; margin-right: 18px; } .col2-3 .content-box .col1-3 { width: 192px; float: left; margin-right: 17px; } .col2-3 .content-box .col2-3 { width: 401px; float: left; margin-right: 17px; } .col2-4 .content-box .col1-2 { width: 210px; float: left; margin-right: 18px; } .col3-4 .content-box .col1-2 { width: 339px; float: left; margin-right: 18px; } .col3-4 .content-box .col1-3 { width: 220px; float: left; margin-right: 18px; } .col3-4 .content-box .col2-3 { width: 458px; float: left; margin-right: 18px; } /******************************* **** DESIGN of content boxes *** *******************************/ /* ---IEJ */ .content-box { margin-bottom: 25px; background: #ffffff; border:1px solid var(--border); border-radius: var(--radius-large); box-shadow: var(--shadow);overflow: hidden; transition: box-shadow .2s ease;} .content-box:hover { box-shadow: var(--shadow-hover); } .content-box .box-header { min-height: 48px; position: relative; background: linear-gradient( 180deg,#ffffff 0%,#f7f9f8 100%); border-bottom:1px solid var(--border);} .content-box .box-body {background: #ffffff;border: 0;border-radius: 0;} .content-box .box-wrap {padding:22px 22px 15px;} .box-header h2 {margin-top: 20px;padding:12px 20px;color: var(--text-dark);font-size: 17px;font-weight: 600;background: none;} .box-header .tabs {position: absolute; top: 9px;right: 12px;} .box-header .tabs li { float: left; margin-left: 3px; font-size: 11px; line-height: 20px; font-weight: bold; } .box-header .tabs li a {padding:5px 12px;color: var(--text);background: #f1f4f2;border: 1px solid var(--border);border-radius: 6px;} .box-header .tabs li a:hover {color: var(--eprms-green);background: #ffffff;} .box-header .tabs li.active a,.box-header .tabs li a.selected {color: #ffffff;background: var(--eprms-green);border-color: var(--eprms-green);} /* sliding boxes and tabs */ .box-slide-head span.slide-but, .box-slide-head td.slide-but span { display: block; text-indent: -9999px; width: 26px; height: 24px; background: url('../images/but_slide.png') center center no-repeat !important; cursor: pointer; } .box-slide-head td.slide-but { background: none; } td.box-slide-body { background: #F0f0f0 !important; } .box-header.box-slide-head .slide-but { position: absolute; top: 7px; right: 5px; } .box-header.box-slide-head .tabs { right: 36px; } /* iconbar */ .content-box .iconbar { background: #e9e9e9 url('../images/bck_iconbar.png') top center repeat-x; height: 143px; overflow: hidden; } .content-box .iconbar .box-wrap { background: url('../images/bck_iconbar_bottom.png') center bottom repeat-x; padding-top: 15px; padding-bottom: 25px; padding-left: 42px; padding-right: 42px; position: relative; overflow: hidden; height: 103px; } .iconbar .jcarousel-list { height: 100px; overflow: hidden; } .iconbar .jcarousel-prev { background: #f9f9f9; display: block; width: 20px; height: 40px; text-indent: -9999px; border: 1px solid #FFFFFF; border-left-width: 0px; position: absolute; top: 29px; left: -42px; -moz-border-radius: 0px 3px 3px 0px; -webkit-border-radius: 0px 3px 3px 0px; border-radius: 0px 3px 3px 0px; -moz-box-shadow: 2px 1px 4px #dddddd; -webkit-box-shadow: 2px 1px 4px #dddddd; box-shadow: 2px 1px 4px #dddddd; *border-right: 1px solid #DDDDDD; *border-bottom: 1px solid #DDDDDD;} .iconbar .jcarousel-prev-disabled { background: url('../images/arrowleft_iconbar_off.png') center center no-repeat #f9f9f9 !important; cursor: auto !important; } .iconbar .jcarousel-prev { background: url('../images/arrowleft_iconbar_act.png') center center no-repeat #f9f9f9; cursor: pointer; } .iconbar .jcarousel-prev:hover { background: url('../images/arrowleft_iconbar_ovr.png') center center no-repeat #ffffff;} .iconbar .jcarousel-next { background: #f9f9f9; display: block; width: 20px; height: 40px; text-indent: -9999px; border: 1px solid #FFFFFF; border-right-width: 0px; position: absolute; top: 29px; right: -42px; -moz-border-radius: 3px 0px 0px 3px; -webkit-border-radius: 3px 0px 0px 3px; border-radius: 3px 0px 0px 3px; -moz-box-shadow: -2px 1px 4px #dddddd; -webkit-box-shadow: -2px 1px 4px #dddddd; box-shadow: -2px 1px 4px #dddddd; *border-left: 1px solid #DDDDDD; *border-bottom: 1px solid #DDDDDD;} .iconbar .jcarousel-next-disabled { background: url('../images/arrowright_iconbar_off.png') center center no-repeat #f9f9f9 !important; cursor: auto !important; } .iconbar .jcarousel-next { background: url('../images/arrowright_iconbar_act.png') center center no-repeat #f9f9f9; cursor: pointer; } .iconbar .jcarousel-next:hover { background: url('../images/arrowright_iconbar_ovr.png') center center no-repeat #ffffff;} .main-icons { margin: 0px; padding: 0px; } .main-icons ul { width: 100%; } .main-icons li { width: 120px; float: left; text-align: center; margin: 0px 5px 0px 5px; padding: 1px 0px 5px 0px; } .main-icons li.active, .main-icons li:hover { background: url('../images/bck_iconbar_ovr.png') center -15px no-repeat ; width: 118px; padding: 0px 0px 5px 0px; border: 1px solid #f3f3f3; border-bottom-width: 0px; -moz-border-radius: 5px 5px 5px 5px; -webkit-border-radius: 5px 5px 5px 5px; border-radius: 5px 5px 5px 5px; } .main-icons a { color: #333333; text-decoration: none; display: block; padding-top: 14px; text-shadow:0px 1px 2px rgba(0, 0, 0, .25); } .main-icons a:hover { color: #00A5C4; text-decoration: none; padding-top: 13px; text-shadow:0px 1px 10px rgba(255, 255, 255, 1.0); border: 1px solid #FFFFFF; border-bottom-width: 0px; -moz-border-radius: 4px 4px 0px 0px; -webkit-border-radius: 4px 4px 0px 0px; border-radius: 4px 4px 0px 0px; } .main-icons li.active a { color: #47AB00; text-decoration: none; padding-top: 13px; text-shadow:0px 1px 1px rgba(71, 171, 0, .4); border: 1px solid #FFFFFF; border-bottom-width: 0px; -moz-border-radius: 4px 4px 0px 0px; -webkit-border-radius: 4px 4px 0px 0px; border-radius: 4px 4px 0px 0px; } .main-icons .icon { display: block; width: 64px; height: 64px; margin: 0px auto; } .main-icons .text { display: block; padding: 5px 0px 0px 0px; } /* elements inside of content boxes */ .box-body p { margin: 0px; margin: 0px; padding-bottom: 20px; } /*** sidebars ***/ .content-box .sidebar1-2 { width: 100%; background: url('../images/bck_sidebar.png') 486px 0px repeat-y; margin-bottom: 10px;} .content-box .sidebar1-2 .sidebar { width: 448px; float: right; padding: 10px 10px 15px 10px; } .content-box .sidebar1-3 { width: 100%; background: url('../images/bck_sidebar.png') 648px 0px repeat-y; margin-bottom: 10px;} .content-box .sidebar1-3 .sidebar { width: 286px; float: right; padding: 10px 10px 15px 10px; } .content-box .sidebar1-4 { width: 100%; background: url('../images/bck_sidebar.png') 729px 0px repeat-y; margin-bottom: 10px;} .content-box .sidebar1-4 .sidebar { width: 205px; float: right; padding: 10px 10px 15px 10px; } /* .sidemenu { width: 100%; } .sidemenu ul.list { padding-bottom: 15px; line-height: 16px; } .sidemenu ul.list li { margin-bottom: 3px; background: url('../images/ui-bg_glass_100_f6f6f6_1x400.png') left center repeat-x; border: 1px solid #DDDDDD; border-bottom: 1px solid #CCCCCC; -moz-border-radius: 3px 3px 3px 3px; -webkit-border-radius: 3px 3px 3px 3px; border-radius: 3px 3px 3px 3px; } .sidemenu ul.list li:hover { background: #FFFFFF; } .sidemenu ul.list a { color: #00A5C4; text-decoration: none; background: url('../images/arrow_sm_blue.gif') 7px 10px no-repeat; display: block; padding: 5px 5px 5px 17px; } .sidemenu ul.list a:hover { color: #00A5C4; text-decoration: none; background: url('../images/arrow_sm_blue.gif') 7px 10px no-repeat; } .sidemenu ul.list li.active { background: #FFFFFF; } .sidemenu ul.list li.active a { color: #333333; text-decoration: none; background: url('../images/arrow_sm_black.gif') 7px 10px no-repeat; font-weight: bold; } .sidebar p { padding-bottom: 10px; } */ /************** **** tables *** **************/ table { width: 100%; margin: 0px; margin-bottom: 20px; } table.basic { border-spacing: 0px; border-collapse: separate; border-top: 3px solid #cccccc; border-bottom: 1px solid #FFFFFF; line-height: 16px; } table.basic caption { background: none #bbbbbb; color: #FFFFFF; font-size: 14px; padding: 5px 11px 5px 11px; text-align: center;} table.basic tr:hover { background: #F5F5F5 !important; } table.basic thead { color: #333333; } table.basic th, table.basic .title { border-top: 1px solid #FFFFFF; border-bottom: 1px solid #cccccc; font-weight: bold; padding: 3px 6px 3px 0px; white-space: nowrap; text-align: left; } table.basic tbody th { } table.basic td { background: none !important; border-top: 1px solid #FFFFFF; border-bottom: 1px solid #cccccc; padding: 3px 8px 3px 0px !important; line-height: 16px !important; } table.basic thead { border-top: 1px solid #FFFFFF; border-bottom: 1px solid #cccccc; padding: 3px 6px 3px 0px; white-space: nowrap; } table.basic td p { padding-bottom: 3px; padding-top: 3px; } /*table.style1 { border: 5px solid #DDDDDD; }*/ table.style1 caption { background: none #959595; color: #FFFFFF; font-size: 14px; padding: 5px 11px 5px 11px; text-align: left; } table.style1 tr:hover { background: url('../images/bck_black_10.png'); } table.style1 th { background: #DDDDDD; border-bottom: 1px solid #FFFFFF; line-height: 22px; padding: 4px 6px 4px 6px; color: #333333; white-space: nowrap; text-align: left; } table.style1 thead th { padding-top: 2px; } table.style1 thead td { background: #DDDDDD; border-bottom: 1px solid #FFFFFF; text-align: left; line-height: 22px; padding: 2px 6px 4px 6px; white-space: nowrap; } table.style1 tbody th, table.style1 tbody .title { background: url('../images/bck_black_5.png'); font-weight: bold; white-space: nowrap; color: #666666; } table.style1 td { background: url('../images/bck_white_75.png'); border-bottom: 1px solid #DDDDDD; line-height: 26px; padding: 4px 6px 4px 6px; vertical-align: middle;} table.style1 .icon16 { margin-top: 3px; margin-bottom: 3px; } table.style1 td.vcenter { vertical-align: middle; } table.style1 td p { padding-bottom: 3px; padding-top: 3px; } .chart-wrap table { border: 5px solid #DDDDDD; } .chart-wrap caption { background: none #959595; color: #FFFFFF; font-size: 14px; padding: 5px 11px 5px 11px; text-align: left; } .chart-wrap tr:hover { background: url('../images/bck_black_10.png'); } .chart-wrap th { background: #DDDDDD; border-bottom: 1px solid #FFFFFF; text-align: left; line-height: 22px; padding: 4px 6px 4px 6px; color: #333333; white-space: nowrap; } .chart-wrap thead th { padding-top: 2px; } .chart-wrap thead td { background: #DDDDDD; border-bottom: 1px solid #FFFFFF; text-align: left; line-height: 22px; padding: 2px 6px 4px 6px; white-space: nowrap; } .chart-wrap tbody th { background: url('../images/bck_black_5.png'); font-weight: bold; white-space: nowrap; color: #666666; } .chart-wrap td { background: url('../images/bck_white_75.png'); border-bottom: 1px solid #DDDDDD; line-height: 22px; padding: 4px 6px 4px 6px; } table .vcenter { vertical-align: middle; } table .full { width: 100%; } table .value { color: #47AB00; } table .nowrap { white-space: nowrap; } /*** forms ***/ form { width: 100%; } label { line-height: 22px; cursor: pointer; } label:hover { color: #333333; } input.checkbox { display: inline; position: relative; left: 1px; top: 1px; cursor: pointer;} input.radio { display: inline; position: relative; top: 2px; left: -1px; } input.text { display: inline; border: 1px solid #B8B8B8; font-size: 12px; font-family: arial; color: #333333; height: 16px; padding: 2px 4px 2px 4px; } input.submit { display: inline; border-width: 0px; font-size: 11px; font-family: arial; color: #FFFFFF; font-weight: bold; cursor: pointer; background: url('../images/button_glas1.png') center center repeat-x #333333; padding: 3px 10px 3px 10px; -moz-border-radius: 3px 3px 3px 3px; -webkit-border-radius: 3px 3px 3px 3px; border-radius: 3px 3px 3px 3px;} input.form-file { display: inline; height: auto; font-size: 12px !important; } select { display: inline; border: 1px solid #B8B8B8; font-size: 12px; font-family: arial; color: #333333; height: 22px; padding: 2px; } textarea { display: inline; border: 1px solid #B8B8B8; font-size: 12px; font-family: arial; color: #333333; padding: 4px; border-radius: 4px; } /* All text-type inputs and textareas: 4px corners */ input.text, input[type="text"], input[type="password"], input[type="email"], input[type="number"], input[type="tel"], input[type="date"], input[type="search"], input[type="url"], input:not([type]), textarea { border-radius: 4px; } .form-label { display: block; width: 140px; } /* 26.09.2026*/ .form-field { padding-bottom: 5px; } span.required { color: #FF0000; font-weight: bold; } label.error { color: #FF0000; } /*** page navigation ***/ .tab-footer { width: auto; padding-bottom: 10px; margin-top: -10px; } .pager { font-size: 11px; line-height: 20px; } .pager a { display: block; float: left; } .pager .nav { display: block; float: left; } .pager .nav a { width: 20px; height: 20px; border: 1px solid #dddddd; border-bottom: 1px solid #cccccc; } .pager .nav a span { display: block; font-size: 0%; visibility: hidden; text-indent: -9999px; } .pager a.first { background: url('../images/arrow_leftend_off.png') center center no-repeat; border-right-width: 0px; -moz-border-radius: 3px 0px 0px 3px; -webkit-border-radius: 3px 0px 0px 3px; border-radius: 3px 0px 0px 3px; } .pager a.first:hover { background: url('../images/arrow_leftend_ovr.png') center center no-repeat; } .pager a.previous { background: url('../images/arrow_left_off.png') center center no-repeat; border-left-width: 0px; -moz-border-radius: 0px 3px 3px 0px; -webkit-border-radius: 0px 3px 3px 0px; border-radius: 0px 3px 3px 0px; } .pager a.previous:hover { background: url('../images/arrow_left_ovr.png') center center no-repeat; } .pager a.last { background: url('../images/arrow_rightend_off.png') center center no-repeat; border-left-width: 0px; -moz-border-radius: 0px 3px 3px 0px; -webkit-border-radius: 0px 3px 3px 0px; border-radius: 0px 3px 3px 0px; } .pager a.last:hover { background: url('../images/arrow_rightend_ovr.png') center center no-repeat; } .pager a.next { background: url('../images/arrow_right_off.png') center center no-repeat; border-right-width: 0px; -moz-border-radius: 3px 0px 0px 3px; -webkit-border-radius: 3px 0px 0px 3px; border-radius: 3px 0px 0px 3px; } .pager a.next:hover { background: url('../images/arrow_right_ovr.png') center center no-repeat; } .pager .pages { display: block; float: left; margin: 0px 4px 0px 4px; font-weight: bold; } .pager .pages a { min-width: 20px; margin: 0px 1px 0px 1px; background: url("../images/button_glas2.png") repeat-x center center #EEEEEE; text-align: center; border: 1px solid #dddddd; border-bottom: 1px solid #cccccc; color: #333333; text-decoration: none; -moz-border-radius: 3px 3px 3px 3px; -webkit-border-radius: 3px 3px 3px 3px; border-radius: 3px 3px 3px 3px; } .pager .pages a span { padding: 0px 2px 0px 2px; } .pager .pages a:hover { background: url('../images/bck_white_50.png'); color: #00A5C4; text-decoration: none; } .pager .pages a.active { background: url('../images/page_active.gif'); color: #FFFFFF; text-decoration: none; font-weight: bold; border-width: 0px; line-height: 22px; min-width: 22px; } /* --------------------------------------------------------- QUOTE ---IEJ --------------------------------------------------------- */ q { display: block; min-height: 42px; padding: 12px 15px 12px 35px; color: var(--text); background: #f7faf8 url("../images/quote.png") no-repeat 10px 12px; border: 1px solid var(--border); border-left: 4px solid var(--eprms-green); border-radius: 7px; font-family: "Segoe UI", Arial, sans-serif; font-size: 13px;line-height: 20px; } q cite { display: block;padding-top: 7px;color: var(--text-light);font-size: 11px;} /* --------------------------------------------------------- RULES ---IEJ --------------------------------------------------------- */ .rule, .rule2 { padding-top: 5px;padding-bottom: 18px; background: linear-gradient( to right, transparent, var(--border), transparent ) center center no-repeat; background-size: 100% 1px; } /* --------------------------------------------------------- FOOTER ---IEJ --------------------------------------------------------- */ .footer {width: 100%;min-width: 1000px;padding:25px 0;color: #8b9690;background: #ffffff;border-top:1px solid var(--border);font-size: 12px;} .footer strong { color: var(--text);} .footer .copy a {color: var(--eprms-green);font-weight: 600;} .footer .copy a:hover {color: var(--eprms-green-dark);} /* ********************************************************************* * DataTables Styles * *********************************************************************/ .dataTables_wrapper { } .dataTables_wrapper table { width: 100% !important; margin: 0px 0px 20px 0px; } .dataTables_wrapper .dataTables_length { float: left; margin: 0px 0px 15px 0px; } .dataTables_wrapper .dataTables_filter { float: right; margin: 0px 0px 15px 0px; } .dataTables_wrapper .dataTables_filter input, .dataTables_wrapper .dataTables_length select { height: 28px; padding: 2px 8px; font: inherit; color: var(--text-dark); background: #ffffff; border: 1px solid #cccccc; border-radius: 6px; vertical-align: middle; box-sizing: border-box; } .dataTables_wrapper .dataTables_filter input:focus, .dataTables_wrapper .dataTables_length select:focus { outline: none; border-color: var(--eprms-green); box-shadow: 0 0 0 3px rgba(25, 135, 84, .12); } .dataTables_wrapper .dataTables_info { padding-top: 4px; color: var(--text-light); } /* sorting arrows (DataTables 1.6 and 1.10 use the same classes) */ .datatable { clear: both; } .dataTables_wrapper thead th.sorting, .dataTables_wrapper thead th.sorting_asc, .dataTables_wrapper thead th.sorting_desc { cursor: pointer; } .dataTables_wrapper thead th.sorting:after, .dataTables_wrapper thead th.sorting_asc:after, .dataTables_wrapper thead th.sorting_desc:after { padding-left: 6px; font-size: 10px; font-weight: normal; } .dataTables_wrapper thead th.sorting:after { content: "\2195"; color: #b3bcb7; } .dataTables_wrapper thead th.sorting_asc:after { content: "\25B2"; color: var(--eprms-green); } .dataTables_wrapper thead th.sorting_desc:after { content: "\25BC"; color: var(--eprms-green); } /* pagination = the tab buttons in .box-header .tabs (DataTables 1.6: .paginate_active, 1.10: .current / .disabled) */ .dataTables_wrapper .dataTables_paginate { float: right; display: flex; gap: 4px; align-items: center; margin-top: -4px; padding-bottom: 10px; font-size: 12px; } .dataTables_wrapper .dataTables_paginate span { display: contents; } .dataTables_wrapper .dataTables_paginate .paginate_button, .dataTables_wrapper .dataTables_paginate .paginate_active { display: inline-block; box-sizing: border-box; min-width: 28px; height: 28px; padding: 0px 8px; line-height: 26px; text-align: center; font-weight: 600; color: var(--text); text-decoration: none; background: #f1f4f2; border: 1px solid var(--border); border-radius: 6px; cursor: pointer; } .dataTables_wrapper .dataTables_paginate .paginate_button:hover { color: var(--eprms-green); background: #ffffff; text-decoration: none; } .dataTables_wrapper .dataTables_paginate .paginate_active, .dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover { color: #ffffff; background: var(--eprms-green); border-color: var(--eprms-green); cursor: default; } .dataTables_wrapper .dataTables_paginate .paginate_button.disabled, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover, .dataTables_wrapper .dataTables_paginate .paginate_button_disabled { color: var(--text); background: #f1f4f2; opacity: .45; cursor: default; } .dataTables_wrapper .dataTables_paginate .first, .dataTables_wrapper .dataTables_paginate .previous, .dataTables_wrapper .dataTables_paginate .next, .dataTables_wrapper .dataTables_paginate .last { font-size: 0; } .dataTables_wrapper .dataTables_paginate .first:before, .dataTables_wrapper .dataTables_paginate .previous:before, .dataTables_wrapper .dataTables_paginate .next:before, .dataTables_wrapper .dataTables_paginate .last:before { font-size: 15px; line-height: 24px; } .dataTables_wrapper .dataTables_paginate .first:before { content: "\00AB"; } .dataTables_wrapper .dataTables_paginate .previous:before { content: "\2039"; } .dataTables_wrapper .dataTables_paginate .next:before { content: "\203A"; } .dataTables_wrapper .dataTables_paginate .last:before { content: "\00BB"; } /* ********************************************************************* * Modal window * *********************************************************************/ .pagetop .modal-window, .main .modal-window, .footer .modal-window { display: none; } .modal-window { width: auto; } .modal-window p { padding-bottom: 20px; line-height: 16px; } .modal-400 { width: 400px; } .modal-600 { width: 600px; } .modal-800 { width: 800px; } #fancybox-img { width: auto !important; } /* ********************************************************************* * WYSIWYG * *********************************************************************/ .jwysiwyg { min-height: 200px; } .tinymce { min-height: 300px; } .wysiwyg { width: auto !important; margin-bottom: 20px; } .wysiwyg iframe { width: 100% !important; } .mceEditor { display: block; margin-bottom: 20px; } .mceContentBody, table.mceLayout { width: 100% !important; } /* ********************************************************************* * Quick edit * *********************************************************************/ .edit-field textarea { width: 95% !important; } .edit-field input { width: auto !important; display: block; border: 1px solid #B8B8B8; font-size: 12px; font-family: arial; color: #333333; height: 16px; padding: 2px 4px 2px 4px; } .long input { width: 95% !important; } /* ********************************************************************* * Gallery * *********************************************************************/ .gallery { background: #FFFFFF; color: #333333; display:block; padding: 10px 10px 10px 10px; margin-bottom: 15px; border: 1px solid #DDDDDD; border-bottom: 1px solid #CCCCCC; -moz-border-radius: 3px 3px 3px 3px; -webkit-border-radius: 3px 3px 3px 3px; border-radius: 3px 3px 3px 3px; } .gallery li { display: inline-block; float: left; vertical-align: top; } .gal-large li { width: 148px; margin: 5px 5px 0px 5px; padding-bottom: 10px; } .gal-large .thumb { display: block; width: 140px; height: 140px; border: 1px solid #BBBBBB; padding: 3px; background: #FFFFFF; margin-bottom: 4px; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px;} .gal-large .title { color: #333333; display: block; font-size: 11px; line-height: 18px; padding: 0px 6px 0px 6px; background: url('../images/ui-bg_glass_100_f6f6f6_1x400.png') left center repeat-x; border: 1px solid #DDDDDD; border-bottom: 1px solid #CCCCCC; text-align: center; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; } .gal-large .title .wrap { display: block; white-space: nowrap; overflow: hidden; } .gal-large li:hover .title { color: #FFFFFF; height: 20px; position: relative; border-width: 0px; padding: 0px; } .gal-large li:hover .wrap { padding: 0px 6px 0px 6px; border: 1px solid #ffffff; min-width: 132px; overflow: visible; position: absolute; top: 0px; left: 0px; background: #333333; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; } .gal-small { padding: 8px; } .gal-small li { width: 56px; margin: 3px 3px 0px 3px; padding-bottom: 5px; } .gal-small .thumb { display: block; width: 48px; height: 48px; border: 1px solid #BBBBBB; padding: 3px; background: #FFFFFF; margin-bottom: 0px; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px;} .gal-footer { padding-bottom: 20px; } /* ************************** * Custom contents * **************************/ /* links with icons */ .icon-links { margin-bottom: 10px; } .icon-links li { padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px dashed #dddddd; } .icon-links li.lastlnk { padding-bottom: 10px; margin-bottom: 0px; border-bottom-width: 0px; } .icon-links .icon { width: 48px; height: 48px; float: left; background: url('../images/bck_icon48_dark.png') 0 0 no-repeat; padding: 6px; -moz-border-radius: 3px 3px 3px 3px; -webkit-border-radius: 3px 3px 3px 3px; border-radius: 3px 3px 3px 3px;} .icon-links a span { margin-left: 70px; display: block; font-size: 13px; padding-top: 6px; font-weight: bold; } .icon-links a:hover span { text-decoration: underline; } .icon-links p { margin-left: 70px; padding-bottom: 0px; padding-top: 5px;} .input_form td { padding: 4px;} /*--------------------------------------------------------------------------------------- /* UPLOAD FILES ---IEJ 26.09.2026 /*---------------------------------------------------------------------------------------*/ .pdata-upload-header {padding: 0 !important;background: #ffffff;border: 0 !important;} .pdata-upload-form { display: flex;flex-direction: column;align-items: stretch;gap: 10px;width: 420px;max-width: 100%;padding: 14px;box-sizing: border-box;background: #f7f9f8;border: 1px solid #dfe5e2;border-radius: 8px;box-shadow: 0 2px 6px rgba(0, 0, 0, .04);} /* Datei */ .upload-field {display: flex;flex-direction: column;gap: 5px;width: 100%;} .upload-field label {display: block;color: #53615b;font-size: 11px;font-weight: 600;text-transform: uppercase;letter-spacing: .03em;} .upload-field label i {margin-right: 5px;color: #198754;} .upload-file input[type="file"] {width: 100%;height: 36px;padding: 6px 9px;box-sizing: border-box;background: #ffffff;border: 1px solid #ccd5d1;border-radius: 6px;color: #53615b;font-family: "Segoe UI", Arial, sans-serif;font-size: 12px;} /* Dokumenttyp */ .upload-type {width: 100%;} .upload-type select {width: 100%;height: 36px;padding: 0 10px;box-sizing: border-box;background: #ffffff;border: 1px solid #ccd5d1;border-radius: 6px;color: #344054;font-family: "Segoe UI", Arial, sans-serif;font-size: 12px;} /* Upload Button */ .upload-action {display: flex;justify-content: flex-end;width: 100%;} .pdata-upload-button {height: 36px;min-width: 100px;padding: 0 16px;border: 1px solid #146c43;border-radius: 6px;background: #198754;color: #ffffff;font-family: "Segoe UI", Arial, sans-serif;font-size: 12px;font-weight: 600;cursor: pointer;box-shadow: 0 2px 4px rgba(25, 135, 84, .15); transition: background .15s ease, box-shadow .15s ease, transform .1s ease; } .pdata-upload-button:hover {background: #146c43;box-shadow: 0 4px 8px rgba(25, 135, 84, .20);transform: translateY(-1px);} .pdata-upload-button i {margin-right: 6px;} /* ========================================================= ePRMS - Uploaded Files ========================================================= */ .pdata-file-row { background: #ffffff; transition: background-color .15s ease, box-shadow .15s ease; } .pdata-file-row:hover {background: #f7fbf9;} /* File name */ .pdata-file-name {padding: 9px 12px !important;vertical-align: middle !important;} .pdata-file-name a {display: inline-flex;align-items: center;gap: 8px;color: #198754;font-size: 12px;font-weight: 500;text-decoration: none;} .pdata-file-name a i {width: 20px;height: 20px;display: inline-flex;align-items: center;justify-content: center;background: #e9f7ef;border-radius: 5px;color: #198754;font-size: 11px;} .pdata-file-name a:hover {color: #146c43;text-decoration: underline;} .pdata-file-name a:hover i {background: #d9f2e3;} /* File type */ .pdata-file-type {padding: 9px 12px !important;vertical-align: middle !important;} .pdata-file-type a {display: inline-block;padding: 4px 9px;background: #f1f4f2;border: 1px solid #e0e5e2;border-radius: 5px;color: #59665f;font-size: 11px;font-weight: 500;text-decoration: none;} .pdata-file-type a:hover {background: #e9f7ef;border-color: #b9ddc8;color: #198754;} /* Delete */ .pdata-file-delete {width: 40px;padding: 9px 8px !important;text-align: center;vertical-align: middle !important;} .pdata-delete-button {width: 28px;height: 28px;display: inline-flex;align-items: center;justify-content: center;background: #fff5f5;border: 1px solid #f0d4d4;border-radius: 6px;color: #c0392b;text-decoration: none; transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .1s ease; } .pdata-delete-button:hover { background: #fce8e8;border-color: #e6b8b8;color: #a93226;transform: translateY(-1px);} .pdata-delete-button i { font-size: 12px;} .pdata-files-header th {padding: 8px 12px !important;background: #f7f9f8;border-bottom: 1px solid #dfe5e2;color: #68756f;font-size: 10px;font-weight: 600;text-transform: uppercase;letter-spacing: .04em;} .pdata-files-header th:last-child {width: 40px;} /* ========================================================= ePRMS - Surgical Intervention ========================================================= */ .surgical-table { width: 420px;border-collapse: separate !important;border-spacing: 0;background: #ffffff;border: 1px solid #dfe5e2;border-radius: 8px;overflow: hidden;box-shadow: 0 2px 6px rgba(0, 0, 0, .04);} /* --------------------------------------------------------- Header --------------------------------------------------------- */ .surgical-table thead th {padding: 10px 12px !important;background: #f7f9f8;border-bottom: 1px solid #dfe5e2;color: #53615b;font-size: 11px;font-weight: 600;text-transform: uppercase;letter-spacing: .03em;text-align: left;} .surgical-table thead th i {margin-right: 6px;color: #198754;} .surgical-function-header {width: 70px;} /* --------------------------------------------------------- Add row --------------------------------------------------------- */ .surgical-add-row {background: #fbfcfc;} .surgical-add-row td {padding: 10px 12px !important;border-bottom: 1px solid #e8ecea;} /* --------------------------------------------------------- Select --------------------------------------------------------- */ .surgical-select {width: 100%;max-width: 360px;height: 36px;padding: 0 10px;box-sizing: border-box;background: #ffffff;border: 1px solid #ccd5d1;border-radius: 6px;color: #344054;font-family: "Segoe UI", Arial, sans-serif;font-size: 12px;cursor: pointer;transition:border-color .15s ease,box-shadow .15s ease;} .surgical-select:hover {border-color: #198754;} .surgical-select:focus {outline: none;border-color: #198754;box-shadow:0 0 0 3px rgba(25, 135, 84, .12);} /* --------------------------------------------------------- Action column --------------------------------------------------------- */ .surgical-action {width: 70px;padding: 8px 10px !important;text-align: center;vertical-align: middle !important;} /* --------------------------------------------------------- Add button --------------------------------------------------------- */ .surgical-add-button {height: 34px;min-width: 72px;padding: 0 12px;border: 1px solid #146c43;border-radius: 6px;background: #198754;color: #ffffff;font-family: "Segoe UI", Arial, sans-serif;font-size: 11px;font-weight: 600;cursor: pointer;box-shadow: 0 2px 4px rgba(25, 135, 84, .15);transition:background .15s ease,box-shadow .15s ease,transform .1s ease;} .surgical-add-button i {margin-right: 5px;} .surgical-add-button:hover {background: #146c43;box-shadow:0 4px 8px rgba(25, 135, 84, .20);transform: translateY(-1px);} .surgical-add-button:active {transform: translateY(0);} /* --------------------------------------------------------- Existing rows --------------------------------------------------------- */ .surgical-row {background: #ffffff; transition: background-color .15s ease; } .surgical-row:hover {background: #f7fbf9;} .surgical-row td {padding: 9px 12px !important;border-bottom: 1px solid #edf1ef;} .surgical-row:last-child td {border-bottom: 0;} /* --------------------------------------------------------- Surgical name --------------------------------------------------------- */ .surgical-name { color: #344054; font-size: 12px; font-weight: 500; } .surgical-name i {margin-right: 7px;color: #198754;font-size: 12px;} /* --------------------------------------------------------- Delete button --------------------------------------------------------- */ .surgical-delete-button {width: 28px;height: 28px;display: inline-flex;align-items: center;justify-content: center;background: #fff5f5;border: 1px solid #f0d4d4;border-radius: 6px;color: #c0392b;text-decoration: none; transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .1s ease; } .surgical-delete-button:hover {background: #fce8e8;border-color: #e6b8b8;color: #a93226;transform: translateY(-1px);} .surgical-delete-button i {font-size: 12px;} /* --------------------------------------------------------- Responsive --------------------------------------------------------- */ @media (max-width: 500px) { .surgical-table {font-size: 11px;} .surgical-select {max-width: 100%;} .surgical-action { width: 60px; padding-left: 5px !important;padding-right: 5px !important;} .surgical-add-button { min-width: 60px;padding: 0 8px;} .surgical-add-button i {margin-right: 3px;} } /* --------------------------------------------------------- Patient timeline (adm_patient.php) --------------------------------------------------------- */ .eprms-timeline {width: 400px;box-sizing: border-box;background: #ffffff;border: 1px solid #dfe5e2;border-radius: var(--radius);box-shadow: 0 2px 6px rgba(0, 0, 0, .04);overflow: hidden;} .eprms-timeline {--tl-visit: var(--eprms-green);--tl-op: var(--eprms-blue);} .eprms-timeline-head {display: flex;align-items: center;justify-content: space-between;gap: 10px;padding: 9px 12px;background: #f7f9f8;border-bottom: 1px solid #dfe5e2;} .eprms-timeline-head h4 {margin: 0;padding: 0;color: #53615b;font-size: 11px;font-weight: 600;text-transform: uppercase;letter-spacing: .03em;} .eprms-timeline-count {display: inline-block;min-width: 18px;margin-left: 6px;padding: 0 6px;border-radius: 9px;background: var(--eprms-green-light);color: var(--eprms-green-dark);font-size: 10px;font-weight: 600;line-height: 18px;text-align: center;letter-spacing: 0;} .eprms-timeline-legend {display: flex;gap: 10px;margin: 0 !important;padding: 0;list-style: none;} .eprms-timeline-legend li {display: flex;align-items: center;gap: 4px;color: var(--text-light);font-size: 10px;} .eprms-timeline-legend li:before {content: "";width: 7px;height: 7px;border-radius: 50%;background: var(--tl-dot);} .eprms-timeline .tl-visit {--tl-dot: var(--tl-visit);} .eprms-timeline .tl-op {--tl-dot: var(--tl-op);} .eprms-timeline-body {max-height: 250px;overflow-y: auto;padding: 6px 0;scrollbar-width: thin;scrollbar-color: #ccd5d1 transparent;} .eprms-timeline-empty {margin: 0;padding: 18px 12px;color: var(--text-light);font-style: italic;text-align: center;} .eprms-timeline-list {position: relative;margin: 0 !important;padding: 0;list-style: none;} .eprms-timeline-list li {position: relative;margin: 0;padding: 0 0 0 30px;} /* rail: runs through the dots, stops at the first and last one */ .eprms-timeline-list li:before {content: "";position: absolute;left: 16px;top: 0;bottom: 0;width: 2px;background: #e3e9e6;} .eprms-timeline-list li:first-child:before {top: 15px;} .eprms-timeline-list li:last-child:before {bottom: auto;height: 15px;} .eprms-timeline-list li:only-child:before {display: none;} /* dot */ .eprms-timeline-list li:after {content: "";position: absolute;left: 12px;top: 11px;width: 10px;height: 10px;box-sizing: border-box;border-radius: 50%;background: #ffffff;border: 2px solid var(--tl-dot);box-shadow: 0 0 0 3px #ffffff;} .eprms-timeline-list a {display: block;margin: 0 8px 0 0;padding: 6px 8px;border-radius: 6px;color: var(--text);text-decoration: none;transition: background-color .15s ease;} .eprms-timeline-list a:hover {background: #f3f8f5;} .eprms-timeline-list a:focus-visible {outline: none;box-shadow: 0 0 0 3px rgba(25, 135, 84, .18);} .eprms-timeline-list li:hover:after {background: var(--tl-dot);} .eprms-timeline .tl-meta {display: flex;align-items: center;gap: 8px;} .eprms-timeline .tl-date {color: var(--text-dark);font-size: 12px;font-weight: 600;font-variant-numeric: tabular-nums;} .eprms-timeline .tl-type {padding: 0 6px;border-radius: 4px;background: #f1f4f2;color: #53615b;font-size: 10px;font-weight: 600;line-height: 16px;text-transform: uppercase;letter-spacing: .03em;} .eprms-timeline .tl-files {display: inline-flex;margin-left: auto;color: var(--text-light);} .eprms-timeline a:hover .tl-files {color: var(--eprms-green);} .eprms-timeline .tl-note {display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;margin-top: 1px;color: var(--text);font-size: 12px;line-height: 1.4;} /* --------------------------------------------------------- Patient field cards: MRN / Insurance, Pop-up Reminder (adm_patient.php) Same frame as .eprms-timeline --------------------------------------------------------- */ .eprms-field-card {display: flex;align-items: center;gap: 10px;width: 400px;box-sizing: border-box;margin: 0 0 15px;padding: 10px 12px;background: #ffffff;border: 1px solid #dfe5e2;border-radius: var(--radius);box-shadow: 0 2px 6px rgba(0, 0, 0, .04);} .eprms-field-label {margin: 0;color: #53615b;font-size: 11px;font-weight: 600;text-transform: uppercase;letter-spacing: .03em;white-space: nowrap;} .eprms-field-mrn {margin-right: 6px;padding: 0 8px;border-radius: 4px;background: var(--eprms-green-light);color: var(--eprms-green-dark);font-size: 12px;font-weight: 600;line-height: 24px;font-variant-numeric: tabular-nums;white-space: nowrap;} .eprms-field-card .eprms-field-input {flex: 1;min-width: 0;height: 30px;box-sizing: border-box;padding: 0 8px;background: #ffffff;border: 1px solid #ccd5d1;border-radius: 4px;color: #344054;font-family: "Segoe UI", Arial, sans-serif;font-size: 12px;transition: border-color .15s ease, box-shadow .15s ease;} .eprms-field-card .eprms-field-input:hover {border-color: var(--eprms-green);} .eprms-field-card .eprms-field-input:focus {outline: none;border-color: var(--eprms-green);box-shadow: 0 0 0 3px rgba(25, 135, 84, .12);} /* --------------------------------------------------------- Patient questionnaire (pms_questionaire.php) Same card frame as .eprms-timeline / .eprms-field-card --------------------------------------------------------- */ .eprms-q {display: grid;gap: 16px;clear: both;} .eprms-q-card {background: #ffffff;border: 1px solid #dfe5e2;border-radius: var(--radius);box-shadow: 0 2px 6px rgba(0, 0, 0, .04);overflow: hidden;} .eprms-q-head {display: flex;align-items: center;justify-content: space-between;gap: 10px;padding: 9px 14px;background: #f7f9f8;border-bottom: 1px solid #dfe5e2;} .eprms-q-title {margin: 0;padding: 0;color: #53615b;font-size: 11px;font-weight: 600;text-transform: uppercase;letter-spacing: .03em;} .eprms-q-count {min-width: 18px;padding: 0 7px;border-radius: 9px;background: #f1f4f2;color: var(--text-light);font-size: 10px;font-weight: 600;line-height: 18px;text-align: center;font-variant-numeric: tabular-nums;} .eprms-q-count.has {background: var(--eprms-green-light);color: var(--eprms-green-dark);} /* Patient card */ .eprms-q-patient {display: flex;flex-wrap: wrap;align-items: center;gap: 10px 28px;padding: 12px 16px;} .eprms-q-patient-name {color: var(--text-dark);font-size: 16px;font-weight: 600;} .eprms-q-patient-name span {margin-left: 6px;color: var(--text-light);font-size: 13px;font-weight: 400;} .eprms-q-facts {display: flex;flex-wrap: wrap;gap: 8px 22px;margin: 0;} .eprms-q-facts div {display: flex;align-items: center;gap: 8px;} .eprms-q-facts dt {color: #53615b;font-size: 11px;font-weight: 600;text-transform: uppercase;letter-spacing: .03em;} .eprms-q-facts dd {margin: 0;color: var(--text-dark);font-weight: 600;font-variant-numeric: tabular-nums;} .eprms-q-facts dd.eprms-q-pill {padding: 0 8px;border-radius: 4px;background: var(--eprms-green-light);color: var(--eprms-green-dark);line-height: 24px;} .eprms-q-facts .eprms-q-updated dd {color: var(--text-light);font-weight: 400;} .eprms-q-patient .eprms-q-facts {flex: 1 1 auto;} .eprms-q-facts .eprms-q-updated {margin-left: auto;} /* Condition cards */ .eprms-q-groups {display: grid;grid-template-columns: repeat(3, minmax(0, 1fr));gap: 16px;align-items: start;} .eprms-q-checks {display: grid;gap: 2px;padding: 8px;} .eprms-q-check {position: relative;display: flex;align-items: center;gap: 10px;padding: 6px 8px;border-radius: 6px;color: var(--text-dark);font-size: 13px;cursor: pointer;user-select: none;transition: background-color .15s ease;} .eprms-q-check:hover {background: #f3f8f5;} .eprms-q-check input {position: absolute;opacity: 0;width: 1px;height: 1px;margin: 0;} .eprms-q-box {flex: none;position: relative;width: 18px;height: 18px;box-sizing: border-box;border: 2px solid #b5c0bb;border-radius: 4px;background: #ffffff;transition: background-color .15s ease, border-color .15s ease;} .eprms-q-check:hover .eprms-q-box {border-color: var(--eprms-green);} .eprms-q-check input:checked + .eprms-q-box {background: var(--eprms-green);border-color: var(--eprms-green);} .eprms-q-check input:checked + .eprms-q-box:after {content: "";position: absolute;left: 4px;top: 0;width: 5px;height: 10px;border: solid #ffffff;border-width: 0 2px 2px 0;transform: rotate(45deg);} .eprms-q-check:has(input:checked) {background: var(--eprms-green-light);font-weight: 600;} .eprms-q-check input:focus-visible + .eprms-q-box {box-shadow: 0 0 0 3px rgba(25, 135, 84, .2);} /* Text questions */ .eprms-q-questions {display: grid;grid-template-columns: repeat(2, minmax(0, 1fr));gap: 1px;background: #edf1ef;} .eprms-q-question {display: grid;gap: 8px;align-content: start;padding: 14px 16px;background: #ffffff;} .eprms-q-wide {grid-column: 1 / -1;} .eprms-q-question-top {display: flex;align-items: center;justify-content: space-between;gap: 10px;min-height: 26px;} .eprms-q-question-top > label:first-child {color: var(--text-dark);font-size: 13px;font-weight: 600;} .eprms-q-question textarea {width: 100%;min-height: 64px;box-sizing: border-box;padding: 7px 9px;background: #ffffff;border: 1px solid #ccd5d1;border-radius: 4px;color: #344054;font: 12px/1.45 "Segoe UI", Arial, sans-serif;resize: vertical;transition: border-color .15s ease, box-shadow .15s ease;} .eprms-q-question textarea:hover {border-color: var(--eprms-green);} .eprms-q-question textarea:focus {outline: none;border-color: var(--eprms-green);box-shadow: 0 0 0 3px rgba(25, 135, 84, .12);} .eprms-q-question textarea::placeholder {color: #a9b3ae;} /* Yes / No switch: one checkbox, two halves */ .eprms-q-yn {position: relative;display: inline-flex;flex: none;border: 1px solid #ccd5d1;border-radius: 6px;overflow: hidden;cursor: pointer;user-select: none;} .eprms-q-yn input {position: absolute;opacity: 0;width: 1px;height: 1px;margin: 0;} .eprms-q-yn span {padding: 2px 12px;color: var(--text-light);font-size: 11px;font-weight: 600;line-height: 18px;transition: background-color .15s ease, color .15s ease;} .eprms-q-yn input:not(:checked) ~ .no {background: #f1f4f2;color: #53615b;} .eprms-q-yn input:checked ~ .yes {background: var(--eprms-green);color: #ffffff;} .eprms-q-yn:has(input:focus-visible) {box-shadow: 0 0 0 3px rgba(25, 135, 84, .2);} /* Save bar */ .eprms-q-save {display: flex;align-items: center;justify-content: flex-end;gap: 14px;} .eprms-q-summary {color: var(--text-light);font-size: 12px;} .eprms-q-button {height: 36px;padding: 0 22px;border: 1px solid var(--eprms-green-dark);border-radius: 6px;background: var(--eprms-green);color: #ffffff;font: 600 12px "Segoe UI", Arial, sans-serif;letter-spacing: .02em;cursor: pointer;box-shadow: 0 2px 4px rgba(25, 135, 84, .15);transition: background-color .15s ease, transform .1s ease;} .eprms-q-button:hover {background: var(--eprms-green-dark);transform: translateY(-1px);} .eprms-q-button:focus-visible {outline: none;box-shadow: 0 0 0 3px rgba(25, 135, 84, .25);} @media (prefers-reduced-motion: reduce) { .eprms-q *, .eprms-q-button {transition: none !important;} } /* --------------------------------------------------------- Visit Note (pms_pdata.php) Reuses .eprms-q-card / -head / -title / -count / -button and the patient card from the questionnaire; form column 620px + 18px gap + attachments 420px = 1058px --------------------------------------------------------- */ .eprms-note {display: grid;gap: 16px;clear: both;} .eprms-note-cols {display: grid;grid-template-columns: 620px 420px;gap: 18px;align-items: start;} .eprms-note-chip {padding: 0 8px;border-radius: 9px;font-size: 10px;font-weight: 600;line-height: 18px;white-space: nowrap;} .eprms-note-chip-new {background: #fff4d6;color: #7a5a00;} .eprms-note-chip-saved {background: var(--eprms-green-light);color: var(--eprms-green-dark);} /* Form card */ .eprms-note-body {display: grid;gap: 12px;padding: 14px 16px 16px;} .eprms-note-row {display: grid;grid-template-columns: 180px 180px;gap: 12px;} .eprms-note-field {display: grid;gap: 5px;} .eprms-note-field label {margin: 0;color: #53615b;font-size: 11px;font-weight: 600;line-height: 16px;text-transform: uppercase;letter-spacing: .03em;} .eprms-note-field label b {color: var(--eprms-red);font-weight: 600;} .eprms-note-field input.text, .eprms-note-field textarea {width: 100%;box-sizing: border-box;background: #ffffff;border: 1px solid #ccd5d1;border-radius: 4px;color: #344054;font: 12px/1.45 "Segoe UI", Arial, sans-serif;transition: border-color .15s ease, box-shadow .15s ease;} .eprms-note-field input.text {height: 34px;padding: 0 9px;font-variant-numeric: tabular-nums;} .eprms-note-field textarea {min-height: 62px;padding: 7px 9px;resize: vertical;} .eprms-note-field input.text:hover, .eprms-note-field textarea:hover {border-color: var(--eprms-green);} .eprms-note-field input.text:focus, .eprms-note-field textarea:focus {outline: none;border-color: var(--eprms-green);box-shadow: 0 0 0 3px rgba(25, 135, 84, .12);} .eprms-note-foot {display: flex;align-items: center;justify-content: space-between;gap: 12px;padding: 12px 16px;background: #fbfcfc;border-top: 1px solid #edf1ef;} .eprms-note-foot span {color: var(--text-light);font-size: 12px;} .eprms-note-foot span b {color: var(--eprms-red);font-weight: 600;} /* Attachments card */ .eprms-note-attach .success-notification {width: auto;margin: 12px 14px 0;} .eprms-note-locked {display: flex;align-items: flex-start;gap: 10px;margin: 12px 14px 0;padding: 10px 12px;background: #ffffff;border: 1px dashed #c3cdc8;border-radius: var(--radius);color: #53615b;font-size: 12px;line-height: 1.45;} .eprms-note-locked svg {flex: none;width: 16px;height: 16px;margin-top: 1px;color: var(--text-light);} .eprms-note-locked strong {color: var(--text-dark);font-weight: 600;} .eprms-note-upload {display: grid;width: auto;box-sizing: border-box;gap: 10px;margin: 12px 14px;padding: 14px;background: #f7f9f8;border: 1px solid #dfe5e2;border-radius: var(--radius);} .eprms-note-attach.is-locked .eprms-note-upload {opacity: .55;} .eprms-note-attach.is-locked .eprms-note-upload * {cursor: not-allowed;} .eprms-note-attach.is-locked .pdata-upload-button {background: #9fb5aa;border-color: #9fb5aa;box-shadow: none;transform: none;} .eprms-note-files {margin: 0;padding: 0 0 6px;list-style: none;} .eprms-note-files li {display: flex;align-items: center;gap: 10px;padding: 8px 14px;border-top: 1px solid #edf1ef;} .eprms-note-files li:hover {background: #f7fbf9;} .eprms-note-file-name {flex: 1;min-width: 0;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;color: var(--eprms-green);font-size: 12px;font-weight: 500;text-decoration: none;} .eprms-note-file-name:hover {color: var(--eprms-green-dark);text-decoration: underline;} .eprms-note-file-type {padding: 3px 8px;background: #f1f4f2;border: 1px solid #e0e5e2;border-radius: 5px;color: #59665f;font-size: 11px;white-space: nowrap;} .eprms-note-empty {margin: 0;padding: 4px 14px 14px;color: var(--text-light);font-size: 12px;font-style: italic;} .eprms-q-head + .eprms-note-empty {padding-top: 14px;} /* Icon buttons (file delete, list actions) */ .eprms-note-icon {flex: none;width: 28px;height: 28px;display: inline-flex;align-items: center;justify-content: center;box-sizing: border-box;background: #ffffff;border: 1px solid #dfe5e2;border-radius: 6px;color: #53615b;text-decoration: none;transition: border-color .15s ease, color .15s ease, background-color .15s ease;} .eprms-note-icon:hover {border-color: var(--eprms-green);color: var(--eprms-green);} .eprms-note-icon.danger {background: #fff5f5;border-color: #f0d4d4;color: #c0392b;} .eprms-note-icon.danger:hover {background: #fce8e8;border-color: #e6b8b8;color: #a93226;} .eprms-note-icon svg {width: 14px;height: 14px;} .eprms-note-icon:focus-visible {outline: none;box-shadow: 0 0 0 3px rgba(25, 135, 84, .2);} /* List of visit notes */ .eprms-note-list-wrap {overflow-x: auto;} .eprms-note-list {width: 100%;border-collapse: collapse;} .eprms-note-list th {padding: 8px 14px;background: #ffffff;border-bottom: 1px solid #dfe5e2;color: #53615b;font-size: 10px;font-weight: 600;line-height: 16px;text-transform: uppercase;letter-spacing: .04em;text-align: left;white-space: nowrap;} .eprms-note-list td {padding: 8px 14px;border-bottom: 1px solid #edf1ef;font-size: 12px;line-height: 1.45;vertical-align: middle;} .eprms-note-list tbody tr:last-child td {border-bottom: 0;} .eprms-note-list tbody tr:hover {background: #f7fbf9;} .eprms-note-list tr.current {background: var(--eprms-green-light);} .eprms-note-list tr.current:hover {background: var(--eprms-green-light);} .eprms-note-list tr.current td:first-child {box-shadow: inset 3px 0 0 var(--eprms-green);} .eprms-note-list td a {color: var(--text-dark);text-decoration: none;} .eprms-note-list td a:hover {color: var(--eprms-green);} .eprms-note-list .date {font-weight: 600;font-variant-numeric: tabular-nums;white-space: nowrap;} .eprms-note-list .num {text-align: right;font-variant-numeric: tabular-nums;white-space: nowrap;} .eprms-note-clip {width: 14px;height: 14px;vertical-align: -2px;color: var(--text-light);} .eprms-note-actions {display: flex;justify-content: flex-end;gap: 6px;} @media (prefers-reduced-motion: reduce) { .eprms-note * {transition: none !important;} } /* --------------------------------------------------------- Operative Note (pms_odata.php): same layout as the Visit Note, plus section dividers, a two-column team grid and a stacked right column --------------------------------------------------------- */ .eprms-note-sep {display: flex;align-items: center;gap: 10px;margin-top: 4px;color: var(--text-light);font-size: 10px;font-weight: 600;text-transform: uppercase;letter-spacing: .06em;} .eprms-note-sep:after {content: "";flex: 1;height: 1px;background: #edf1ef;} .eprms-note-body > .eprms-note-sep:first-child {margin-top: 0;} .eprms-note-grid2 {display: grid;grid-template-columns: repeat(2, minmax(0, 1fr));gap: 12px;} .eprms-note-side {display: grid;gap: 16px;align-content: start;} .eprms-op-si-label {color: #53615b;font-size: 11px;font-weight: 600;text-transform: uppercase;letter-spacing: .03em;} .eprms-op-si-row {display: flex;gap: 8px;} .eprms-op-si-row .surgical-select {flex: 1;min-width: 0;max-width: none;height: 36px;border-radius: 4px;} .eprms-op-si-row .pdata-upload-button {min-width: 72px;} .eprms-note-attach.is-locked .eprms-op-si-add {opacity: .55;} .eprms-note-attach.is-locked .eprms-op-si-add * {cursor: not-allowed;} .eprms-op-si-abr {flex: none;padding: 1px 8px;border-radius: 4px;background: var(--eprms-green-light);color: var(--eprms-green-dark);font-size: 11px;font-weight: 600;white-space: nowrap;} .eprms-op-si-desc {flex: 1;min-width: 0;color: var(--text-dark);font-size: 12px;} /* --------------------------------------------------------- Patient data (adm_patient.php, scat=detail): same layout as the Visit Note --------------------------------------------------------- */ .eprms-note-side .eprms-timeline {width: auto;} .eprms-timeline-title {margin: 0;color: #53615b;font-size: 11px;font-weight: 600;text-transform: uppercase;letter-spacing: .03em;} .eprms-note-field-label {color: #53615b;font-size: 11px;font-weight: 600;text-transform: uppercase;letter-spacing: .03em;} .eprms-note-field select.eprms-pt-select {width: 100%;height: 34px;box-sizing: border-box;padding: 0 9px;background: #ffffff;border: 1px solid #ccd5d1;border-radius: 4px;color: #344054;font: 12px "Segoe UI", Arial, sans-serif;transition: border-color .15s ease, box-shadow .15s ease;} .eprms-note-field select.eprms-pt-select:hover {border-color: var(--eprms-green);} .eprms-note-field select.eprms-pt-select:focus {outline: none;border-color: var(--eprms-green);box-shadow: 0 0 0 3px rgba(25, 135, 84, .12);} .eprms-note-field input::placeholder {color: #a9b3ae;} .eprms-pt-age {margin-left: 6px;padding: 0 6px;border-radius: 9px;background: #f1f4f2;color: var(--text-light);font-size: 10px;letter-spacing: 0;text-transform: none;} /* Allergy field stands out, like the allergy banner */ .eprms-pt-allergy label {color: #b02a37;} .eprms-pt-allergy textarea {background: #fffafa;border-color: #f1c9cd;} /* jQuery Validate error labels inside the new fields */ .eprms-note-field label.error {color: var(--eprms-red);font-size: 11px;font-weight: 400;text-transform: none;letter-spacing: 0;} .eprms-note-field input.error, .eprms-note-field select.error {border-color: var(--eprms-red);} /* Messages at the top of the right column */ .eprms-note-side .eprms-pt-message {width: auto;margin: 0;} .eprms-pt-error .allergy-content:before {content: "Error";} /* Record card */ .eprms-pt-mrn {display: flex;align-items: center;gap: 10px;min-height: 26px;} .eprms-pt-mrn .eprms-q-pill {padding: 0 8px;border-radius: 4px;background: var(--eprms-green-light);color: var(--eprms-green-dark);font-weight: 600;line-height: 24px;font-variant-numeric: tabular-nums;} .eprms-pt-muted {color: var(--text-light);font-size: 12px;font-style: italic;} /* Diagnoses + special tags side by side (2 x 520px + 18px = 1058px) */ .eprms-pt-lists {display: grid;grid-template-columns: repeat(2, minmax(0, 1fr));gap: 18px;align-items: start;} /* --------------------------------------------------------- Patient list (dt_patient_list.php): card with toolbar, table and footer. Overrides the global DataTables styles only inside .eprms-pl --------------------------------------------------------- */ .eprms-pl .eprms-q-title {display: flex;align-items: center;gap: 8px;} .eprms-pl-new {display: inline-flex;align-items: center;gap: 6px;height: 30px;padding: 0 14px;border: 1px solid var(--eprms-green-dark);border-radius: 6px;background: var(--eprms-green);color: #ffffff !important;font-size: 12px;font-weight: 600;text-decoration: none !important;box-shadow: 0 2px 4px rgba(25, 135, 84, .15);transition: background-color .15s ease, transform .1s ease;} .eprms-pl-new:hover {background: var(--eprms-green-dark);transform: translateY(-1px);} .eprms-pl-new svg {width: 13px;height: 13px;} .eprms-pl .dataTables_wrapper {position: relative;} .eprms-pl-toolbar {display: flex;flex-wrap: wrap;align-items: center;justify-content: space-between;gap: 10px 16px;padding: 12px 14px;border-bottom: 1px solid #dfe5e2;} .eprms-pl .dataTables_wrapper .dataTables_filter, .eprms-pl .dataTables_wrapper .dataTables_length {float: none;margin: 0;color: var(--text-light);font-size: 12px;} .eprms-pl .dataTables_wrapper .dataTables_filter label, .eprms-pl .dataTables_wrapper .dataTables_length label {display: flex;align-items: center;gap: 8px;margin: 0;line-height: normal;} .eprms-pl .dataTables_wrapper .dataTables_filter input {width: 320px;height: 34px;padding: 0 10px 0 32px;border: 1px solid #ccd5d1;border-radius: 4px;background: #ffffff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a9690' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") no-repeat 10px center / 14px 14px;font-size: 12px;} .eprms-pl .dataTables_wrapper .dataTables_length select {height: 30px;border-radius: 4px;border-color: #ccd5d1;} .eprms-pl .dataTables_wrapper .dataTables_filter input:hover, .eprms-pl .dataTables_wrapper .dataTables_length select:hover {border-color: var(--eprms-green);} .eprms-pl .dataTables_wrapper table.eprms-pl-table {width: 100% !important;margin: 0;border-collapse: collapse;} .eprms-pl-table thead th {padding: 9px 14px;background: #ffffff;border-bottom: 1px solid #dfe5e2;color: #53615b;font-size: 10px;font-weight: 600;line-height: 16px;text-transform: uppercase;letter-spacing: .04em;text-align: left;white-space: nowrap;} .eprms-pl-table tbody td {padding: 8px 14px;border-bottom: 1px solid #edf1ef;color: var(--text);font-size: 12px;line-height: 1.45;vertical-align: middle;} .eprms-pl-table tbody tr:hover > td {background: #f7fbf9;} .eprms-pl-table tbody tr.shown > td {background: var(--eprms-green-light);border-bottom-color: transparent;} .eprms-pl-table .eprms-pl-center {text-align: center;} .eprms-pl-table .eprms-pl-num {font-variant-numeric: tabular-nums;white-space: nowrap;} .eprms-pl-table .eprms-pl-actions {width: 1%;text-align: right;white-space: nowrap;} .eprms-pl-muted {color: #b3bcb7;} .eprms-pl-pill {display: inline-block;padding: 0 8px;border-radius: 4px;background: var(--eprms-green-light);color: var(--eprms-green-dark);font-weight: 600;line-height: 22px;font-variant-numeric: tabular-nums;white-space: nowrap;} .eprms-pl-name {color: var(--text-dark) !important;font-weight: 600;text-decoration: none !important;} .eprms-pl-name span {font-weight: 400;} .eprms-pl-name:hover {color: var(--eprms-green) !important;} .eprms-pl-gender {display: inline-block;padding: 0 8px;border-radius: 9px;font-size: 10px;font-weight: 600;line-height: 18px;text-transform: uppercase;letter-spacing: .03em;} .eprms-pl-gender.f {background: #fbeff6;color: #9c2f6d;} .eprms-pl-gender.m {background: #eef4ff;color: #0a3d8f;} .eprms-pl-buttons {display: inline-flex;gap: 6px;} /* Detail row (eye button) */ .eprms-pl-table td.eprms-pl-child {padding: 0 14px 10px;background: var(--eprms-green-light);border-bottom: 1px solid #edf1ef;} .eprms-pl-details {display: flex;flex-wrap: wrap;gap: 8px;} .eprms-pl-details span {display: inline-flex;align-items: center;gap: 8px;padding: 4px 10px;background: #ffffff;border: 1px solid #bfe3cf;border-radius: 6px;color: var(--text-dark);font-size: 12px;font-variant-numeric: tabular-nums;} .eprms-pl-details b {color: #53615b;font-size: 10px;font-weight: 600;text-transform: uppercase;letter-spacing: .04em;} .eprms-pl-details.loading {color: var(--text-light);font-size: 12px;font-style: italic;} /* Footer: info + pagination */ .eprms-pl-foot {display: flex;flex-wrap: wrap;align-items: center;justify-content: space-between;gap: 10px;padding: 10px 14px;border-top: 1px solid #dfe5e2;background: #fbfcfc;} .eprms-pl .dataTables_wrapper .dataTables_info {padding: 0;color: var(--text-light);font-size: 12px;} .eprms-pl .dataTables_wrapper .dataTables_paginate {float: none;margin: 0;padding: 0;} .eprms-pl .dataTables_wrapper .dataTables_processing {position: absolute;top: 58px;left: 50%;transform: translateX(-50%);padding: 4px 12px;border-radius: 9px;background: var(--eprms-green-light);color: var(--eprms-green-dark);font-size: 11px;font-weight: 600;box-shadow: 0 2px 6px rgba(0, 0, 0, .06);z-index: 2;} /* --------------------------------------------------------- Dashboard (charts/adm_charts.php): KPI tiles, chart cards, statistics tables. Same card frame as the patient pages; the page is 1300px wide here --------------------------------------------------------- */ .eprms-db {display: grid;gap: 18px;padding: 15px 0 10px;} .eprms-db-kpis {display: grid;grid-template-columns: repeat(4, minmax(0, 1fr));gap: 18px;} .eprms-db-grid {display: grid;grid-template-columns: repeat(2, minmax(0, 1fr));gap: 18px;align-items: start;} .eprms-db-kpi {display: flex;align-items: center;gap: 14px;padding: 16px 18px;} .eprms-db-kpi-icon {flex: none;width: 44px;height: 44px;display: flex;align-items: center;justify-content: center;border-radius: 50%;background: var(--eprms-green-light);color: var(--eprms-green);font-size: 18px;} .eprms-db-kpi-label {color: #53615b;font-size: 11px;font-weight: 600;line-height: 16px;text-transform: uppercase;letter-spacing: .04em;} .eprms-db-kpi-value {color: var(--text-dark);font-size: 24px;font-weight: 600;line-height: 1.2;font-variant-numeric: tabular-nums;} .eprms-db-kpi-sub {color: var(--text-light);font-size: 12px;line-height: 16px;font-variant-numeric: tabular-nums;} .eprms-db-chart {position: relative;height: 300px;padding: 14px 16px 10px;box-sizing: border-box;} .eprms-db .eprms-q-head {min-height: 44px;box-sizing: border-box;} .eprms-db-search {width: 200px;height: 28px;box-sizing: border-box;padding: 0 10px 0 28px;border: 1px solid #ccd5d1;border-radius: 4px;background: #ffffff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a9690' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") no-repeat 8px center / 13px 13px;color: #344054;font: 12px "Segoe UI", Arial, sans-serif;} .eprms-db-search:hover {border-color: var(--eprms-green);} .eprms-db-search:focus {outline: none;border-color: var(--eprms-green);box-shadow: 0 0 0 3px rgba(25, 135, 84, .12);} .eprms-db-hint {color: var(--text-light);font-size: 11px;} /* Statistics tables */ .eprms-db-table-scroll {max-height: 380px;overflow: auto;} .eprms-db-table {width: 100%;margin: 0;border-collapse: separate;border-spacing: 0;font-size: 12px;} .eprms-db-table th {position: sticky;top: 0;z-index: 1;padding: 8px 14px;background: #ffffff;border-bottom: 1px solid #dfe5e2;color: #53615b;font-size: 10px;font-weight: 600;line-height: 16px;text-transform: uppercase;letter-spacing: .04em;text-align: right;white-space: nowrap;} .eprms-db-table thead tr.group th {border-bottom-color: #edf1ef;text-align: center;} .eprms-db-table thead tr + tr th {top: 33px;} .eprms-db-table th[rowspan] {vertical-align: bottom;} .eprms-db-table td {padding: 7px 14px;border-bottom: 1px solid #edf1ef;color: var(--text);line-height: 1.45;text-align: right;font-variant-numeric: tabular-nums;} .eprms-db-table th:first-child, .eprms-db-table td:first-child {text-align: left;white-space: normal;color: var(--text-dark);} .eprms-db-table tbody tr:last-child td {border-bottom: 0;} .eprms-db-table tbody tr:hover td {background: #f7fbf9;} .eprms-db-table td.total {color: var(--text-dark);font-weight: 600;} .eprms-db-table td.empty {color: var(--text-light);font-style: italic;text-align: left;} .eprms-db-table .split {border-left: 1px solid #edf1ef;} /* colour dot next to Male / Female headers: identity, the text stays in ink */ .eprms-db-table th.male:before, .eprms-db-table th.female:before {content: "";display: inline-block;width: 7px;height: 7px;margin-right: 5px;border-radius: 50%;vertical-align: 1px;} .eprms-db-table th.male:before {background: #2f6fb0;} .eprms-db-table th.female:before {background: #d0527a;} /* --------------------------------------------------------- Pop-up reminder admin (adm_popup_reminder.php): list card + form with live preview. Reuses the patient list (.eprms-pl-*) and visit note (.eprms-note-*) classes --------------------------------------------------------- */ .eprms-po-table {width: 100%;margin: 0;border-collapse: collapse;} .eprms-po-table .eprms-po-order {width: 70px;} .eprms-po-text {font-weight: 500;} .eprms-po-empty {padding: 18px 14px;font-style: normal;} .eprms-po-info {color: var(--text-light);font-size: 12px;} .eprms-po-pager {display: flex;flex-wrap: wrap;gap: 4px;} .eprms-po-pager a {min-width: 28px;height: 28px;box-sizing: border-box;padding: 0 8px;border: 1px solid #dfe5e2;border-radius: 6px;background: #ffffff;color: var(--text) !important;font-size: 12px;font-weight: 600;line-height: 26px;text-align: center;text-decoration: none !important;} .eprms-po-pager a:hover {border-color: var(--eprms-green);color: var(--eprms-green) !important;} .eprms-po-pager a.current {background: var(--eprms-green);border-color: var(--eprms-green);color: #ffffff !important;} .eprms-po-hint {margin: 0;padding: 0;color: var(--text-light);font-size: 12px;line-height: 1.45;} .eprms-note-body .eprms-po-preview {width: auto;max-width: none;margin: 0;} .eprms-po-placeholder {color: #8fb0e0;font-style: italic;font-weight: 400;} /* --------------------------------------------------------- Diagnosis admin (adm_diagnostic.php): same as the pop-up reminder admin, list with DataTables 1.6 inside .eprms-pl, abbreviation pill, preview row --------------------------------------------------------- */ .eprms-po-table .eprms-dx-abr-col {width: 130px;} .eprms-dx-preview {margin: 0;padding: 0;border: 1px solid #edf1ef;border-radius: 6px;} .eprms-dx-preview li {border-top: 0;} .eprms-pl .dataTables_wrapper .dataTables_filter input {margin-left: 0;} .eprms-note-icon.is-disabled {opacity: .35;cursor: not-allowed;} .eprms-note-icon.is-disabled:hover {background: #fff5f5;border-color: #f0d4d4;color: #c0392b;} .box-wrap .eprms-dx-message {width: auto;max-width: none;margin: 0 0 16px;} /* --------------------------------------------------------- Accounting (adm_accounting.php): day selection, KPI tiles (dashboard classes), visits table with a total row --------------------------------------------------------- */ .eprms-acc-filter {display: flex;flex-wrap: wrap;align-items: flex-end;gap: 12px 16px;padding: 14px 16px;} .eprms-acc-day {display: flex;align-items: center;gap: 6px;} .eprms-acc-day .eprms-note-icon {width: 34px;height: 34px;} .eprms-acc-filter .eprms-note-field input.text {width: 130px;text-align: center;cursor: pointer;} .eprms-acc-filter .eprms-q-button {height: 34px;} .eprms-acc-today {align-self: center;color: var(--eprms-green) !important;font-size: 12px;font-weight: 600;text-decoration: none !important;} .eprms-acc-today:hover {text-decoration: underline !important;} .eprms-acc-selected {display: flex;align-items: center;gap: 8px;align-self: center;margin-left: auto;color: var(--text-dark);font-size: 13px;font-weight: 600;} .eprms-acc-unit {color: var(--text-light);font-size: 13px;font-weight: 400;} .eprms-acc-table .eprms-acc-nr {width: 36px;color: var(--text-light);} .eprms-acc-table .eprms-acc-money {width: 130px;text-align: right;white-space: nowrap;font-variant-numeric: tabular-nums;} .eprms-acc-note {color: var(--text) !important;text-decoration: none !important;} .eprms-acc-note:hover {color: var(--eprms-green) !important;} .eprms-acc-table tfoot td {padding: 10px 14px;background: #fbfcfc;border-top: 1px solid #dfe5e2;color: var(--text-dark);font-size: 12px;font-weight: 600;text-transform: uppercase;letter-spacing: .03em;} .eprms-acc-table tfoot td.eprms-acc-money {font-size: 14px;letter-spacing: 0;} /* --------------------------------------------------------- System backup (adm_backup.php): database and files cards --------------------------------------------------------- */ .eprms-bk-title {display: flex;align-items: center;gap: 8px;} .eprms-bk-title svg {width: 15px;height: 15px;color: var(--eprms-green);} .eprms-bk-action {display: flex;flex-wrap: wrap;align-items: flex-end;justify-content: space-between;gap: 12px 24px;padding: 14px 16px;border-bottom: 1px solid #edf1ef;} .eprms-bk-action p {flex: 1 1 360px;max-width: 62ch;margin: 0;padding: 0;color: var(--text);font-size: 12px;line-height: 1.5;} .eprms-bk-action form {width: auto;margin: 0;} .eprms-bk-month {display: flex;align-items: flex-end;gap: 10px;} .eprms-bk-month .eprms-note-field {width: 140px;} .eprms-q-button[disabled] {background: #9fb5aa;border-color: #9fb5aa;box-shadow: none;transform: none;cursor: not-allowed;} /* two classes: notification.css loads after screen.css and sets margin-top: -15px; width: 100% */ .eprms-q-card .eprms-bk-message {width: auto;max-width: none;margin: 12px 16px 0;} .eprms-bk-message .success-content:before {content: "Done";} .eprms-bk-note .reminder-content:before {content: "Note";} .eprms-bk-message + .eprms-bk-table, .eprms-bk-message + .eprms-po-empty {margin-top: 12px;} .eprms-bk-table {border-top: 1px solid #edf1ef;} .eprms-bk-file {font-family: Consolas, "Courier New", monospace;font-size: 12px;color: var(--text-dark);word-break: break-all;} .eprms-bk-type {display: inline-block;padding: 0 8px;border-radius: 9px;background: #f1f4f2;color: #53615b;font-size: 11px;font-weight: 600;line-height: 20px;white-space: nowrap;} .eprms-bk-table .eprms-bk-size {text-align: right;white-space: nowrap;font-variant-numeric: tabular-nums;} .eprms-bk-missing {color: #b02a37;font-size: 11px;font-weight: 600;} .eprms-bk-delete-all {display: inline-flex;align-items: center;gap: 6px;height: 28px;padding: 0 12px;border: 1px solid #f0d4d4;border-radius: 6px;background: #fff5f5;color: #c0392b;font: 600 12px "Segoe UI", Arial, sans-serif;cursor: pointer;} .eprms-bk-delete-all:hover {background: #fce8e8;border-color: #e6b8b8;} .eprms-bk-delete-all svg {width: 13px;height: 13px;} /* --------------------------------------------------------- Main menu dropdown (Admin): opaque white card under the button. Overrides the 2010 rules (95 % white PNG, top 33px, !important arrows) and keeps the active button's green gradient/shadow off the dropdown links --------------------------------------------------------- */ .menu ul ul {z-index: 100;top: 44px;width: 210px;box-sizing: border-box;padding: 6px;background: #ffffff;border: 1px solid #dfe5e2;border-radius: 8px;box-shadow: 0 8px 24px rgba(0, 0, 0, .10);} .menu li:hover ul ul {top: -7px;left: calc(100% + 6px);} .menu li li {float: none;margin: 0;padding: 0;} .menu li li a, .menu li.active li a, .menu li li.active a, .menu li.active li.active a {display: flex;align-items: center;gap: 8px;padding: 7px 12px !important;background: transparent !important;border: 0;border-radius: 6px;box-shadow: none;color: #4f5b55 !important;font-size: 12px;font-weight: 500;line-height: 18px;text-shadow: none !important;white-space: nowrap;transform: none;} .menu li li a:hover, .menu li li:hover > a, .menu li.active li a:hover, .menu li.active li:hover > a {background: var(--eprms-green-light) !important;color: var(--eprms-green) !important;} .menu li li:hover li a, .menu li.active li:hover li a {background: transparent !important;color: #4f5b55 !important;} .menu li li:hover li a:hover, .menu li.active li:hover li a:hover {background: var(--eprms-green-light) !important;color: var(--eprms-green) !important;} /* arrow for an entry with a submenu (Initial Data) */ .menu li li:has(> ul) > a:after {content: "\203A";margin-left: auto;color: var(--text-light);font-size: 15px;line-height: 1;} /* --------------------------------------------------------- System users (adm_sysuser.php): user list with avatars, form with avatar card --------------------------------------------------------- */ .eprms-su-user {display: inline-flex;align-items: center;gap: 10px;text-decoration: none !important;} .eprms-su-user img {flex: none;width: 30px;height: 30px;border-radius: 50%;object-fit: cover;border: 1px solid #dfe5e2;background: #f1f4f2;} .eprms-su-user:hover .eprms-pl-name {color: var(--eprms-green) !important;} .eprms-su-you {padding: 0 7px;border-radius: 9px;background: #eef4ff;color: #0a3d8f;font-size: 10px;font-weight: 600;line-height: 18px;text-transform: uppercase;letter-spacing: .03em;} .eprms-su-group {display: inline-block;padding: 0 8px;border-radius: 9px;background: #f1f4f2;color: #53615b;font-size: 11px;font-weight: 600;line-height: 20px;white-space: nowrap;} .eprms-su-group.admin {background: var(--eprms-green-light);color: var(--eprms-green-dark);} .eprms-su-locked {display: inline-block;margin-left: 4px;padding: 0 8px;border-radius: 9px;background: #fdf1f2;color: #b02a37;font-size: 11px;font-weight: 600;line-height: 20px;cursor: help;} .eprms-su-avatar {gap: 14px;} .eprms-su-current {display: flex;align-items: center;gap: 14px;} .eprms-su-current img {flex: none;width: 72px;height: 72px;border-radius: 50%;object-fit: cover;border: 3px solid #ffffff;box-shadow: 0 0 0 1px #dfe5e2, 0 2px 8px rgba(0, 0, 0, .08);} .eprms-su-crop {display: flex;justify-content: center;padding: 10px 0 0;background: #f7f9f8;border: 1px solid #dfe5e2;border-radius: 8px;} .eprms-su-crop .croppie-container {width: 220px;height: auto;} /* logged-out note of the keep-alive (_inc/inc_header.php), fixed at the top of every page */ .eprms-session-note {position: fixed;top: 0;left: 0;right: 0;z-index: 10000;padding: 12px 16px;color: #ffffff;background: #b02a37;box-shadow: 0 2px 10px rgba(0, 0, 0, .25);font: 600 13px/1.4 "Segoe UI", Arial, sans-serif;text-align: center;}