/*
WebOS2 CSS
File Structure:
html, body
Screen <= 3840px (4K UHD)
Screen <= 1920px (FHD Designed For by Default)
Screen <= 1600px
Screen <= 1366px (HD)
Screen <= 1024px (Tablet)
Screen <= 640px (Phone)
Screen <= 320px (Watch)
*/
/* ================================================================= Page ====================================================== */
html {
height: 100%;
min-width: 100%;
width:100%;
-webkit-overflow-scrolling: none;
}
body {
background-attachment: fixed;
background-repeat: repeat;
background-size: 0 0;
font-family: sans serif, freesans, arial;
font-size: 1em;
height: 100%;
line-height: 1.25em;
min-height: 100%;
min-width: 100%;
margin: 0 auto;
overflow-x: hidden;
overflow-y: hidden;
padding: 0px;
padding-top: 0px;
width: 100%;
-webkit-overflow-scrolling: none;
}
.page_container {
border-collapse: collapse;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
height: 100%;
margin: 0 auto;
padding: 0px;
width: 100%;
}
/* ================================================================= Menu ====================================================== */
.menu {
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.05);
border-radius: 10px;
display: inline-block;
/*float: left;
*/
margin-right: 2px;
padding: 0px;
width: 200px;
}
.menu_footer {
color: #000000;
font-size: 0.75em;
padding: 15px;
text-align: center;
}
/* ------------------------------------------------------------ Menu: Logo ------------------------------------------------ */
.logo_container {
font-size: 0.7em;
font-weight: bold;
float: left;
margin: 0px;
padding: 0px;
width: 6%;
}
.logo {
border-radius: 0px;
box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.75);
margin: 0 auto;
top: -15px;
width: 100%;
z-index: 50;
}
.clearfix:after {
content: " ";
display: block;
height: 0;
clear: both;
}
/* ------------------------------------------------------------ Menu: Info ------------------------------------------------ */
#info_container {
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.15);
color: #444444;
font-size: 0.65em;
font-weight: bold;
height: 20px;
}
.taskbar_icon {
height: 20px;
vertical-align: middle;
width: 20px;
}
.user_cell {
float: left;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
width: 42%;
}
.mail_cell {
float: left;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
width: 23%;
}
.mail_count {
border-radius: 0px;
color:#FFFFFF;
font-size: 0.85em;
font-weight: bold;
padding: 0px;
text-align: center;
text-shadow: 0px 0px 2px #ee7700;
}
.time_cell {
color: #FFFFFF;
cursor: pointer;
float: right;
padding-right:3px;
padding-top:1px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
width: 4em;
}
/* ------------------------------------------------------------ Menu: Item Container ------------------------------------------------ */
.menu_container {
display: block;
/*height: 100%;
*/
/*position: relative;
*/
width: 100%;
overflow: hidden;
height: calc(100% - 34px);
position: absolute;
left: 0px;
top: 35px;
padding: 0px;
z-index: 500;
}
.menu_overlay {
height: 100%;
overflow-y: scroll;
width: calc(100% + 20px);
position: absolute;
/*right:-17px;
*/
/*width: 100%;
*/
}
.over_header {
background-color: #BBBBBB;
overflow: hidden;
height: 5px;
}
.page_header {
background: linear-gradient(#666666, #333333);
border-top: 1px outset #999999;
line-height: 0px;
position: relative;
width: 100%;
}
.page_header_center {
bottom: 0px;
font-size: 0px;
line-height: 0px;
margin: 0 auto;
position: relative;
}
/* ------------------------------------------------------------ Menu: Item ------------------------------------------------ */
.menu_item {
border-radius: 10px;
cursor: pointer;
font-weight: bold;
font-size: 0.75em;
height: 17px;
line-height: 17px;
margin-bottom: 2px;
margin-top: 2px;
padding: 2px;
padding-left: 7px;
text-overflow: ellipsis;
}
.menu_item a {
color:#000000;
text-decoration: none;
}
.menu_item:hover {
background-color:rgba(50,50,50,0.75);
border:0px ridge #222222;
border-radius:0px;
color:#FFFFFF;
}
.menu_item:hover a {
color: #FFFFFF;
}
.menu_item_selected {
background-color: #FA0 !important;
border-bottom-right-radius:0px;
border-top-right-radius:0px;
color:#FFF !important;
text-shadow: 0px 0px 2px #000;
/* FA0 */
}
.menu_item_selected a {
color: #555555;
}
.menu_item_selected:hover {
background-color: transparent;
border-bottom-right-radius:0px;
border-top-right-radius:0px;
}
.menu_item_selected:hover a {
color: #555555;
}
.menu_toolbar {
background-color:rgba(200,200,200,0.60);
border-radius:0px;
padding:0px;
width:100%;
}
.menu_toolbar td {
padding:0px;
padding-right:7px;
vertical-align:top;
}
/* ------------------------------------------------------------ Menu: Group ------------------------------------------------ */
.group_title {
background-color:rgba(50,50,50,0.95);
color: #FFFFFF;
cursor: pointer;
font-size: 0.75em;
font-weight: bold;
height: 17px;
line-height: 17px;
margin: 0px;
padding: 1px;
padding-left: 7px;
}
.group_title:hover {
background-color:rgba(70,70,70,0.95);
}
.group_title_selected {
background-color:rgba(100,100,100,0.95);
color: #FFFFFF;
text-shadow: 0px 0px 2px #000000;
cursor: pointer;
font-size: 0.75em;
font-weight: bold;
height: 17px;
line-height: 17px;
margin: 0px;
padding: 1px;
padding-left: 7px;
}
.group_footer {
background-color:rgba(100,100,100,0.95);
cursor: pointer;
height: 7px;
}
.menu_group {
border-radius: 5px;
background-color: transparent;
margin-bottom: 2px;
margin-top: 2px;
padding: 0px;
}
.menu_group_contents {
display: none;
}
.menu_group_contents_selected {
display: block;
}
.menu_group_container {
}
.group_title:hover a {
color: #FFFFFF;
}
/* ======================================== Menu Content ========================================*/
/* Main Menu Items */
.main-menu ul {
top: 0px;
left: 0px;
border: 1px ridge #333333;
border-bottom-color: #111111;
border-left-color: #111111;
border-right-color: #55555;
border-top-color: #55555;
box-shadow: 2px 2px 5px #000000;
cursor: pointer;
line-height: 18px;
list-style: none;
margin: 0;
padding: 0;
position: absolute;
width: 180px;
z-index: 500;
}
/* List item inside the menu */
.main-menu li {
background: rgba(0, 0, 0, 0.9);
height: 26px;
padding-top: 8px;
white-space: nowrap;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.main-menu li:hover {
background: #AA5522;
}
/* Icon inside the list item */
.main-menu .menu_icon {
float: left;
padding-left: 10px;
padding-right: 10px;
position: absolute;
height: 20px;
width: 20px;
}
/* Link inside list item */
.main-menu li a {
color: rgba(255,255,255,1);
text-decoration: none;
text-shadow: 0px 0px 5px #000000;
font-family: sans-serif;
font-size: 11px;
font-weight: normal;
margin: 0px;
padding: 0px;
padding-left:40px;
display: block;
text-overflow: ellipsis;
overflow: hidden;
padding-right:17px;
}
/* Arrow after the link */
.main-menu ul li > a:after {
color: #BBBBBB;
content: '>';
float: right;
right: 0px;
position: absolute;
line-height: 17px;
padding-right: 10px;
text-shadow: 0px 0px 0px;
}
/* Remove arrow from link, leave for directories */
.main-menu ul li > a:last-child:after {
content: '';
}
/* This hides the Sub-Menus */
.main-menu li ul {
/*display: none;*/
visibility: hidden;
}
/* ========================= Sub Menu ========================= */
/* Display the Sub-Menu */
.menu_spacer {
background-color: #050505;
border-color: #050505;
color: #CCCCCC;
display:none;
}
.main-menu li.menu_spacer_li {
background-color: #222222;
border: 1px inset #333333;
height: 3px;
padding: 0px;
}
.main-menu li.menu_spacer_li:hover {
background-color: #222222;
}
/* ================================================================= LEGACY: Webpage ====================================================== */
/* .under_header {
border-top: 1px ridge #444444;
background: linear-gradient(#888888, #444444);
height: 20px;
}
.tagline {
color: #777777;
display: block;
float: left;
font-size:9px;
padding-left: 3px;
}
.controls {
display: block;
float:right;
font-size: 9px;
}
.share_text {
display: block;
float: left;
font-weight: bold;
padding-bottom:2px;
padding-right: 5px;
text-shadow: 0px 0px 3px #000000;
}
*/
.taskbar_text {
font-size: 0.8em;
font-weight: bold;
margin-right: 0px;
padding-right: 0px;
line-height: 2.5em;
display: inline-block;
text-align: right;
width: 100%;
}
.window_switcher_window
{
width: 150px !important;
display: inline !important;
white-space: nowrap !important;
background: #111111 !important;
border: inset 1px #444444 !important;
color: #FFFFFF !important;
cursor: pointer !important;
font-size: 0.5em !important;
overflow: hidden !important;
text-align: left !important;
text-overflow: ellipsis !important;
margin-top: 2px !important;
}
/*
width:150px;display:inline;white-space: nowrap;background:#111111;border: inset 1px #444444;color:#FFFFFF;cursor:pointer;font-size:0.5em;overflow:hidden;text-align:left;text-overflow:ellipsis;margin-top:2px;
*/
/* ================================================================= Desktop ====================================================== */
#desktop {
height: 100%;
width: 100%;
position: relative;
}
/* --------------------------------------------------------- Desktop Taskbar ---------------------------------------------- */
.desktop_taskbar {
display: none;
height: 36px;
z-index: 500;
}
.quick_launch {
float: left;
margin-left: 6px;
height: 35px;
position: relative;
text-overflow: ellipsis;
max-width: 25%;
min-width: 20px;
overflow: hidden;
}
.quick_launch_icon {
margin: 1px;
margin-top: 6px;
margin-left: 1px;
margin-right: 1px;
text-shadow: 0px 0px 3px #FFFFFF;
width: 22px;
}
.quick_launch_icon:hover {
cursor: pointer;
margin: 1px;
margin-top: 6px;
margin-left: 2px;
margin-right: 2px;
text-shadow: 0px 0px 3px #FFFFFF;
width: 20px;
}
/* --------------------------------------------------------- Desktop Workspaces ---------------------------------------------- */
.desktop_workspace {
height: 100%;
width: 100%;
}
#icon_wrapper {
height: 100%;
/* FIX FOR COLUMNS - Chrome Flicker between columns ? columns: 100px;
column-fill:auto;
*/
/*-moz-columns: 100px;
-webkit-columns: 100px;
-moz-column-gap: 5px;
-webkit-column-gap: 5px;
column-gap: 5px;
-webkit-backface-visibility: hidden;
-webkit-column-break-inside: avoid;
height: 100%;
-moz-column-fill: auto;
-webkit-column-fill: auto;
column-fill:auto;
*/
}
.desktop_icon {
/* float: left;
*/
cursor: pointer;
display: inline-block;
/*font-size: 0.675em;*/
font-size:0.675em;
height: 100px;
line-height: 1.25em;
margin: 0px;
margin-left: 2px;
text-align: center;
text-shadow: 0 0 2px #000;
vertical-align: middle;
overflow-wrap: break-word;
width: 85px;
/*-webkit-column-break-inside: avoid;
*/
/*-webkit-backface-visibility: hidden;
page-break-inside: avoid;
break-inside: avoid;
*/
/* text-shadow: 0px 0px 3px #000000;
*/
position:relative;
}
.desktop_icon a {
color: #FFFFFF;
font-size: 0.9em;
font-weight: bold;
text-decoration: none;
text-shadow: 0px 0px 3px #000000;
position: relative;
}
.desktop_icon_image {
color:#FFF;
font-weight:bold;
height: 48px;
padding:10px;
width: 48px;
-webkit-filter: drop-shadow(0px 0px 1px #000);
filter: drop-shadow(0px 0px 1px #000);
}
.desktop_icon:hover >.desktop_icon_image {
height: 44px;
padding: 12px;
width: 44px;
}
.desktop_icon:hover .desktop_icon a {
text-shadow: 0px 0px 3px #FFFFFF;
}
/* ================================================================= Window ====================================================== */
.desktop_window {
border: 1px inset #BBB;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
box-shadow: 0px 0px 5px #FFF;
border-top: 0px;
background-image: linear-gradient( to bottom, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.3) 27px, rgba(200, 200, 200, 1) 27px, rgba(200, 200, 200, 1) 100% );
}
.helper {
border: 2px dotted gray;
}
.window_handle {
background-color:rgba(254, 254, 254, 0.0);
border-left: 1px rgba(254, 254, 254, 0.1) dotted;
cursor: move;
height: 23px;
margin-left: 290px;
margin-right: 10px;
/*margin-top: 2px; */
overflow: hidden;
position: absolute;
top: 0px;
width: calc(100% - 300px);
z-index: 600;
}
.window_viewport {
border: 0px;
height: 100%;
width: 100%;
z-index: 89;
position: relative;
}
.window_loading {
left: calc( 50% - 150px);
opacity: 0.25;
position:absolute;
top: calc( 50% - 150px);
width:300px;
z-index: 88;
}
.window_titlebar {
height: 27px;
}
.window_content {
height: 100%;
}
.frameOverlay {
z-index: 7000000;
height: calc(100% - 36px);
width: 100%;
background: rgba(34, 34, 34, 0);
position: absolute;
top: 0;
left: 0;
display: none;
}
/* ------------------------------------------------------------ Application ------------------------------------------------ */
h1 {
/* background-color:rgba(0, 0, 0, 0.5);
border-top-left-radius: 15px;
border-top-right-radius: 15px;
*/
/* border: inset 1px;
*/
color: #FFFFFF;
font-size: 0.7em;
font-weight: bold;
margin: 0px;
overflow: hidden;
text-overflow: ellipsis;
padding:3px;
padding-left: 10px;
position: relative;
text-align: left;
text-shadow: 0px 0px 3px #000000;
top: 0;
white-space: nowrap;
/*width: calc(100% - 173px);
*/
padding-right: 173px;
}
h2 {
font-size: 0.95em;
}
h3 {
font-size: 0.90em;
}
h4 {
font-size: 0.85em;
}
.file_menu {
background-color:rgba(200, 200, 200, 1);
color:#FFF;
border: ridge 1px;
font-size:0.75em;
position:relative;
padding-left:6px;
width: calc(100% - 8px);
}
.file_menu_item {
color: #000;
float:left;
margin-right:1.6em;
padding-bottom:2px;
padding-top:2px;
position:relative;
}
table {
border: 0px solid #ddd;
border-collapse: separate;
border-left: 0;
border-spacing: 0px;
padding: 2px;
}
thead {
display: table-header-group;
vertical-align: middle;
border-color: inherit;
}
tr {
display: table-row;
vertical-align: inherit;
border-color: inherit;
}
th, td {
text-align: left;
vertical-align: top;
border-left: 0px solid #ddd;
}
td {
border-top: 0px solid #ddd;
}
table.standard_table {
border: 1px solid #CCCCCC;
border-radius:10px;
font-size: 0.85em;
margin:5px;
width:100%;
}
table.standard_table th {
color:#000000;
font-size: 0.85em;
padding:1px;
text-align: right;
}
table.standard_table td {
padding:1px;
text-align: center;
width:90px;
}
thead:first-child tr:first-child th:first-child, tbody:first-child tr:first-child td:first-child {
}
thead:last-child tr:last-child th:first-child, tbody:last-child tr:last-child td:first-child {
}
tbody:last-child tr:last-child td:last-child {
}
/* ------------------------------------------------------------ Application: Custom ------------------------------------------------ */
.action_message {
padding:0px;
width: 100%;
text-align: center;
text-shadow: 0px 0px 3px #FFF;
color: #000;
}
.result_message {
padding:0px;
}
.action_message p {
/*background-color:#EE7700;
*/
background-color:#777777;
border: 1px inset;
/*border-radius:10px;
*/
color:#FFFFFF;
font-size:0.75em;
font-weight:bold;
margin:0px;
margin-bottom:2px;
padding:10px;
text-shadow: 0px 0px 3px #000000;
text-decoration: blink;
width:calc(100% - 22px);
}
.application {
border-collapse: collapse;
/*border-radius:10px;
*/
/*max-width: 940px;
*/
/*height: calc(100% - 99px);
*/
bottom: 0px;
margin: 0px;
padding: 0px;
position: relative;
top: 0px;
width: 100%;
-webkit-overflow-scrolling: none;
}
.application_container {
background-color: #eee;
/*background-image: linear-gradient(#eee, #aaa);
*/
border-collapse: collapse;
line-height: 1.1em;
font-size: 0.9em;
height: calc(100% - 112px);
left: 0px;
margin: 0px;
overflow-y: scroll;
padding: 0px;
position: relative;
width:100%;
-webkit-overflow-scrolling: none;
}
#app {
background-image: linear-gradient(#ddd, #ccc);
}
#file_menu {
background-image: linear-gradient(#ccc, #ddd);
}
#file_icon_menu {
background-image: linear-gradient(#ddd, #ccc);
}
.iapplication_container {
background-color: rgba(200, 200, 200, 1);
border-collapse: collapse;
height:calc(100% - 45px);
left: 0px;
margin: 0px;
/*overflow-y: scroll;
*/
padding: 0px;
position: relative;
width:100%;
-webkit-overflow-scrolling: none;
}
.application_container .application_container {
border-radius:15px;
border: 0px;
margin-left: 0px;
margin: 0px;
padding: 0px;
position: relative;
}
.application_row {
border: 0px;
border-collapse: collapse;
clear: both;
margin: 0px;
padding: 0px;
/*width: calc(100% - 4px);*/
width:100%;
-webkit-overflow-scrolling: none;
}
.application_cell {
border: 0px;
border-collapse: collapse;
color: #000;
float: left;
padding: 0px;
vertical-align: top;
width: 100%;
-webkit-overflow-scrolling: none;
}
.result_message p {
background-color:#D4D0C8;
border: 1px inset;
color:#000000;
font-size:0.75em;
margin:0px;
margin-bottom:2px;
padding:10px;
width:calc(100% - 22px);
}
.result_message p input[type=button], .action_message p input[type=button] {
float:none;
/*height: 4em;
*/
width: 200px;
}
/* ------------------------------------------------------------ Form ------------------------------------------------ */
caption {
caption-side: top;
color: #000000;
font-size:1em;
font-weight: bold;
margin-bottom: -7px;
padding-left:10px;
text-align:left;
text-shadow: 0px 0px 5px #FFFFFF;
}
fieldset {
background-color:rgba(200,200,200,0);
border: 2px groove;
border-color:#FFFFFF;
color:#000000;
font-size:0.9em;
height: 100%;
left:0px;
margin: 0px;
margin-left: 2px;
padding:0px;
width: calc(100% - 6px);
}
fieldset p {
padding-left: 5px;
}
input[type=text], input[type=password], input[type=date] {
border:1px inset;
color:#000000;
font-size:1em;
font-family: sans-serif;
min-height:18px;
margin-bottom:2px;
margin-top: 2px;
padding:1px;
width:68%;
/*width: calc(100% - 13vw);*/
/*min-width: 5vw;*/
}
:disabled {
background-color:rgba(255,255,255,0.1);
}
input[readonly] {
background-color:rgba(212,208,200,1);
}
input[type=button]:hover {
background-color: #555555;
border: 1px solid #FFFFFF;
box-shadow: 0 0 2px 2px #FFFFFF;
color: #FFFFFF;
cursor: pointer;
text-shadow: 0px 0px 1px #FFFFFF;
}
input[type="checkbox"] {
color: #000000;
margin-left: -1px;
width: 20px;
}
input[type="email"] {
height:14px;
margin-top:1px;
margin-bottom:1px;
}
label {
color:#111111;
display: inline-block;
font-size:0.85em;
line-height:2em;
margin: 0px;
padding: 0px;
padding-left: 0.5vw;
vertical-align: top;
width: 27%;
/*width: 12vw;*/
/*max-width: 150px; */
}
legend {
/*color:#777777;
*/
color: #000;
font-size:0.9em; /* 0.75em */
font-weight: normal;
margin-left: 5px;
margin-right: 3px;
padding-left:3px;
margin-bottom: 2px;
margin-top: 2px;
text-shadow: 0px 0px 3px #FFFFFF;
margin-top:0px;
white-space: nowrap;
overflow:hidden;
text-overflow: ellipsis;
width: calc(100% - 15px); /*95%;*/
}
select {
background-color:rgba(255,255,255,1);
border: inset 1px;
color: #000000;
font-size:1em;
min-height:20px;
margin-bottom:2px;
margin-right:0px;
margin-top: 2px;
text-overflow:ellipsis;
width:68%;
/*width: calc(100% - 13vw);
min-width: 5vw;*/
}
textarea {
color: #000000;
background-color:rgba(255,255,255,1);
border-color: #FFFFFF;
border: inset 1px;
font-size:1em;
font-family: sans-serif;
height:60px;
margin-top:1px;
margin-bottom:1px;
/* width: calc(100% - 13vw);
min-width: 5vw;*/
width:68%;
}
/* ------------------------------------------------------------ Form: Custom ------------------------------------------------ */
.clear {
clear: both;
}
.inline_label {
line-height: 2em;
vertical-align:bottom;
}
.input50 {
width:50px;
}
.input75 {
width:75px;
}
.weblink {
color: #0000FF;
font-size:0.75em;
font-weight: bold;
text-decoration: none;
}
.text_right {
text-align: right;
}
.text_center {
text-align: center;
}
.height_15 {
height:15px;
}
.height_30 {
height:30px;
}
.height_400 {
height: 400px;
}
.height_500 {
height: 500px;
}
.height_600 {
height: 600px;
}
.height_700 {
height: 700px;
}
.height_800 {
height: 800px;
}
.width_25 {
width:25px;
}
.width_50 {
width:50px;
}
.width_75 {
width:75px;
}
.width_100 {
width:100px;
}
.width_125 {
width:125px;
}
.width_150 {
width:150px;
}
.width_200 {
width:200px;
}
.width_225 {
width:225px;
}
.width_249 {
width:249px;
}
.width_250 {
max-width:250px;
width:100%;
padding-right:0px;
}
.width_450 {
max-width:450px;
width:100%;
}
.width_650 {
max-width:650px;
width:100%;
}
.width_33pc {
width:33%;
/* !important */
}
.width_50pc {
width:50%;
/* !important */
}
.width_100pc {
width:100%;
/* !important */
}
input[type=text] .width_100pc {
width:100%;
/* !important */
}
.width_10pc_label {
float: right;
min-width:100px;
width: 10% !important;
}
.width_20pc_label {
float: right;
min-width:100px;
text-align: right;
width: 20% !important;
}
.width_60pc_label {
font-weight: bold;
text-align: right;
max-width: calc(100% - 120px);
width: 60%;
}
.width_70pc_label {
font-weight: bold;
text-align: right;
max-width: calc(100% - 120px);
width: 70%;
}
.width_80pc_label {
font-weight: bold;
text-align: right;
max-width: calc(100% - 120px);
width: 80%;
}
.spacer {
line-height:2em;
}
.duplicate_check {
background-color: #FFFFFF;
border-radius: 5px;
color:#000000;
display:inline-block;
font-weight:bold;
height:50px;
padding:10px;
width:230px;
}
.duplicate_check_ok {
background-color: #00FF00;
color: #FFFFFF;
}
.duplicate_check_duplicate {
background-color: #FF0000;
color: #FFFFFF;
}
.find_link {
font-size: 0.9em;
text-decoration: none;
}
.find_link:visited {
font-weight:bold;
text-decoration: none;
}
.inline_label {
color:#DA2028;
width:auto;
}
.checkbox_group_span {
background-color: #DDDDDD;
border: 0px inset #EEEEEE;
float:left;
/*font-size: 0.7em;*/
word-wrap: break-word;
width: 190px;
text-align: left;
margin: 1px;
padding-left: 25px;
text-shadow: 0px 0px 3px #FFF;
}
.checkbox_group_span input[type=checkbox] {
float: right;
cursor: pointer;
background: #FFFFFF;
}
.even_row {
background-color: #ccc;
}
.odd_row {
background-color: #d5d5d5;
}
.direction_button {
background-color: #CCCCCC !important;
color:#444444 !important;
}
/* ------------------------------------------------------------ Extensions ------------------------------------------------ */
/* ------------------------------------------------------------ Extensions: Tablesorter ----------------------------------- */
table.tablesorter {
background-color:rgba(0,0,0,0.20);
font-family:arial, sans-serif;
font-size: 0.9em;
margin: 2px;
padding:1px;
table-layout: fixed;
text-align: left;
width: 100%;
}
table.tablesorter a {
/*color: #000077;
*/
font-weight:bold;
margin:5px;
text-shadow: 0px 0px 0px #FFFFFF;
}
table.tablesorter a:visited {
/*color: #992200;
*/
font-weight:bold;
}
table.tablesorter tbody td {
border-left:1px solid #AAAAAA;
border-top:1px solid #AAAAAA;
color: #000000;
padding: 3px;
background-color: #FFFFFF;
text-align: left;
vertical-align: top;
overflow: hidden;
width:100%;
}
table.tablesorter td {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
table.tablesorter td:hover {
overflow: visible;
}
table.tablesorter th {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
text-align: left;
}
table.tablesorter tbody tr.odd td {
background-color:#F0F0F6;
}
table.tablesorter thead tr th, table.tablesorter tfoot tr th {
color:#FFFFFF;
padding: 2px;
text-align:left;
}
table.tablesorter thead tr .header {
background-image: url(../../../core/javascript/jquery/tablesorter/bg.gif);
background-repeat: no-repeat;
background-position: center right;
cursor: pointer;
}
table.tablesorter thead .header {
text-align:left;
}
table.tablesorter thead tr .headerSortUp {
background-image: url(../../../core/javascript/jquery/tablesorter/asc.gif);
}
table.tablesorter thead tr .headerSortDown {
background-image: url(../../../core/javascript/jquery/tablesorter/desc.gif);
}
table.tablesorter thead tr .headerSortDown, table.tablesorter thead tr .headerSortUp {
background-color: #4267b2;
/*background: linear-gradient(to right, #4267b2, #759AE5);
*/
color: #FFFFFF;
}
.results {
width:50%;
}
/* ------------------------------------------------------------ Extensions: Autocomplete --------------------------------------- */
li.ui-menu-item {
font-size:0.85em !important;
}
/* ------------------------------------------------------------ Extensions: Blinkme --------------------------------------- */
.blink_me {
animation-name: blinker;
animation-duration: 1s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@keyframes blinker {
0% {
opacity: 1.0;
}
50% {
opacity: 0.0;
}
100% {
opacity: 1.0;
}
}
/* ------------------------------------------------------------ Extensions: Datepicker --------------------------------------- */
.ui-datepicker table {
background-color:#759AE5;
color:#FFFFFF;
}
/* ------------------------------------------------------------ Extensions: JQuery Validate Engine --------------------------------------- */
.formError .formErrorContent {
background-color:rgba(255,100,0,0.95);
border:1px solid;
font-size:0.85em;
font-weight:bold;
text-shadow: 0px 0px 2px #000000;
}
.formError .formErrorArrow div {
background-color:rgba(255,100,0,0.95);
font-size:0.85em;
font-weight:bold;
text-shadow: 0px 0px 2px #000000;
}
/* ------------------------------------------------------------ Extensions: Sortable -------------------------------------- */
#sortable {
list-style-type: none;
margin: 0;
padding: 0;
width: 750px;
}
#sortable li {
margin: 3px 3px 3px 0;
padding: 10px;
float: left;
width: 75px;
height: 75px;
font-size: 1em;
text-align: center;
background-color: #AAAAAA;
color:#000000;
vertical-align: middle;
font-weight:bold;
}
/* ------------------------------------------------------------ Extensions: Visualize --------------------------------------- */
.visualize .visualize-title {
color: #DA2028;
font-size:1em;
text-shadow: 0px 0px 5px #FFFFFF;
}
/* ------------------------------------------------------------ Extensions: BOM --------------------------------------- */
.bom_input {
float:right;
margin:0px;
padding:0px;
position: relative;
text-align:centear;
width:50px;
}
.bom_input[readonly] {
border:0px;
}
/* ------------------------------------------------------------ Footer ------------------------------------------------ */
.page_footer {
background-color:rgba(200, 200, 200, 1);
/* border-bottom-left-radius: 15px; */
/* border-bottom-right-radius: 15px; */
color: #000000;
line-height: 1em;
margin-top: 0px;
height: 32px; /* 18px */
font-size: 0.6em;
padding-top: 0px;
position: relative;
text-align: center;
width: 100%;
}
.page_footer a {
color:#000000;
}
.page_footer p {
color: #000000;
padding: 0px;
text-align: center;
width: 100%;
}
.w3c {
border:0;
width:88px;
height:31px;
}
.menu_link {
cursor: pointer;
display: none;
float: left;
}
.menu_icon {
height:35px;
}
.social {
border-radius: 0px;
}
.social_bookmark {
box-shadow: 0px 0px 2px #EEEEEE;
height:16px;
margin: 2px;
}
.social_bookmark:hover {
box-shadow: 0px 0px 5px #FFFFFF;
height:16px;
margin-top: 4px;
margin-bottom:0px;
}
.logo {
box-shadow: none;
}
h2 {
font-size: 1.2em;
padding-left: 0px;
}
.main-menu ul li {
text-align: left;
}
.over_header {
background-color:#000000;
background-color: rgb(32, 32, 32);
background-image: linear-gradient(to right, rgba(0,0,0,0) 50%, rgba(0,0,0,1)), linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), linear-gradient(to bottom, rgb(8, 8, 8), rgb(32, 32, 32));
background-size: 100% 100%, 10px 10px, 10px 10px, 10px 5px;
background-position: 0px 0px, 0px 0px, 5px 5px, 0px 0px;
margin:0px;
}
.logo_container {
display:none;
}
.menu_container {
display: none;
}
.menu_link {
display: inline;
}
.menu_link:hover ~ .menu_container, .menu_container:hover {
display: inline;
}
input[type=button] {
#reset-this-parent {
all: initial;
* {
all: unset;
}
}
}
input[type=submit] {
#reset-this-parent {
all: initial;
* {
all: unset;
}
}
}
button, input[type=button], input[type=submit] {
background-color:rgba(212,208,200,1);
border: 2px outset;
float: right;
height: 3em;
margin-top: 0.25em;
width: 11em;
font-size: 0.85em;
line-height: 2.5em;
}
.remove_button input[type=button] {
height: 0.5em;
}
button:hover, input[type=button]:hover, input[type=submit]:hover {
border: 2px inset;
cursor: pointer;
}
.quantity {
text-align: center;
width:50px;
}
.price, .line_total, .product_total, .delivery, .discount, .sub_total, .vat_rate, .vat, .total, .totals, .value, .exchange_gain_loss, .exchange_rate, .exchange_amount {
text-align: right;
width:75px;
}
.vat_rate {
width:75px;
}
.total {
font-weight: bold;
}
.vertical_label {
font-weight:bold;
text-align:right;
text-shadow:0px 0px 3px #FFFFFF;
}
.line_table td {
overflow:hidden;
}
.line_table {
font-size: 0.9em;
margin: 0px;
table-layout:fixed;
padding: 0px;
width: 100%;
/* was commnted out? min-width instead? */
}
.line_table tr, th, td {
font-weight: normal;
margin: 0px;
padding: 0px;
}
.line_table th {
/*border:2px inset;
*/
padding: 2px;
font-size: 0.75em;
/*text-shadow: 0px 0px 3px #000;
*/
}
.tablesorter tbody tr th {
background-color: #CCCCFF;
color: #000000;
padding-right: 3px;
}
.tablesorter tr.even th {
background-color: #EEEEFF;
color: #000000;
padding-right: 3px;
}
.tablesorter tr.odd th {
background-color: #CCCCFF;
color: #000000;
padding-right: 3px;
}
.line_table thead tr th:last-child {
border-top-right-radius: 5px;
}
input[type=hidden] {
height: 0px;
width: 0px;
}
.ui-datepicker-calendar a {
text-shadow: none;
}
/* ----------------------------------------------------- Colours & Customisation ------------------------------------------------- */
a {
text-decoration: none;
}
.menu {
background-color: #CCCCCC;
background-color:rgba(100,100,100,0.30);
}
.menu_footer {
color: #FFFFFF;
font-weight: bold;
text-shadow: 0px 0px 5px #000000;
}
.mail_count {
color:#FFFFFF;
text-shadow: 0px 0px 2px #ee7700;
}
#logo_container {
font-size: 0.7em;
font-weight: bold;
line-height: 1.3em;
}
.logo {
float:left;
color:#000000;
}
#info_container {
background-color:rgba(0,0,0,0.15);
color:#999999;
}
.menu_item a {
color:#CCCCCC;
text-decoration: none;
}
.menu_item span {
color: #000000;
}
.menu_item:hover {
background-color:rgba(255,100,0,0.65);
color:#FFFFFF;
}
.menu_item:hover a {
color: #FFFFFF;
}
.menu_item:hover span {
color: #CCCCCC;
}
.menu_item_selected {
color:#555577;
}
.menu_item_selected a {
color: #777777;
}
.menu_item_selected:hover {
background-color: transparent;
}
.menu_item_selected:hover a {
color:#777777;
}
.menu_toolbar {
background-color:rgba(200,200,200,0.60);
}
.group_title {
background-color:rgba(0,0,0,0.95);
color:#FFFFFF;
}
.group_title:hover {
background-color:rgba(255,100,0,0.95);
}
.group_title_selected {
background-color:rgba(255,100,0,0.95);
color:#FFFFFF;
text-shadow: 0px 0px 2px #000000;
}
.group_footer {
background-color:rgba(255,100,0,0.95);
}
.menu_group {
background-color:rgba(0,0,0,0.06);
}
.menu_group_contents_selected {
display:block;
}
.group_title:hover a {
color: #FFFFFF;
}
table {
}
label {
color:#111111;
}
legend {
margin-top:0px;
cursor: pointer;
}
input:disabled, select:disabled, textarea:disabled {
/*background-color:rgba(212,208,200,1);*/
/*background-color:rgba(212,208,200,1); */
background-color: #E1E1E1;
border: 1px solid #999;
color: #000000;
}
input[type=file]:disabled {
color:transparent;
}
/* ------------------------------------------ Tablesorter Elements -------------------------------- */
table.tablesorter a {
font-weight:bold;
}
table.tablesorter a:visited {
font-weight:bold;
}
table.tablesorter tr {
min-height: 20px;
}
table.tablesorter tbody tr:hover td {
background-color: #BBBBFF;
cursor: pointer;
}
/* ------------------------------------------ web2 Template Settings -------------------------------- */
.over_header {
background-color: #222222;
height: 35px;
width: 100%;
}
.page_header {
background: linear-gradient(#333333, #000000);
border-top: 1px outset #999999;
position: relative;
width: 100%;
}
.page_header_center {
margin: 0 auto;
position: relative;
bottom: 0px;
}
.under_header {
border-top: 1px ridge #444444;
background-color: #333333;
height: 20px;
}
.tagline {
color: #FFFFFF;
display: block;
float: left;
font-size:9px;
text-shadow: 1px 1px 3px #000000;
}
.footer {
font-size: 0.75em;
}
.close_app {
float: right;
text-shadow: 0 0 5px #FFFFFF;
margin-right: 6px;
margin-top: -1px;
margin-left: 5px;
padding: 0em;
width: 1.6em;
}
.window_control {
border-radius: 5px;
float: right;
margin-right: 0px;
margin-top: 3px;
margin-left: 0px;
padding: 0em;
width: 1.2em;
}
.window_control:hover {
cursor: pointer;
}
.close_app:hover {
cursor: pointer;
}
.window_icon {
float: left;
margin-right: 4px;
width: 20px;
}
.file_menu_item {
cursor: pointer;
}
#File__sub_menu {
left: 0px;
}
.file_menu_sub_menu {
background-color: #CCC;
border: 1px outset #CCC;
position:absolute;
top: 26px;
padding-top: 4px;
padding-bottom: 6px;
display:none;
z-index: 300;
}
.context_menu
{
background-color:rgba(0,0,0,1);
border: 1px outset #333;
font-size:0.7em;
width:200px;
}
.context_menu a
{
color:#FFF;
}
.file_menu_sub_menu ul {
list-style: none;
margin: 0px;
padding: 0px;
}
.file_menu_sub_menu li {
/*color: #000;*/
height: 30px;
line-height: 30px;
overflow: hidden;
padding-left: 8px;
padding-right: 4px;
text-overflow: ellipsis;
vertical-align: middle;
white-space: nowrap;
width: calc(100% - 16px);
}
.file_menu_sub_menu li .toolbar_icon {
vertical-align:middle;
}
.file_menu_disabled {
color:#999999;
opacity: 0.5;
}
.file_menu_sub_menu .file_menu_disabled:hover {
color:#999999;
background-color:#CCCCCC;
cursor: default;
}
.file_menu_sub_menu a {
/*color:#FFF;*/
}
.file_menu_sub_menu .spacer {
height:5px;
}
.file_menu_sub_menu .spacer:hover {
background-color: #CCCCCC;
}
.file_menu_sub_menu li:hover {
/*background-color: #F0F0F6;*/
background-color: #AA5522;
color: #000000;
cursor: pointer;
}
.file_icon_menu {
background-color:rgba(200, 200, 200, 1);
border: 1px inset;
width: calc(100% -2px);
height: 2.1em;
}
.file_icon_menu_item {
float: left;
text-align: center;
border: 1px outset #BBBBBB;
padding: 0.3em;
padding-left: 0.1em;
padding-right: 0.1em;
padding-top:0.7em;
font-size: 0.6em;
color: #000000;
/*height: 2.3em;*/
width: 40px;
}
.file_icon_menu_item:hover {
border: 1px inset #BBBBBB;
cursor: pointer;
}
.toolbar_icon {
width: 12px;
}
.account_data {
font-size: 0.7em;
padding-left: 4px;
}
.add_button {
height: 1em;
width: 1em;
}
/* -------------------------------------- Calendar ---------------------------------------------------- */
table.calendar {
border-left:1px solid #999;
min-height: 100%;
width:100%;
}
td.calendar-day {
min-height:14%;
font-size:0.5em;
position:relative;
}
html div.calendar-day {
height: 20%;
width: 14%;
}
td.calendar-day-np {
background:#eee;
min-height:20%;
}
html div.calendar-day-np {
height:20%;
}
td.calendar-day-head {
font-size:0.5em;
background:#ccc;
font-weight:bold;
text-align:center;
padding:0px;
border-bottom:1px solid #999;
border-top:1px solid #999;
border-right:1px solid #999;
}
div.day-number {
background:#7799DD;
padding:1px;
padding-top:0px;
padding-bottom:0px;
color:#fff;
font-weight:bold;
margin:-1px -1px 0 0;
width: 100%;
text-align: right;
}
/* shared */
td.calendar-day, td.calendar-day-np {
/*height: 100px;
*/
padding:1px;
border-bottom:1px solid #999;
border-right:1px solid #999;
}
.appointment {
background-color: #EEEEEE;
border: 1px inset ;
height: 35px;
width: calc(100% - 2px);
font-size: 1.1em;
line-height: 1.5em;
overflow: hidden;
text-overflow: ellipsis;
}
.appointment:hover {
background-color: #BBBBFF;
cursor:pointer;
}
/* NEW */
td.calendar-day-np {
background: #CCCCCC;
height: 52px;
width:14%;
}
td.calendar-day {
background: #FFFFFF;
height: 52px;
width: 14%;
}
.desktop_icon_link {
color: #000000;
float: left;
text-shadow: none;
width: 84px;
}
.slide-out-div {
border-top-left-radius: 15px;
border-bottom-left-radius: 15px;
padding: 5px;
height: 85%;
width: 422px;
max-width: 80%;
background: rgba(100, 100, 100, 0.5);
border: 1px ridge #333333;
z-index: 600;
}
.slide-out-div .handle {
background: rgba(150, 150, 150, 1);
background-position: 5px 5px;
background-size: 25px 25px;
border-top-left-radius: 15px;
border-bottom-left-radius: 15px;
cursor:pointer;
height: 90%;
opacity: 0.7;
margin-top: 15px;
width: 25px;
}
input[readonly].input_url {
background-color: #DDDDDD;
/*color: #0000FF;*/
/*font-weight: bold;*/
cursor: pointer;
}
input[readonly].input_url:hover {
background-color: #DDDDFF;
}
.result_icon {
height: 20px;
margin-left: calc(50% - 10px);
}
.line_table tr {
height: 10px;
}
.width_0 {
width:0px !important;
}
#page_footer {
display: block;
}
#page_footer_application {
display: none;
}
.map_overlay {
background-color: #000000;
position:relative;
width: 100%;
height:100%;
/* your iframe height */
top: -100%;
/* your iframe height */
margin-top:-100%;
/* your iframe height */
}
.parent_record_data {
font-size: 0.9em;
padding:5px;
}
.input[type=button]:disabled {
color: #CCCCCC;
}
.html_image {
margin: auto;
max-height:150px;
max-width:90%;
padding:0px;
margin-top:4px;
}
.html_image_div {
background-color:#FFFFFF;
text-align:center;
width:100%;
border-radius:15px;
border:1px ridge #CCCCCC;
}
.button_icon {
display:inline-block;
height:14px;
margin-right:4px;
vertical-align:middle;
}
.kpi {
background: linear-gradient(to top, #AAA, #AAA, #AAA);
color: #FFF;
font-size: 3em;
font-weight: bold;
line-height: 3em;
text-align: center;
text-shadow: 0px 0px 4px #000;
}
.List_Span {
display: block;
line-height: 2em;
margin: -3px;
padding-left: 3px;
vertical-align: top;
}
.List_Complete {
background-color: #AFA;
}
.List_Ready {
background-color: #ACA;
}
.List_In {
background-color: #FF0;
}
.List_Planned {
background-color: #F99;
}
.List_Accounting {
background-color: #d62f2f;
color: #000;
}
.List_Human_Resources {
background-color: #e542f4;
}
.List_Development {
background-color: #2f4dd6;
}
.List_Sales {
background-color: #26af21;
}
.List_Support {
background-color: #ccbd1c;
}
.List_Marketing {
background-color: #91701e;
}
.List_Executive {
background-color: #000;
color: #FFF;
}
.List_System_Building {
background-color: #AAF;
color: #000;
}
.List_Unpaid {
background-color: #F99;
color: #000;
}
.List_To_Invoice {
background-color: #FF0;
color: #000;
}
.List_Paid {
background-color: #9F9;
}
input[type=text] .highlight {
color: #0000FF;
}
.message_window {
display:none;
position:absolute;
left:10%;
top:10%;
border-style: solid;
border-width:1px;
background-color: #CCCCCC;
padding: 5px;
width:450px;
}
.calendar_key {
font-weight:bold;
width:100%;
}
fieldset {
min-width: 0;
}
.list_container {
display: inline-block;
/*overflow: hidden;
*/
overflow:scroll;
/*overflow: scroll;
*/
/*max-height: 650px;
*/
height: 100%;
/*width: calc(100% - 50px);
*/
/*background-color: #FF0000;
padding:10px;
*/
max-width: 100%;
width: 100%;
-webkit-overflow-scrolling: touch;
}
@supports (-webkit-overflow-scrolling: none) {
/* CSS specific to iOS devices */
.list_container {
height:250px;
position: fixed;
}
}
.list_table {
border-collapse: collapse;
width: auto;
min-width: 0;
-webkit-overflow-scrolling: touch;
/*display: table;
*/
}
.list_table th {
background-color: #999;
/* border: 1px ridge #999;
*/
border:2px inset;
color: #FFF;
font-size: 0.8em;
font-weight:bold;
padding: 4px;
text-shadow: 0px 0px 3px #000;
white-space: nowrap;
}
.list_table tr {
background-color: #FFFFFF;
}
.list_table tr:hover {
background-color: #AADDFF;
cursor:pointer;
}
.list_table td {
/*background-color: #FFFFFF;
*/
border: 1px ridge #999;
font-size: 0.9em;
/*overflow: hidden;
*/
padding: 4px;
white-space: nowrap;
}
.action_message .record_locked {
background-color: #FF0000;
}
.ajax_result:hover {
background-color: #0F0;
cursor:pointer;
}
.ajax_result {
background-color: #FFF;
}
.desktop_alert_container {
float: right;
height: 100%;
line-height: 36px;
margin-top: 0px;
margin-right: 0px;
}
.desktop_alert {
animation: blinker 1s linear infinite;
background-color: #F00;
border-radius: 15px;
color:#FFF;
float: right;
height: 80%;
line-height: 30px;
margin-top: 3px;
margin-right: 4px;
}
.desktop_alert:hover {
cursor:pointer;
}
.desktop_alert a {
color:#FFF;
}
@keyframes blinker {
50% {
opacity: 0;
}
}
#alert_count {
padding-left: 0.5em;
padding-right: 0.5em;
}
/*Now the CSS*/
.tree {
margin: 0;
padding: 0;
font-size: 20px!important;
}
.tree ul {
padding-top: 20px;
position: relative;
transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-webkit-padding-start: 0px;
}
.tree li {
float: left;
text-align: center;
list-style-type: none;
position: relative;
/*padding: 20px 5px 0 5px;
*/
transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
background-color:#FFF;
/*width: 100%;
*/
}
/*We will use ::before and ::after to draw the connectors*/
.tree li::before, .tree li::after{
content: '';
position: absolute;
top: 0;
right: 50%;
border-top: 2px solid #111;
width: 50%;
height: 20px;
}
.tree li::after{
right: auto;
left: 50%;
border-left: 2px solid #111;
}
/*We need to remove left-right connectors from elements without any siblings*/
.tree li:only-child::after, .tree li:only-child::before {
display: none;
}
/*Remove space from the top of single children*/
.tree li:only-child{
padding-top: 0;
}
/*Remove left connector from first child and right connector from last child*/
.tree li:first-child::before, .tree li:last-child::after{
border: 0 none;
}
/*Adding back the vertical connector to the last nodes*/
.tree li:last-child::before{
border-right: 2px solid #111;
border-radius: 0 5px 0 0;
-webkit-border-radius: 0 5px 0 0;
-moz-border-radius: 0 5px 0 0;
}
.tree li:first-child::after{
border-radius: 5px 0 0 0;
-webkit-border-radius: 5px 0 0 0;
-moz-border-radius: 5px 0 0 0;
}
/*Time to add downward connectors from parents*/
.tree ul ul::before{
content: '';
position: absolute;
top: 0;
left: 50%;
border-left: 2px solid #111;
width: 0;
height: 20px;
}
.tree li a{
padding: 5px 10px;
text-decoration: none;
color: #000;
font-family: arial, verdana, tahoma;
font-size: 16px;
display: inline-block;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
}
/*Time for some hover effects*/
/*We will apply the hover effect the the lineage of the element also*/
.tree li a:hover, .tree li a:hover+ul li a {
background: #77F;
color: #000;
}
/*Connector styles on hover*/
.tree li a:hover+ul li::after, .tree li a:hover+ul li::before, .tree li a:hover+ul::before, .tree li a:hover+ul ul::before{
border-color: #94a0b4;
}
.display_table {
border-collapse: collapse;
width:100%;
}
.display_table th {
border: 2px solid #000;
background-color:#EEE;
padding: 15px;
}
.display_table td {
border: 2px solid #000;
background-color:#FFF;
padding: 15px;
}
.display_table td:hover {
background-color: #CCF;
}
.youtube_div {
background-color: #000;
color:#FFF;
float:left;
font-size: 10px;
margin-left: 12px;
border: inset 1px #CCC;
padding:0px;
width:280px;
height:157px;
}
.youtube_iframe {
height: calc(100% - 24px);
margin-left: 12px;
margin-top: 12px;
width: calc(100% - 24px);
}
.ui-datepicker {
margin: 5px auto 0;
font-size: 62.5%;
/*right:0px;
top:0px;
position: absolute;
*/
/*-webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .5);
-moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .5);
*/
}
.ui-datepicker table {
background-color: #000;
}
.ui-widget-content {
background: none !important;
}
.ui-datepicker-header {
background: none !important;
background: #000 !important;
}
#user_menu:before {
content: ' ';
position: absolute;
width: 0;
height: 0;
right: 10px;
top: -22px;
border: 10px solid;
border-color: transparent #666 #666 transparent;
}
#user_menu:after {
content: ' ';
position: absolute;
width: 0;
height: 0;
right: 12px;
top: -18px;
border: 10px solid;
border-color: transparent #000 #000 transparent;
}
.user_menu_list li:hover {
background-color:#A52;
}
.kpi_stat {
display:block;
font-size:3em;
font-weight:bold;
line-height:10em;
text-align:center;
width:100%;
}
.side-menu {
font-size: 0.75em;
}
.side-menu ul {
list-style: none;
margin: 0;
padding: 0;
}
.side-menu li {
color:#000;
padding: 2px;
min-height: 20px;
vertical-align: middle;
line-height: 2em;
}
.side-menu li > ul:hover {
background-color: #FFF;
cursor: pointer;
}
.side-menu li:hover {
/*background-color: #CCF;
*/
/*background-image: linear-gradient(to right, #CCF , #EEF);
*/
/* background-image: linear-gradient(to right, #FA0 , #FD5); */
background-image: linear-gradient(to right, #FA0 , #FD5);
cursor: pointer;
}
#sidemenu::-webkit-scrollbar {
display: none;
}
/* Hide scrollbar for IE, Edge and Firefox */
#sidemenu {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
.side-menu > ul > li > ul > li:hover {
/*background-color: #CCF;
*/
/*background-image: linear-gradient(to right, #CCF , #EEF);
*/
/*background-image: linear-gradient(to right, #FA0 , #FD5);*/
cursor: pointer;
}
.side_menu_sub > .submenu_title
{
background-color: #CCC !important;
color: #333 !important;
font-size: 0.8em !important;
text-shadow: 0 0 2px #FFF !important;
background-image: none !important;
padding-left: 15px !important;
}
.side_menu_link {
background-color: #FFF;
color: #000;
text-decoration: none;
padding-left: 10px;
}
.side_menu_sub {
/* display: none;
*/
padding: 0;
margin: 0;
width: 100%;
}
.side_menu .sub_menu a {
background-color: #FFF;
border: 1px solid #F00;
}
.side-menu ul li ul .submenu {
padding: 0px;
}
/* 1st level menu */
/* 2nd level menu */
/* 3rd level menu*/
/*
.side-menu > ul > li > ul > .submenu > li > ul > li {
background-color: #FFF;
padding: 0px;
padding-left: 10px;
}
*/
.side-menu .side_menu_sub
{
padding-left: 0px;
padding-bottom: 3px;
border-bottom: 3px solid #EEE;
}
.side-menu .side_menu_sub .side_menu_sub
{
/* padding-left: 2px; */
}
.side-menu .side_menu_sub .side_menu_sub li
{
padding-left: 5px;
}
.side-menu ul li ul .submenu li {
background-color: #FFF;
padding: 0px;
/*padding-left: 15px;*/
}
.side-menu .submenu {
padding: 0px;
}
.side-menu .submenu_title {
color: #FFF;
/* background-color: #BBF;
*/
background-color: #BBB;
/*background-image: linear-gradient(to right, #99F , #DDF);
*/
background-image: linear-gradient(to right, #666 , #BBB);
border: 0px solid #000;
font-weight: bold;
min-height: 18px;
padding: 2px;
margin-bottom: 2px;
text-shadow: 0px 0px 3px #000;
line-height: 2em;
}
.side-menu ul li ul .submenu_title {
display:none;
color: #FFF;
/*background-color: #FFF;
*/
border: 0px solid #000;
font-weight: bold;
/*border-bottom-right-radius: 15px;
*/
border-bottom-left-radius: 15px;
min-height: 18px;
padding: 2px;
margin-bottom: 2px;
font-size:0.9em;
text-shadow: 0px 0px 3px #000;
}
.side-menu ul li ul li:hover {
/*background-color: #CCF; */
}
.side-menu .submenu_title:hover {
cursor: pointer;
}
.side-menu .sidemenu_icon {
float: left;
height: 16px;
margin-right: 8px;
padding: 2px;
}
.desktop_window {
/*box-shadow: 0px 0px 10px #666666;
border-radius: 15px;
*/
color: #FFF !important;
background-image: none;
/*background-color: #CCC;
*/
background: linear-gradient(to bottom, black 0px,black 25px,#000000 25px,#CCC 25px,#CCC 100%);
/* W3C */
/*border: 0px solid #FFF;
box-shadow: 0px 0px 3px #FFF;
*/
}
.window_loading {
display: none;
}
.ui-datepicker-prev {
}
.ui-autocomplete {
background-color: #CCC;
}
.ui-autocomplete li {
background-color: #CCC;
}
.select2-results__option
{
color: #000;
font-size: 0.85em;
padding: 0px;
}
.select2-results__option
{
font-size: 0.85em;
padding: 0px;
}
.select2-results__option--highlighted
{
}
.select2-container--default .select2-selection--single .select2-selection__rendered
{
color: #000;
}
.select2_span
{
color: #000;
display: block;
width: 100%;
}
.select2_span:hover
{
color: #FFF;
background-color:#007 !important;
}
/* KPI Dashboard */
.dashboard_panel
{
border:0px;
}
.dashboard_title_div
{
background:linear-gradient(to right, #007, #BBF);
color:#FFF;
font-weight:bold;
}
.dashboard_title_icon
{
filter: drop-shadow(0px 0px 2px #000);
float:left;
margin:0.5em;
position:absolute;
z-index:1000;
}
.dashboard_title
{
font-size:1.5em;
line-height:2.5em;
margin:0em;
margin-left:60px;
text-shadow: 2px 0px 0px #000;
}
.dashboard_heading_div
{
color:#227;
font-weight:bold;
padding-left:10px;
padding-top:10px;
}
.kpi
{
background: #FFF;
margin: 2%;
color:#0C0;
text-shadow: 0px 0px 4px #FFF;
font-size: 1.3em; /* 1.5 em */
font-weight:bold;
/* line-height:1.5em;
padding:0.25em; */
line-height: 1.0em;
padding: 0em;
}
.kpi_1
{
}
.kpi_2
{
}
.kpi_3
{
}
.kpi_4
{
}
.kpi_web_chart
{
max-height:250px;
text-align:center;
width:100%;
}
.chart_1
{
}
.chart_2
{
}
.chart_3
{
}
.kpi_label
{
color:#007;
font-size: 0.75em;
text-shadow: 0px 0px 4px #FFF;
}
.html_iframe
{
border:0px;height:calc(100% - 6px);
width:100%;
background-color:#000;
}
/* Calendar - Jquery UI */
.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight
{
border: 3px solid #f00 !important;
background: #fff 50% 50% repeat-x !important;
color: #ff2121 !important;
font-weight: bold !important;
}
/* ================ Fade In ===================== */
.fade-in {
animation: fadeIn ease 0.5s;
-webkit-animation: fadeIn ease 0.5s;
-moz-animation: fadeIn ease 0.5s;
-o-animation: fadeIn ease 0.5s;
-ms-animation: fadeIn ease 0.5s;
}
@keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
@-moz-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
@-webkit-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
@-o-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
@-ms-keyframes fadeIn {
0% {opacity:0;}
100% {opacity:1;}
}
/* ======================================== Start Screen Sizes ========================================== */
/* Screen <= 3840px (4K UHD) -------------------------------------------------- */
/* Screen <= 1920px (FHD Designed For by Default) ----------------------------- */
/* Screen <= 1600px (Laptop HD+) ---------------------------------------------- */
/* Screen <= 1366px (Laptop HD) ----------------------------------------------- */
/* Screen <= 1280px (Netbook) ------------------------------------------------- */
@media screen and (min-width: 1278px) { /* -2px border on iframe on desktop */
#sidemenu {
display:inline-block;
}
#app {
margin-left:220px;
width:calc(100% - 220px);
}
#file_menu {
/*margin-left:250px;*/
width:calc(100%/* - 258px*/);
}
#file_icon_menu {
/*margin-left:250px;*/
width:calc(100%/* - 250px*/);
}
#erp_dashboard_icons_div {
display:none;
}
}
@media screen and (max-width: 1277px) { /* -2px border on iframe on desktop */
#sidemenu {
display:none;
}
.button_spacer {
height: 0px;
width:0px;
}
}
/* Screen <= 1024px (Tablet) -------------------------------------------------- */
@media screen and (max-width: 1022px) { /* -2px border on iframe on desktop */
.search_google {
display:none;
}
}
/* Screen <= 640px (Phone) --------------------------------------------------- */
@media screen and (min-width: 638px) { /* -2px border on iframe on desktop */
/* Menu ---------------------------------*/
.main-menu li:hover > ul {
left: 100%;
position: relative;
top: -27px;
visibility: visible;
}
.file_menu_sub_menu {
width: 190px;
}
#Favorites__sub_menu {
left: 135px;
}
#Tools__sub_menu {
left: 205px;
}
#Help__sub_menu {
left: 260px;
}
}
@media screen and (max-width: 637px) { /* -2px border on iframe on desktop */
table.tablesorter
{
/*overflow: visible;
*/
table-layout: auto;
}
fieldset
{
/* width: 100%;
*/
}
fieldset div
{
/* overflow-x: scroll;
*/
width:100%;
}
.file_menu_sub_menu
{
left: 0px;
width: 100%;
}
#Favorites__sub_menu
{
left: 0px;
}
#Help__sub_menu
{
left: 0px;
}
.appointment_button {
width: 100%;
}
.appointments_container {
overflow-x: scroll;
}
.appointments_container tr {
font-size:8px !important;
}
#window_switcher {
display: none;
}
button, input[type=button], input[type=submit] {
float: left;
}
.application_cell {
width: 100% !important;
}
/* -------------------------------- MOBILE MENU ---------------------------------- */
/* ---------------------- Menu --------------------- */
.menu_overlay
{
width: 100%;
}
.menu_container
/* Menu Container */
{
background: #000;
background: rgba(0, 0, 0, 0.9);
width: 100%;
z-index: 500;
}
/* ------------ Menu Group Headings ---------------- */
.main-menu ul .submenu
/* App Sections */
{
background: #222;
clear: both;
display: block;
float: none;
height: 42px;
margin-bottom: 1px;
padding-top: 0px;
text-align: left;
width: 100%;
}
.main-menu ul > .submenu > a
/* App Sections Text */
{
height: 42px;
text-align: left;
line-height: 42px;
width: calc(100% - 50px);
}
.main-menu ul > .submenu > a:after
/* Remove Arrow After Module Headings */
{
content: '';
display: block;
clear: both;
}
.main-menu .submenu > .menu_icon
/* App Section Icons */
{
float: left;
height: 24px;
margin-left: -0.5em;
margin-top: 5px;
width: 24px;
}
/* ---------------------- Menu Items --------------------- */
.main-menu ul
/* Group Container */
{
box-shadow: none;
clear: both;
display: block;
overflow: visible;
position: relative;
z-index: 500;
width: calc(100% - 2px);
}
.main-menu li
/* Menu Items*/
{
background: none;
display: block;
height: 35px;
line-height: 35px;
margin: 0px;
overflow: visible;
padding-top: 0px;
text-align: left;
white-space: normal;
width: calc(100% - 50px);
}
.main-menu li a
/* App Icon Text */
{
float: left;
font-size: 1em;
height: 100%;
overflow: hidden;
padding: 0px;
padding-left: 0.5em;
}
.main-menu .menu_spacer_li
/* Spacer */
{
clear: both;
display: block;
height: 3px;
width: 100%;
}
.main-menu .menu_icon
/* App Icons */
{
clear: both;
float: left;
height: 16px;
padding: 0px;
padding-left: 1em;
padding-top: 7px;
position: relative;
width: 16px;
}
/* ------------ Submenu Groups (After Headings) ---------------- */
.main-menu > ul > .submenu > ul
/* Sub App Sections */
{
display: none;
}
}
/* Screen <= 320px (Watch) --------------------------------------------------- */
@media screen and (max-width: 637px) { /* -2px border on iframe on desktop */
/* Display the Sub-Menu */
/* On Screens with mobile menu */
.main-menu li ul {
visibility: visible;
}
}
/* Print --------------------------------------------------------------------- */
@media print {
/* All: Print uses own stylesheet */
* {
background: transparent !important;
color: black !important;
text-shadow: none !important;
filter:none !important;
-ms-filter: none !important;
}
/* Black prints faster: h5bp.com/s */
a, a:visited {
text-decoration: underline;
}
a[href]:after {
content: " (" attr(href) ")";
}
abbr[title]:after {
content: " (" attr(title) ")";
}
.ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after {
content: "";
}
/* Don't show links for images, or javascript/internal links */
pre, blockquote {
border: 1px solid #999;
page-break-inside: avoid;
}
thead {
display: table-header-group;
}
/* h5bp.com/t */
tr, img {
page-break-inside: avoid;
}
img {
max-width: 100% !important;
}
@page {
margin: 0.5cm;
}
p, h2, h3 {
orphans: 3;
widows: 3;
}
h2, h3 {
page-break-after: avoid;
}
}
/* ------------------------------------------------------------ Screen Sizes ------------------------------------------------ */
/* ======================================== End Screen Sizes ========================================== */
.ui-datepicker .ui-datepicker-prev
{
background-color:#777;
cursor: pointer;
}
.ui-datepicker .ui-datepicker-next
{
background-color:#777;
cursor: pointer;
}
.list_table td
{
line-height: 2.5em;
padding: 2px;
padding-left: 6px;
padding-right: 6px;
}
.list_table tr:nth-child(odd)
{
background-color: #EEE;
}
.list_table tr:nth-child(odd):hover
{
background-color: #AADDFF;
}
.list_table .cell_filled
{
border:0px solid #000;
margin-left:-6px;
margin-top: -2px;
margin-bottom: -4px;
height: calc(2.5em + 4px);
width: calc(100% + 8px);
padding-right: 4px;
padding-top: 2px;
}