/* Legacy style information first */
.linksmall {text-decoration:underline; font-family:arial,helvetica,sans-serif; font-size:11pt; color:blue}
.linkmed {text-decoration:underline; font-family:arial,helvetica,sans-serif; font-size:12pt; color:blue}
.linklarge {text-decoration:underline; font-family:arial,helvetica,sans-serif; font-size:14pt; color:blue}
.wnavsmall {text-decoration:none; font-family:arial,helvetica,sans-serif; font-size:11pt; color:white}
.onavsmall {text-decoration:none; font-family:arial,helvetica,sans-serif; font-size:11pt; color:#ff6600}
.wnav {text-decoration:none; font-family:arial,helvetica,sans-serif; font-size:12pt; font-weight:600; color:white}
.wnavbsmall {text-decoration:none; font-family:arial,helvetica,sans-serif; font-size:11pt; font-weight:500; color:white}
.onavbsmall {text-decoration:none; font-family:arial,helvetica,sans-serif; font-size:11pt; font-weight:500; color:#ff6600}
.onav {text-decoration:none; font-family:arial,helvetica,sans-serif; font-size:12pt; font-weight:600; color:#ff6600}
.bnav {text-decoration:none; font-family:arial,helvetica,sans-serif; font-size:12pt; font-weight:600}
.nav {text-decoration:none}
H1 {text-shadow: 1px 1px 2px black; font-family:arial,helvetica,sans-serif; font-size:20pt; color:black; font-weight:700}
H2 {margin-bottom: 5px; text-shadow: 1px 1px 2p black; font-family:arial,helvetica,sans-serif; font-size:17pt; color:black; font-weight:700}
P,td,th,br,form {font-family:arial,helvetica,sans-serif; font-size:12pt; color:black;}
li {font-family:arial,helvetica,sans-serif; font-size:12pt; color:black;}
ol,ul {font-family:arial,helvetica,sans-serif; font-size:12pt; color:black;margin-left:16pt; margin-top:0pt}
.b { font-weight: 700 }
.tar { text-align: right }
textarea { resize: none; overflow: hidden}
.btitle {font-family:arial,helvetica,sans-serif; font-size:20pt; color:black; font-weight:700}
.mtitle {font-family:arial,helvetica,sans-serif; font-size:16pt; color:black; font-weight:700}
.m2title {font-family:arial,helvetica,sans-serif; font-size:15pt; color:black; font-weight:700}
.title {font-family:arial,helvetica,sans-serif; font-size:13pt; color:black; font-weight:700}
.titlec {font-family:arial,helvetica,sans-serif; font-size:13pt; color:black; font-weight:700; text-align:center}
.wtitle {font-family:arial,helvetica,sans-serif; font-size:13pt; color:white; font-weight:700}
.bb { background: #000000 }
.wtitlec{font-family:arial,helvetica,sans-serif; font-size:13pt; color:white; font-weight:700; text-align:center}
.stitle {font-family:arial,helvetica,sans-serif; font-size:12pt; color:black; font-weight:700}
.stitlec {font-family:arial,helvetica,sans-serif; font-size:12pt; color:black; font-weight:700; text-align:center}
.wstitle{font-family:arial,helvetica,sans-serif; font-size:12pt; color:white; font-weight:700}
.large {font-family:arial,helvetica,sans-serif; font-size:22pt; color:black; font-weight:400}
.med {font-family:arial,helvetica,sans-serif; font-size:14pt; color:black; font-weight:400}
.rtitle {font-family:arial,helvetica,sans-serif; font-size:13pt; font-weight:700}
.std {font-family:arial,helvetica,sans-serif; font-size:12pt; color:black; font-weight:400}
.stderr {font-family:arial,helvetica,sans-serif; font-size:12pt; color:red}
.mederr {font-family:arial,helvetica,sans-serif; font-size:14pt; color:red}
.wstd {font-family:arial,helvetica,sans-serif; font-size:12pt; color:white}
.xsmall {font-family:arial,helvetica,sans-serif; font-size:9pt; color:black}
.xxsmall {font-family:arial,helvetica,sans-serif; font-size:7pt; color:black}
.wxsmall {font-family:arial,helvetica,sans-serif; font-size:9pt; color:white}
.small {font-family:arial,helvetica,sans-serif; font-size:11pt; color:black}
.xstitle{font-family:arial,helvetica,sans-serif; font-size:11pt; color:black; font-weight:700}
.xxstitle{font-family:arial,helvetica,sans-serif; font-size:9pt; color:black; font-weight:700}
.xxxstitle{font-family:arial,helvetica,sans-serif; font-size:7pt; color:black; font-weight:700}
.tdvis {font-family:arial,helvetica,sans-serif; font-size:12pt; bgcolor:yellow}
.tdvishead {font-family:arial,helvetica,sans-serif; font-size:12pt; bgcolor:grey}
.footer {font-family:arial,helvetica,sans-serif; font-size:12pt; align:center}
.copyright {font-family:arial,helvetica,sans-serif; font-size:12pt; align:center}
.desc {font-family:arial,helvetica,sans-serif; font-size:12pt; color:black; text-align:top}
.sbut {font-family:arial,helvetica,sans-serif;font-size:12px;background: #ffd07f;border-bottom: 1px solid #104A7B;border-right: 1px solid #104A7B;border-left: 1px solid #AFC4D5;border-top:1px solid #AFC4D5;color:#000000;height:20px;text-decoration:none; cursor:pointer; padding: 2px 2px 2px 2px;}
.sbutgrey {font-family:arial,helvetica,sans-serif;font-style: italic;font-size:12px;background: #eeeeee;border-bottom: 1px solid #104A7B;border-right: 1px solid #104A7B;border-left: 1px solid #AFC4D5;border-top:1px solid #AFC4D5;color:#666666;height:20px;text-decoration:none; cursor:pointer; padding: 2px 2px 2px 2px;}
.sbutnoborder {font-family:arial,helvetica,sans-serif;font-size:12px;background: #ffd07f;color:#000000;height:18px;text-decoration:none; cursor:pointer;}
.sbutlarge {font-family:arial,helvetica,sans-serif;font-size:16px;font-weight:700;background: #ffd07f;border-bottom: 1px solid #104A7B;border-right: 1px solid #104A7B;border-left: 1px solid #AFC4D5;border-top:1px solid #AFC4D5;color:#000000;height:20px;text-decoration:none; cursor:pointer;}
.sbutmed {font-family:arial,helvetica,sans-serif;font-size:12px;font-weight:700;background: #ffd07f;border-bottom: 1px solid #104A7B;border-right: 1px solid #104A7B;border-left: 1px solid #AFC4D5;border-top:1px solid #AFC4D5;color:#000000;height:16px;text-decoration:none; cursor:pointer;}
.sbutsmall {font-family:arial,helvetica,sans-serif;font-size:12px;background: #ffd07f;border-bottom: 1px solid #104A7B;border-right: 1px solid #104A7B;border-left: 1px solid #AFC4D5;border-top:1px solid #AFC4D5;color:#000000;height:16px;text-decoration:none; cursor:pointer;}
.sbutvsmall {font-family:arial,helvetica,sans-serif;font-size:10px;background: #ffd07f;border-bottom: 1px solid #104A7B;border-right: 1px solid #104A7B;border-left: 1px solid #AFC4D5;border-top:1px solid #AFC4D5;color:#000000;height:12px;text-decoration:none; cursor:pointer;}
.mono {font-family:courier;}
.monosmall {font-family:courier;font-size:10px}
.monocodeshade {font-family:"Courier New",monospace;font-size:9pt;border-style:solid;border-color:#888;border-width: 1px 1px 1px 1px; background-color:#dddddd;padding:5px; color:black;}
table.center { margin-left:auto; margin-right:auto; }
.fullpage {margin-left: 16pt; margin-right:16pt; margin-top:16pt; font-family:arial,helvetica,sans-serif; font-size:12pt; color:black}
#map { height: 236px; width: 422px; }
/* Navigation style info */
.dropbtn { height: 50px; background-color: #eeeeee; color: black; padding: 16px 16px; font-size: 18px; border: none; cursor: pointer; } /* Dropdown Button for top of form */
.dropbtn:hover, .dropbtn:focus { background-color: #999; } /* Dropdown button on hover & focus */
.dropbtnbody { ; background-color: #eeeeee; color: black; padding: 8px 20px; font-size: 11pt; border: none; cursor: pointer; } /* Dropdown Button for body */
.dropbtnbody:hover, .dropbtnbody:focus { background-color: #999; } /* Dropdown button on hover & focus */
.dropdown { position: relative; display: inline-block; white-space: nowrap; } /* The container
- needed to position the dropdown content */
.dropdown-content { display: none; position: absolute; background-color: #eeeeee; border: solid #666666; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index:1} /* Dropdown Content (Hidden by Default) */
.dccg:after { content: ""; display: table; clear: both; }
.dccgc { float: left; width: 50%; padding: 10px; }
.dropdown-content a { color: black; padding: 8px 12px; text-decoration: none; display: block; } /* Links inside the dropdown */
.dropdown-content i { color: grey; padding: 8px 12px; text-decoration: none; display: block; }
.dropdown-content a:hover {background-color: #ddd} /* Change color of dropdown links on hover */
.show {display:block;} /* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.hide {display:none;}
.sectionToggle { background-color: #dddddd; padding: 20px;}
/* Home page specific elements */
.homechannel {display: inline-block; height: 400px; width: 220px; margin: 10px 10px 10px 10px; padding: 20px 20px 20px 20px; background-color: #F4F4F4; box-shadow: 10px 10px 5px #ff6600; font-family:arial,helvetica,sans-serif; font-size:12pt; color:black; font-weight:400; border-style:solid; border-color: #666666; border-width: thin; position: relative}
.homechannelsashtl { display: block; position: absolute; transform: translate(-80px, -30px) rotateX(-40deg) rotateY(40deg); background-color: #ff6666; border: solid #ff6666; z-index:1; font-size: 24pt; font-weight: 700}
.homechannelsashbr { display: block; position: absolute; transform: translate(40px, 180px) rotateX(-40deg) rotateY(40deg); background-color: #ff6666; border: solid #ff6666; z-index:1; font-size: 24pt; font-weight: 700}
/* Login button style info */
.loginbutton { display: inline-block; vertical-align:middle; white-space: nowrap; background-color: #ffd07f; color: black; font-size: 18px; border: none; cursor: pointer; border-radius: 30px 30px 30px 30px; padding: 5px; border-style:solid; border-color: black; border-width:thin;}
/* positioning the images on the homepage to bottom and center to its cell */
.img-center-bottom{ position: absolute; bottom: 35; left: 0; width: 100%; height: 100px; text-align: center;}
.img-center-bottom img{ display: inline; height: 100px; width: auto; border: 0; }
/* CSS to format stuff that used to be generated with myheading */
.myhead {margin-left: -3px; font-family:arial,helvetica,sans-serif; font-size:13pt; color:black; font-weight:700; border-width: 3px; border-style: solid; border-image: linear-gradient(to right,black,#ff6600,#ff6600,#ff6600) 0 0 2 stretch; }
/* New stuff introduced with the accounting service */
/* ------------------------------------------------ */
/* Keep the header of the page at the top of the viewable area */
.sticky { position: sticky; top: 0px; background-color:rgba(0, 0, 0, 0); z-index: 1; }
/* A div overlay that renders the background partially shaded out. Used for modal popups */
.modalshade { position:fixed; top:0; left:0; background:rgba(0,0,0,0.6); z-index:5; width:100%; height:100%; display:block; opacity: 2; }
.modalpopup { margin:0 auto; position:fixed; top: 50%; left: 20%; z-index:10; display:block; border:5px solid #cccccc; border-radius:10px; background: #ffffff; }
/* A div overlay that renders the background partially shaded out. Used by roller */
.rollershade { position:fixed; top:0; left:0; background:rgba(0,0,0,0.6); z-index:15; width:100%; height:100%; display:block; opacity: 2; }
.modalroller { margin:0 auto; position:fixed; top: 50%; left: 45%; z-index:20; display:block; border:5px solid #cccccc; border-radius:10px; background: #ffffff; }
.rowbordera { border: 1px solid #000000; }
.rowborderb { border-bottom: 1px solid #000000; }
.rowbordert { border-top: 1px solid #000000; }
.rowborderl { border-left: 1px solid #000000; }
.rowborderr { border-right: 1px solid #000000; }
.rowhl { border-bottom: 1px solid #cccccc; text-align: left; padding-right: 7px }
.rowhlr { border-bottom: 1px solid #cccccc; text-align: right; padding-left: 7px }
.rowhlb { border-bottom: 1px solid #cccccc; text-align: left; padding-right: 7px; font-weight: 700 }
.rowhlrb { border-bottom: 1px solid #cccccc; text-align: right; padding-left: 7px; font-weight: 700 }
.rowhlbb { border-top: 2px solid #000000; text-align: left; padding-right: 7px; font-weight: 700 }
.rowhlrbb { border-top: 2px solid #000000; text-align: right; padding-left: 7px; font-weight: 700 }
.rowleftwall { border-left: 1px solid #cccccc; }
.rowleftwallbb { border-left: 2px solid #000000; }
.rownopad { padding-left: 0px; padding-right: 0px }
.rowaddpadl { padding-left: 7px }
.rowaddpadl2 { padding-left: 14px }
.rowaddpadl3 { padding-left: 21px }
.rowaddpadr { padding-right: 7px }
.rowcenter { text-align: center; }
.rowright { text-align: right; }
.rowleft { text-align: left; }
.bgoffset { background: #eeeeee; }
.hoverTable{ border-collapse:collapse; }
.hoverTable td{ }
.hoverTable tr:hover { background-color: #ffff99; cursor:pointer}
.hoverTable th { background: #cccccc; }
/* Style control of CSS emulated checkboxes */
/* The container */
.container { display: block; position: relative; padding-left: 35px; padding-bottom: 3px; margin-bottom: 12px; cursor: pointer; font-size: 14; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
/* Hide the browser's default checkbox */
.container input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; }
/* Create a custom checkbox */
.checkmark { position: absolute; top: 0; left: 0; height: 14px; width: 14px; background-color: #eee; border: 1px solid grey; }
/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark { background-color: #ccc; }
/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark { background-color: #2196F3; }
/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after { content: ""; position: absolute; display: none; }
/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after { display: block; }
/* Style the checkmark/indicator */
.container .checkmark:after { left: 5px; top: 3px; width: 3px; height: 6px; border: solid white; border-width: 0 3px 3px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); }
.lds-roller { display: inline-block; position: relative; width: 80px; height: 80px; }
.lds-roller div { animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite; transform-origin: 40px 40px; }
.lds-roller div:after { content: " "; display: block; position: absolute; width: 7px; height: 7px; border-radius: 50%; background: #2196f3; margin: -4px 0 0 -4px; }
.lds-roller div:nth-child(1) { animation-delay: -0.036s; }
.lds-roller div:nth-child(1):after { top: 63px; left: 63px; }
.lds-roller div:nth-child(2) { animation-delay: -0.072s; }
.lds-roller div:nth-child(2):after { top: 68px; left: 56px; }
.lds-roller div:nth-child(3) { animation-delay: -0.108s; }
.lds-roller div:nth-child(3):after { top: 71px; left: 48px; }
.lds-roller div:nth-child(4) { animation-delay: -0.144s; }
.lds-roller div:nth-child(4):after { top: 72px; left: 40px; }
.lds-roller div:nth-child(5) { animation-delay: -0.18s; }
.lds-roller div:nth-child(5):after { top: 71px; left: 32px; }
.lds-roller div:nth-child(6) { animation-delay: -0.216s; }
.lds-roller div:nth-child(6):after { top: 68px; left: 24px; }
.lds-roller div:nth-child(7) { animation-delay: -0.252s; }
.lds-roller div:nth-child(7):after { top: 63px; left: 17px; }
.lds-roller div:nth-child(8) { animation-delay: -0.288s; }
.lds-roller div:nth-child(8):after { top: 56px; left: 12px; }
@keyframes lds-roller {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* Date picker */
.picker-wrap { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.5); opacity: 0; visibility: hidden; transition: opacity 0.2s;} /* [POPUP] */
.picker-wrap.show { opacity: 1; visibility: visible; }
.picker-wrap .picker{ margin: 50vh auto 0 auto; transform: translateY(-50%) }
.picker { max-width: 300px; background: #cccccc; padding: 10px; } /* [CONTAINER] */
.picker-m, .picker-y { width: 50%; padding: 5px; box-sizing: border-box; font-size: 16px; display:none; } /* [MONTH + YEAR] */
.picker-d table { color: #fff; border-collapse: separate; width: 100%; margin-top: 10px; } /* [DAY] */
.picker-d table td { width: 14.28%; /* 7 equal columns */ padding: 5px; text-align: center; font-size: 16px}
.picker-d-h td { font-weight: bold; } /* Header cells */
.picker-d-b { background: #cccccc; } /* Blank dates */
.picker-d-d:hover { cursor: pointer; background: #ffffff; } /* Pickable Dates */
.picker-d-dd { color: #888; background: #4e4e4e; } /* Unpickable Dates */
.picker-ymd table { color: #fff; border-collapse: separate; width: 100%; margin-top: 10px; font-size: 16px} /* [DAY] */
.picker-ymd td { width: 25%; /* 4 equal columns */ padding: 2px; text-align: center; font-size: 16px}
.picker-ymdd:hover { cursor: pointer; background: #ffffff; }
.picker-disp-y, .picker-disp-m, .datefield { height: 21px; font-size: 12px; }
.gjnuminput { direction: rtl; height: 21px; font-size: 12px }
.gjnuminputsmall { direction: rtl; height: 21px; font-size: 12px; border: 1px solid lightgray; }
.gjnuminputbig { padding: 10px 10px 10px 10px; direction: rtl; height: 21px; font-size: 14px }
.gjtxtinput { height: 21px; font-size: 12px }
.gjtxtinputsmall { height: 21px; font-size: 12px; border: 1px solid lightgray; }
.gjselectinput { height: 21px; font-size: 12px }
.gjnuminput:read-only { background-color: #e8e8e8 }
.gjnuminputsmall:read-only { background-color: #e8e8e8 }
.gjtxtinput:read-only { background-color: #e8e8e8 }
.gjtxtinputsmall:read-only { background-color: #e8e8e8 }
input:read-only { background-color: #e8e8e8 }
/* A typable input text box with drop down and 'autocomplete' filtering of dropdown list */
.combobox-list { position: relative; }
.combobox .group { display: inline-flex; border: 1px solid grey; }
.combobox .group input, .combobox .group button { background-color: white; color: black; box-sizing: border-box; height: 21px; vertical-align: bottom; border: 0px solid lightgray; }
.combobox .group input { width: 10.75rem; border-right: none; outline: none; font-size: 12px; padding: 0.1em 0.3em; }
.combobox .group button { width: 1.25rem; border-left: none; outline: none; font-size: 12px; }
.combobox .group.focus { border: 1px solid steelblue; }
ul[role="listbox"] { z-index: 1; margin: 0; padding: 0; position: absolute; left: 0; top: 1.75rem; list-style: none; background-color: white; display: none; box-sizing: border-box; border: 1px lightgray solid; border-top: none; max-height: 300px; overflow-y: scroll; font-size: 85.0%; white-space: nowrap; }
ul[role="listbox"] li[role="option"] { border-top: 1px solid transparent; background-color: white; border-bottom: 1px solid transparent; display: block; margin: 0; padding: 0.0em 0.0em; font-size: 12px; }
ul[role="listbox"] li[role="option"] span { float: left; text-overflow: ellipsis; }
/* focus and hover styling */
[role="listbox"].focus [role="option"][aria-selected="true"] { background-color: #DEF; border-color: #8CCBF2; }
[role="listbox"] li[role="option"]:hover { background-color: #DEF; }
.expand { border: 1px solid steelblue; padding: 0.1em 0.1em; }
.expand:hover { cursor: pointer; background: #ffffff; }
.table{ display: table; }
.tr{ display: table-row; }
.td{ display: table-cell; }
.dead { display: none; }
input[type="file"] { display: none; }
/* Ticket chat like styles */
.chat2staff { white-space: pre-wrap; background-color: #00e34d; clear: both; float: right; border-radius: 10px; padding: 10px; margin: 10px 0; }
.chat2 { white-space: pre-wrap; background-color: #ddd; clear: both; float: left; border-radius: 10px; padding: 10px; margin: 10px 0; }
.chat2::after { content: ""; clear: both; display: table; }
.time-staff { float: right; }
.time-left { float: left; }
.status { background-color: #ffd07f; clear: both; float: left; border-radius: 10px; padding: 10px; margin: 10px 0; }
/* Slanted table headings */
th.rotate { height: 140px; white-space: nowrap; }
th.rotate > div { transform: translate(21px, 51px) rotate(315deg); width: 30px; }
th.rotate > div > span { border-bottom: 1px solid #ccc; padding: 5px 0px; }
.imgclickable:hover { cursor:pointer}
a.help { color:#fff; background-color:#ff7733; width:18px; height:18px; display:inline-block; border-radius:100%; font-size:14px; font-weight: bold; text-align:center; text-decoration:none; box-shadow: inset -1px -1px 1px 0px rgba(0,0,0,0.25); }
.grid2 { display: grid; grid-template-columns: repeat(2, 1fr); }
.grid2 > span { padding: 40px 80px; }
.grid7 { display: grid; grid-template-columns: repeat(7, 1fr); }
.grid7 > span { white-space: nowrap}
.grid7 > div { white-space: nowrap; position: sticky; top: 0; background-color: #cccccc; font-weight: 700 };
.bigstep { font-family:arial,helvetica,sans-serif; font-style: italic; font-size:22pt; color:black; font-weight:900}
.bigstep > ol { }
.bigstep > ol > li { font-style: italic; font-size: 22pt}
.bigstep > ol > li > p { font-style: normal; font-size:14pt; font-weight: 400}
.callto { border-radius: 10px; background: #ffd07f; padding: 10px; width: 200px; font-family:arial,helvetica,sans-serif;font-size:16px; font-weight: 700 }
.cashflowcontainer { height: 300px; overflow-y: scroll }
.betatrial { font-family:arial,helvetica,sans-serif; font-size:18pt; color:black; font-weight:900}
.iifcb { display: inline-block; width: 300px }
.trunc25 {width: 25px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trunc50 {width: 50px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trunc100 {width: 100px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trunc150 {width: 150px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trunc250 {width: 250px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trunc400 {width: 400px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }