- 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; }