/* HSI-STYLE2.CSS, websrc/css, rjc, 2011, -*-js-*-
Web Portal standard style sheet.
Copyright 2021 Hitech Systems, Inc.

  IN-WORK: styles for password changer error handling (IR 73351)

$Id: HSI-STYLE2.CSS,v 1.43 2021/08/12 07:54:43 rcorbett Exp $

*/

/* styles below are not (or shouldn't be) in use */

.CursorOn { cursor: pointer; }

@media print {
   #footer { display: none; }
   @page { margin: 1cm; }
}

/* general use classes */

.lj { text-align: left; }
.cj { text-align: center; }
.rj { text-align: right; }
.left { text-align: left; }
.right { text-align: right; }
.vc { vertical-align: middle; }
.wrap { white-space: normal; }
.nowrap { white-space: nowrap; }
.bold { font-weight:bold; }
.font10 { font-size:10px; }
.font12 { font-size:12px; }

/* rms.lq alerts */

a.alert {
   color:red;
   font-weight:bold;
}

/* index.html related */
div#home {
   display: flex;
   justify-content: space-around;
}
div.homelink {
   display: table-cell;
   padding: 10px;
}
div.homelink a {
   color: unset;
   display: block;
   text-align: center;
   text-decoration: none;
}
div.homelink a svg {
   width: 100px;
   height: 100px;
}

/* web portal framework */
/* hide body so init can display it after all reflows */
body { display:none; }

.body2, html {
   background: #fefefe;
   font-family: Arial,Helvetica,sans-serif;
   color: #303030;
   font-size: 16px;
   margin: 0;
   padding: 0;
}
img#logo {
   border:none;
   padding-top:1px;
   height:58px;
}
/* a div that overlays the entire page while graying it out */
#disableddiv {

   z-index: 998;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   background-color:DarkGrey;
   opacity: .8;
   display: none;
   position: fixed;
}
/* A popup window at the center of the grayed out page.
   The width, height, left and top margins are set by the
   showPagePopup javascript function */
#msgdiv {
   padding: 10px;
   border: 1px solid black;   
   border-radius: 1em;
}
.pagepopup {
   z-index: 999;
   position: fixed;
   color: #000000;
   background-color: #fefefe;
   top: 50%;
   left: 50%;
   display:none;
   padding:10px;
}
.outer_container {
   background:transparent url(/images/header-bkg.gif) repeat-x scroll 0 0;
   color:#303030;
   width:100%;
   margin:0;
   padding:0;
   text-align:center;
   position: relative;
}

#header-bkg {
   position: absolute;
   top: 0px;
   left: 0px;
   height: 98px;
   background: url(/images/pulsiam-bg.png) repeat-x bottom;
   width: calc(50% + 8px);
   min-width: 508px; /* see also menu_bkg and center_container */
}

.center_container {
   width: calc(100% - 60px);
   min-width: 1000px; /* see also header_bkg and menu_bkg */
   margin: 0 auto;
   text-align: left;
   /* border: 1px solid black; */
}

.navbar_top {
   height: 36px;
   white-space:nowrap;
   display: flex;
   flex-flow: row nowrap;
   align-items: center;
}
.navbar_top a{	/* change password and logoff links*/
   color: #303030;
   text-decoration:none;
   font-size:14px;
   font-weight:bold;
   flex-grow: 1;
   margin: 0 5px;
   text-align: center;
}
.navbar_top a:visited{
   color: #303030;
}
.navbar_top a:hover{	/* change password and logoff links*/
   color: red;
}
#loginMsg {
   color:white;
   background-color:red;
   text-align:center;
   font-weight:bold;
   padding:0 5px 0 0;
   width:calc(50% - 10px);
   max-height:22px;
   overflow:hidden;
   visibility:hidden;
}
#srchform {
   margin-left:5px;
   margin-bottom: 0;
   flex-grow: 8;
   text-align: right;
}

.navbar_main {
   height: 62px;
   margin-bottom: 16px;
   padding-left: 8px;
}
.navbar_main svg {
   position: absolute;
   padding-top: 6px;
}
.navbar_main_home_link{
/*      background:url(/images/white_gradient.png) center center;*/
   width: 490px;
   height: 62px;
   text-align:left;
   float:left;
   margin-left: 0px;
}

.navbar_main_home_link IMG{
   vertical-align:middle;
}

.navbar_main_menu {
   height: 62px;
   background: url(/images/bkg-menu.gif) repeat-x scroll 0 0;
   position: relative;
   left:50%;
   max-width: calc(50% - 30px);
   z-index: 1;
}

ul#top-nav {
   font-size:14px;
   line-height:62px;
   list-style-image:none;
   list-style-position:outside;
   list-style-type:none;
   margin:0;
   padding:0;
   top:36px;
}

ul#top-nav li {
   float:left;
}
ul#top-nav li:first-child {
   border-left:1px solid silver;
}

ul#top-nav li a {
   color:white;
   display:block;
   float:left;
   height:62px;
   padding:0 7px 0;
   text-decoration:none;
   white-space:nowrap;

   border-right:1px solid silver;
}

ul#top-nav li a:hover {
   background:transparent url(/images/menu-white.png) repeat-x scroll 0 0;
}

ul#top-nav li ul {
   display:none;
   line-height:30px;
   list-style-image:none;
   list-style-position:outside;
   list-style-type:none;
   position:absolute;
   top:62px;
   z-index:999;
}

body > div#attachdiv {
   /* attachdiv is set to visibility:hidden locally instead of display:none. Setting
   it to display:none globally allows the local visibility:hidden to be fixed here */
   display: none;
   border-right: 1px solid black;
   border-bottom: 1px solid black;
}

#footer {
   background-color:black;
   color:white;
   font-size:12px;
   height:36px; 
   margin-top:16px;
   padding:10px 0 10px 5px;
/*      position: fixed;
   bottom: 0;
   width: 100%; */
}

#popfooter {
   font-size:12px;
   margin:3px 24px;
   width: calc(100% - 48px);
   display: flex;
   flex-flow: row nowrap;
   align-content: center;
   padding-top: 1em;
   border-top: 2px solid #999;
}

#footer a {
   color:#B4D5F0;
   padding-right:20px;
   text-decoration:none;
}
#footer a:hover {
   text-decoration:underline;
}
#footer-container {
   margin:0;
   text-align:left;
   width:100%;
}
#trademark {
   padding-top:5px;
}
.footleft { flex-shrink: 100; }
.footright { text-align: right; flex-shrink: 0; }
.footcenter { text-align: center; flex-grow:8; flex-basis: 220px; }
.footleft, .footright {
   flex-grow: 1;
   flex-basis: 140px;
}

.MenuTitle {
   color: white;
   font-family:Verdana,Helvetica;
   font-size:22px;
   font-weight:bold;
   z-index: 9;
   position: absolute;
   top:	50px;
   margin-left: 65px;
   z-index: 9;
}
/*   div.content>div[level="0"] {margin-top: 1em}*/
.NavBarRow td{
   background-color:#484848;
   color:white;
   font-size:15px;
   padding: 5px 8px;
   border-left: 1px solid white;
   cursor: pointer;
}
.NavBarRow td:first-child{
   border-left: none;
}
.NavBarRow td:hover{
   text-decoration: underline;
}

a.digest {
   float:left;
   font-size: 15px;
   font-family: Verdana,Arial,Helvetica,sans-serif;
   list-style:none;
   text-decoration:none;
   color:white;
   background-color:#484848;
   padding:1px 10px 1px 10px;
   margin-top:6px;
   border-right:1px solid silver;
}

tr.NavBarRow a.digest:hover {
   text-decoration:underline;
   color: white;
}

ul.digest {
   background-color:#484848;
   width: 100%;
   float:left;
   padding:0px 0px 6px 0px;
   margin:0px;
}

ul.digest li {
   display:inline;
}

.TopicHeadline {
   background-color: #dfdfdf;
   color: #444;
   font-size: 14px ;
   font-weight: bold ;
   margin:14px;
   padding:7px;
   float: none !important;
   vertical-align: middle ;
   z-index: 9;
   position: relative;
   border-radius: 6px;
   border: 1px solid #d4d4d4;
   box-shadow: 2px 2px 4px rgba(0,0,0,0.25);
}
div.TopicHeadline + div.TopicHeadline {
   visibility: collapse;
   display: none;
}   
#marquee.Topic {
   padding: 3px;
   margin: 0;
}
.Topic {
   color: #444444;
   font-size: 12px;
   padding: 10px;
   margin: 0 12px;
}
.Topic table.body-text {
   width: 100%;
}
.twocol {
   Margin: 0 auto;
   width: 80%;
}
.TopicError {
   margin-top:10px;
}
.errormsg {
   color: red; 
}
.mini {
   font-size: 8px;
   color: #444444;
   text-align: right;
}

.newstext {
   font-size: 14px;
   color: #444444; 
   overflow: auto;
}

.content {
   width:100%;
}

.content .NavBarBtn table{	/* this is sumbenu's container */
   background-color:#484848;
   cursor: pointer;
   border-spacing: 0px;
}

.content .NavBarBtn table tr{	/* this is the submenu */
   color: white;
   font-size:15px;
   padding:5px;
}
.content .NavBarBtn table tr:hover{
   color: white;
   text-decoration: underline;
}
.content .NavBarBtn table tr td{
   padding:.5em 1em;
   border-bottom: 1px solid #949;
   background-color: #8C189B;
   min-width: 160px;
}

form#callform table tr td:first-child {
   width: 20%;
   padding-left:5px;
}

#remarkdiv {
/* top, left and width are dynamically set in javascript that unhides this */
   position:absolute;
   visibility:hidden;
   border:4px #484848 outset;
   text-align:center;
   padding:5px;
   height:45px;
   background-color:white;
}

/* progress bar for refresh timer */
.progress { padding: 0px; }
div#progress { 
   height: 3px; 
   width: 0%; 
   background-color: #ccc; 
}

.CallBtnBar {
   display: flex;
   flex-flow: row nowrap;
   align-items: center;
   min-width: 240px;
}
.LinkedBtnBar, .RelatedBtnBar {
   display: flex;
   flex-flow: row wrap;
   align-items: center;
   min-width: 100px;
}
.PageBtn, .LinkBtn {
   font-size:12px;
   text-align:center;
   border: 0px;
   border-radius: 3px;
   margin: 2px;
   padding: 4px 15px;
   flex-grow: 1;
   background-color: #ddd;
}
.LinkBtn:hover {
   cursor: pointer;
}
.BtnBar {
   display: flex;
   flex-flow: wrap;
}
.PageBtnOn {
   background-color: rgb(153, 153, 153);
   color: white;
}
.PageBtnOn:hover {
   background-color: #8C189B;
   border-color: #848;
   cursor: pointer;
}
.PageBtnOff {
   background-color: #ddd;
   color: #888;
}
#rmkinput { margin-bottom: 4px; }

.heading2, .error, .warning .TopicError, .Heading2, table.body1 .Heading1{
/*		background-color:#8c189b;
   color:#fff;*/
   font-family:Verdana,Helvetica;
   font-size:22px;
   font-weight:bold;
   padding:3px;
   vertical-align:middle;
}
.refresh {
   font-size: initial;
}

.headinglink, td.heading2 a {
   color:inherit !important;
   font-size:18px;
}

tr td.heading2:first-child {
   border-bottom-left-radius: 5px;
   border-top-left-radius: 5px;
}

tr td.heading2:last-child {
   border-bottom-right-radius: 5px;
   border-top-right-radius: 5px;
}

.footing1 {
   font-size: smaller;
   font-weight: bold;
   text-align: center;
}

table.cadstats, table.heading1, table.body3, table.body1, table.body4, div.body3, div.errmsg {
   color: #303030;
   margin:1em 0;
   text-align:left;
   vertical-align:middle;
   border-spacing:0;
   empty-cells:show;
   border-radius: .5em;
   border: 1px solid #ddd;
   box-shadow: 2px 2px 8px rgba(0,0,0,0.25);
}

div.card {
   color: #303030;
   margin: 1em 0;
   vertical-align: middle;
   border-radius: .5em;
   border: 1px solid #ddd;
   box-shadow: 2px 2px 8px rgba(0,0,0,0.25);
   padding: 1em;
   display: inline-table;
}
div.card > .heading1 {
   font-weight: bold;
   font-size: 1.5em;
}

body > table.body3 {
   margin: 1em;
   width: calc(100% - 2em);
}
table.body4 { 
   padding: 16px;
   width: 100%; 
}

table.cadstats tr:first-child td:first-child,
   .body4 tr:first-child td:first-child,
   .body3 tr:first-child td:first-child,
   .body1 tr:first-child td:first-child {
      border-top-left-radius: .5em;
      padding-left: .5em;
      padding-top: .5em;
}
table.cadstats tr:first-child td:last-child,
   .body4 tr:first-child td:last-child,
   .body3 tr:first-child td:last-child,
   .body1 tr:first-child td:last-child {
      border-top-right-radius: .5em;
}
.cadstats tr td.heading1 { 
   padding: 3px 1em;
   background-color: #ccc;
   font-weight: bold;
   margin: 1em;
}
.cadstats tr td {padding-top: 1em;}
.body4 tr td:first-child,
   .body3 tr td:first-child {
      padding-left: .5em;
}
table.cadstats tr:last-child td:first-child,
   .body4 tr:last-child td:first-child,
   .body3 tr:last-child td:first-child {
      border-bottom-left-radius: .5em;
      padding-bottom: 1em;
}
table.cadstats tr:last-child td:last-child,
   .body4 tr:last-child td:last-child,
   .body3 tr:last-child td:last-child {
      border-bottom-right-radius: .5em;
      padding-bottom: 1em;
}
table.heading1 td.heading1{
   background-color:#ddd;
   color:#303030;
   font-family:Verdana;
   font-size:16px;
   font-weight:bold;
   padding:3px;
}

/* non specific brown-bar heading */
.flxHdg1 {
   background-color:#ddd;
   color:#303030;
   font-family:Verdana;
   padding:0px 3px 3px 3px;
}
span.flxHdg1 {
   background-color:white;
   font-weight: bold;
}
.hidden {
   display:none;
   max-width:600px;
   position:absolute;
}

table.body1.hidden {
   background-color: white;
}
table.body3 td#unitlist { 
   padding: 0px; 
   border: none;
}

div table.body3 .heading1, table.body4 .heading1, 
   table.body14 .heading1, td.unitstat{
   background-color:#ddd !important;
   color:#303030;
   font-family:Verdana;
   font-size:16px;
   font-weight:bold;
   padding:3px;
}
.heading-disabled {
   color: #808080 !important;
}
table.body3 td[bgcolor="#999999"] { visibility: collapse; }

/* body14 only used on call history (CAD.CHpage */   
table.body14 tr.heading1 th { 
   font-size:14px; 
   text-align:left; 
}

table.body14 {
   vertical-align:middle;
   border-spacing:0;
   empty-cells:show;
   color:#303030;
   font-size:14px;
   margin: 24px;
   width: calc(100% - 48px);
   min-width: 680px;
   padding: 16px;
   border-radius: 1em;
   border: 1px solid #ddd;
   box-shadow: 2px 2px 8px rgba(0,0,0,0.25);
}
table.body14 td.tblnest {
   padding:3px;
   margin: 3px 0;
}
table.body14 td.tblnest:hover {
   background-color: white;
}
td.tblnest table tr.heading1 {
   background-color: white !important;
}
td.tblnest table tr.heading1 th {
   border-bottom: 1px solid rgba(0,0,0,0.25);
   font-weight: normal;
}

table.body14 td > table.body14 {
   /* nested table.body14 */
   margin: 0;
   padding: .67em;
   width: 100%;
}

table.body3 td{
   padding: 5px;
}
table.body3 th{
   padding: 5px;
}
table.body3 td.heading2{
   border-top:none;
}
table td.separator{
   visibility: collapse;
   display:none;
}
/* for cad stats page */
table.heading1 tr:last-child td.separator {
   visibility: unset;
   display: table-cell;
}
/* and remove the white line on the column titles */
table.body3 tr.heading1 td{
   border-top:none;
}

table.body3 tr:hover, table.body14 tr:hover, div.entryFld:hover {
   background-color:#ebebeb; 
/*      border-color: #006CB6; */
}
table.body3 tr.heading1 a { color:#303030; }
table.body3 a:hover{	text-decoration: underline; }
div h2.Heading2 {
   margin:0;
   padding: .5em;
}
div.errmsg {
   margin: .5em 0;
   font-size: 18px;
   font-weight: bold;
   padding: 1em;
}
div.entryFld {
   padding: .5em;
   display: inline-block;
   width: 100%;
}
div.entryFld >  label {
   float: left;
   width: 200px;
}   
/* buttons */
input[type=submit],
input[type=reset],
input[type=button],
button {
   background: #999;
   color: white;
   border: 0px;
   border-radius: 3px;
   padding: 5px 15px;
}
input[type=submit]:disabled,
input[type=reset]:disabled,
input[type=button]:disabled,
button:disabled {
   background: #bbb;
   color:#ddd;
   border: 0px;
   border-radius: 3px;
   padding: 5px 15px;
}
input[type=submit]:enabled:focus,
input[type=reset]:enabled:focus,
input[type=button]:enabled:focus,
button:enabled:focus,
input[type=submit]:enabled:hover,
input[type=reset]:enabled:hover,
input[type=button]:enabled:hover,
button:enabled:hover {
   background-color: #8C189B;
   border-color: #848;
}
   
/* web messaging styles (see MSGHOME.INS.HTML and webmsg.js) */
.msgBody {
   width:calc(100% - 48px);
   border-spacing:0; 
   padding: 16px;
   min-height:300px;
   margin:24px !important; 
   height:calc(100vh - 100px)
}
.msgBody tr td.msgPageTitle {
   height:2em;
}
.msgHeading1 {
   background-color: #ddd;
   color:#303030;
   text-align: center;
   vertical-align:middle;
   width: 240px;
   min-width: 240px;
   height:1.5em;
   padding-bottom:0;
}
.msgHeading2 {
   padding-bottom:0;
   min-width:575px;
   /* enough for the chatmsg text box and chat button without wrap */
}
.msgsDiv {   
   display:flex; 
   position:relative; 
   height:100%; 
   margin:0px; 
   border:1px solid black;
}

#tabstrip {
   border-spacing: 0;
}
#tabstrip:first-child {
   height:1.5em;
}
.textRow td {
   padding-top: 0;
}
.msgForm {
   margin-top:5px;
   margin-bottom:5px;
}
.msgInput {
   height:2.5em;
}

   /* messaging dynamically applied styles */
.chat {
   font-size:12px;
   overflow-y: scroll;  
   width:100%; 
   max-height: 100%; 
   position: relative;
   padding-left:3px;
}
.userTab{
   font-size: 10px;
   padding: 4px;
   border-right: 1px solid white;
   border-bottom: 0;
}
.alertTab {
   background-color: orange;
   color: black;
   cursor: pointer;
}
.activeTab {
   background-color: black;
   color: white;
   font-weight: bold;
   border-radius: unset !important;
}
.inactiveTab {
   background-color: #484848;
   color: white;
   cursor:pointer;
}
.activeChat {
   display:block;
}
.inactiveChat {
   display:none;
}
.inmsgSpan {
   color:red;
}
.outmsgSpan {
   color:blue;
}

   /* messaging: id and pseudo styles */
.inactiveTab:hover { 
   text-decoration: underline;
}
.alertTab:hover{
   text-decoration: underline;
}
#users {
   height:100%;
   width:100%;
}

#msgtbl td:last-child {
   padding-left:16px;
}
#msgtbl ~ div#popfooter div.footright {
   visibility: hidden;
}
/* ereporting workstate colors */

td.workstate0{ color:black; background-color:yellow;}
td.workstate1{ color:white; background-color:green;}
td.workstate9{ color:white; background-color:black;}