﻿ul
{
   padding-left:0px;
}

.row {
   margin-top: 0.5em;
   margin-bottom: 0.5em;
   margin-left:0px;
   margin-right:0px;
}

.row.no-top {
   margin-top: 0;
}

.row.no-bottom {
   margin-bottom: 0;
}

.modal-background
{
   background-color: Gray;
   -ms-filter:"alpha(Opacity=70)";
   filter: alpha(opacity=70);
   opacity: .7;
}

.modal-popup-container {
   background-color: #fff;
   padding: 0.5em;
   width: 80%;
   height: 80%;
}

.modal-popup-container.has-updatepanel > div:first-child {
   position: absolute;
   top: 1em;
   left: 1em;
   right: 1em;
   bottom: 50px;
}

.modal-popup-container.has-updatepanel.no-padding > div:first-child {
    top: 0;
    left: 0;
    right: 0;
}

.modal-popup-content {
   position: absolute;
   top: 26px;
   left: 10px;
   right: 10px;
   bottom: 20px;
}

.modal-popup-closebutton {
   width: 16px;
   height: 16px;
   position: absolute;
   right: 0.5em;
   top: 0.5em;
   background: url("images/cross.png") no-repeat top left;
}

.modal-popup-closebutton:hover { 
   cursor: pointer; 
}

.modal-popup-container-light {
   background-color: #eee;
}

.modal-popup-iframe {
   border: none;
   width: 100%; 
   height: 100%;
}

.modal-popup-buttons {
   text-align: center;
   position: absolute;
   bottom: 0;
   left: 0;
   height: 50px;
   line-height: 50px;
   width: 100%;
}

.modal-popup-container .input-small {
   width: 100px;
}

.modal-popup-container .input-medium {
   width: 200px;
}

.modal-popup-container .input-large {
   width: 300px;
}

.modal-popup-container-dynamic {
   background-color: #F7F7F7;
   padding: 0.5em;
}

.static-frame.no-top {
   margin-top: 0;
}
   
.static-frame {
   border-bottom: 1px solid #DEDEDE;
   border-left: 1px solid #DEDEDE;
   border-right: 1px solid #DEDEDE;
   background-color: #F7F7F7;
   padding: 1em;
   margin-top: 1em;
   margin-bottom:25px;
}

.static-frame-full {
   border: 1px solid #DEDEDE;
   background-color: #F7F7F7;
   padding: 1em;
   margin-top: 1em;
   margin-bottom: 25px;
}

.static-frame hr {
   background-color: #DEDEDE;
   height: 1px;
   margin: 1em 0;
   border: 0;
}

.invisible {
   visibility: hidden;
}

.hidden {
   display: none;
}

.spacer {
   margin-left: 50px;
}

.succeeded,
.highlight-success, 
.failed, 
.highlight-failure,
.info,
.highlight-info {
   padding: 1.0em;
   display: block;
   font-weight:bold;
   font-size:16px;
}

.succeeded, 
.highlight-success {
   border: solid 1px #00AA00;
   background-color: #E0F8E0;
}

.failed, 
.highlight-failure {
   border: solid 1px #AA0000;
   background-color: #F8E0E0;
}

.info,
.highlight-info {
   border: solid 1px #A68E00;
   background-color: #F6F59C;
}

.highlight-active {
   font-weight: bold;
}

.highlight-inactive {
   background-color: #eee;
   color: #555;
}

.highlight-italic {
   font-style:italic;
}

.highlight-default {
   font-weight: bold;
}

.highlight-good {
   color: green;
}

.highlight-warning {
   color: #E67300;
}

.highlight-bad {
   color: red;
}

/*
   Headings 
*/

h1.v2 { font-size: 22px; }
h2.v2 { font-size: 18px; }
h3.v2 { font-size: 14px; }

h1.v2, 
h2.v2, 
h3.v2 {
   color: #333;
   margin-bottom: 0.25em;
}

h1.v2.border,
h2.v2.border,
h3.v2.border {
   border-bottom: 1px solid #bbb;
   padding-bottom: 0.25em;   
}

h1.v2.margin,
h2.v2.margin,
h3.v2.margin {
   margin: 0.5em 0;
}

h1.centered, 
h2.centered,
h3.centered {
   text-align: center;
}

.left-align {
   text-align: left !important;
}

/*
   main Jobg8 table 
*/
table.jobg8 {
   background-color: white;
   border: solid 1px #dbdbdb;
   border-collapse: collapse;
   border-spacing: 0px;
   font-size: 0.9em;
}

table.jobg8 > thead > tr > th,
table.jobg8 > tbody > tr > th {
   font-weight: bold;
   background-color: #DEDFDE;
   color: #404040;
   padding: 4px 8px;
   border-bottom: solid 1px #dbdbdb;
}

table.jobg8 > thead > tr > th a,
table.jobg8 > tbody > tr > th a {
   text-decoration: none;
   color: #404040;
}

table.jobg8 > tbody > tr > td a {
   text-decoration: none;
}

table.jobg8 > thead > tr > th a:hover,
table.jobg8 > tbody > tr > th a:hover, 
table.jobg8 > tbody > tr > td a:hover {
   text-decoration: underline;
}

table.jobg8 > tbody > tr > td .title {
   font-weight: bold;
   font-size: 1.3em;
}

table.jobg8 > tbody > tr > td {
    border: solid 1px #CECFCE;
    border-left: 0; 
    border-right: 0;
    padding: 4px 8px;
}

#wrap {
   overflow: auto;
   height: calc(100vh - 195px);
   min-height: 300px;
   display: inline-block;
   max-width: calc(100vw - 40px);
}

#reportBody {
   margin-bottom: 0px!important;
}
/*
   main Jobg8 form
*/
.jobg8-form {
   margin-top: 15px;
}

.jobg8-form > table {
   margin-top: 0.5em;
}

.jobg8-form.nomargin,
.jobg8-form.no-margin { 
   margin-top: 0px;
}

.jobg8-form .title, 
.jobg8-form .subtitle {
   font-weight: bold;
   margin-bottom: 10px;
}

.jobg8-form .subtitle {
   font-size: 18px;
}

.jobg8-form .title {
   font-size: 19px;
}

.jobg8-form td {
   padding: 3px;
}

.jobg8-form td.left {
   width: 250px;
   text-align: right;
   margin-right: 5px;
}

.jobg8-form textarea { 
   width: 254px;
}

.jobg8-form input,
.jobg8-form textarea, 
.jobg8-form select {
   padding: 2px;
}

.jobg8-form input[type="checkbox"], 
.jobg8-form input[type="radio"],
.jobg8-form input[type="submit"] {
   width: auto;
}

.jobg8-form input[type="radio"],
.jobg8-form input[type="checkbox"] {
   margin-right: 5px;
}

.jobg8-form input[type="submit"] {
   padding: 2px;
   margin-right: 10px;
   float: left;
}

.jobg8-form td.right {
   width: 275px;
   text-align: left;
}

.jobg8-form td.right.freeform select {
   width: auto;
}

.jobg8-form select {
   width: 270px;
}

.jobg8-form td.right input[type="text"],
.jobg8-form td.right input[type="password"],
.jobg8-form td.right input[type="select"],
.jobg8-form td.right textarea 
{
   width: 270px;
}

.jobg8-form td.right.small input, 
.jobg8-form td.right.small textarea {
   width: 150px;
}

.jobg8-form td.right.smaller input,
.jobg8-form td.right.smaller textarea {
   width: 100px;
}

.jobg8-form ul {
   list-style-type: none;
}

.jobg8-form ul,
.jobg8-form li {
   margin: 8px auto !important;
}

.jobg8-form ul li ul li {
   margin-left: 15px;
}

.jobg8-form table table input {
   width: 120px !important;
}

.jobg8-form .ajax__calendar td { 
   padding: 0px !important; 
}

.jobg8-form .required-input:after {
   content: "*";
   color: red;
}

.min-width-1 { min-width:  50px; }
.min-width-2 { min-width: 100px; }
.min-width-3 { min-width: 150px; }
.min-width-4 { min-width: 200px; }
.min-width-5 { min-width: 250px; }
.min-width-6 { min-width: 300px; }

.width-1 { width:  50px; }
.width-2 { width: 100px; }
.width-3 { width: 150px; }
.width-4 { width: 200px; }
.width-5 { width: 250px; }
.width-6 { width: 300px; }

/*
   search engine
*/
.search-engine-select-style input[type="image"].selected {
   border: 3px dashed #f00 !important;
}

.search-engine-select-style input[type="image"] {
   border: 3px dashed transparent !important;
}

/* 
   misc
*/
.required-asterisk {
   color: red;
}

.full-width {
   width: 100%;
}

.twothirds-width {
   width: 66%;
}

.full-width td {
}

.error2 {
   color: red;
}

.hover-tooltip {
   cursor: default;
   border-bottom: 1px dashed #555;
}

.call-attention { 
   color: red; 
}

.input-help
{
   color:Gray;
   font-style:italic;
}

/* 
   email template editor page 
*/

.email-template-editor {
   overflow: hidden;
   margin-bottom: 1em; /* equalish margins all round */
}

.email-template-editor * {
-webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
        box-sizing: border-box;
}

.email-template-editor > .editor-email {
   float: left;
   width: 65%;
   padding-right: 1em;
   border-right: 1px solid #ddd;
}

.email-template-editor > .editor-email textarea {
   resize: vertical;
}

.email-template-editor > .editor-options {
   float: right;
   width: 35%;
   padding-left: 1em;
}

.email-template-editor .field-label {
   float: left;
   padding-right: 0.5em;
}

.email-template-editor .field-input {
   overflow: hidden;   /* create a new block formatting context */
}

.email-template-editor .field-input input[type="text"],
.email-template-editor .options-input input[type="text"] {
  width: 100%;
}

.email-template-editor .field-button {
   float: right;
   padding-left: 0.5em;
}

.email-template-editor .input-error {
   text-align: left;
}

/* spacing between elements */
.email-template-editor .section-option,
.email-template-editor .options-buttons,
.email-template-editor .options-input,
.email-template-editor .email-field,
.email-template-editor .section-title {
   margin: 1em 0;
}

.email-template-editor .options-buttons {
   text-align: center;
}

.email-template-editor .options-buttons input,
.email-template-editor .options-input input[type="button"] {
   display: inline-block;
}

.email-template-editor .section-title {   
   border-bottom: 1px solid #ddd;
}

.email-template-editor .section-title .title {
   font-weight: bold;
}

.email-template-editor .option-placeholder {
   float: left;
   padding: 0.25em;
   margin: 0.25em;
   border: 1px solid #bbb;
   background-color: #efefef;
}

.email-template-editor .option-placeholder .placeholder-add:hover {
   background-image: url("images/plus-invert.png");
}

.email-template-editor .option-placeholder .placeholder-add {
   width: 16px;
   height: 16px;
   float: left;
   margin-right: 0.25em;
   background-image: url("images/plus.png");
}

.email-template-editor .option-placeholder .placeholder-add:hover .placeholder-add-popup {
   display: block;
   background-color: #fff;
   border: 1px solid #bbb;
   z-index: 100;
   position: relative;
   width: 150px;
   right: 100px;
   box-shadow: 0 0 10px #888;
  
   /* fade-in effect */
   opacity: 1;
   height: auto;
   -webkit-transition: opacity 0.15s linear;
   -moz-transition: opacity 0.15s linear;
   transition: opacity 0.15s linear;
}

.email-template-editor .option-placeholder .placeholder-add-popup {
   opacity: 0; 
   height: 0;
   overflow: hidden;
   
   /* fade-in effect */
   -webkit-transition: opacity 0.15s linear;
   -moz-transition: opacity 0.15s linear;
   transition: opacity 0.15s linear;    
}

.email-template-editor .option-placeholder .placeholder-add-subject a,
.email-template-editor .option-placeholder .placeholder-add-body a {
   display: block;
   cursor: pointer;
   padding: 0.5em;
}

.email-template-editor .option-placeholder .placeholder-add-subject a:hover,
.email-template-editor .option-placeholder .placeholder-add-body a:hover {
   background-color: #eee;
   color: #333;
}

.email-template-editor .option-placeholder .placeholder-name {
   float: left;
}

table .action-buttons input[type=image],
table .action-buttons .popup-control {
   margin-left: 0.25em;
}

.email-preview {
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   top: 0;
}

.email-preview .email-headers {
   margin-bottom: 10px;
   border-bottom: 1px solid #aaa;
   height: 50px;
   width: 100%;
}

.email-preview .email-body {
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   top: 50px;
}

.clearfix {
   *zoom: 1;
}

.clearfix:before,
.clearfix:after {
   display: table;
   line-height: 0;
   content: "";
}

.clearfix:after {
   clear: both;
}

input[type="checkbox"] {
   margin-right: 5px;
}

/* 
   dashboard reports
*/
.dashboard-report {
   float: left;
   margin: 0.5em;
   border: 1px solid #CECFCE;
   font-size: 0.9em;
   list-style-type: none;
}

.dashboard-report-header {
   text-align: center;
   background-color: white;
   position: relative;
}

.dashboard-report-header-separator {
   height: 1px;
   background-color: #CECFCE;
   margin: 0 0.5em;
}

.dashboard-report-header-title {
   color: #404040;
   padding: 0 1em;
   line-height: 32px;
   height: 32px;
   font-weight: bold;
}

.dashboard-report-header-title.has-closebutton {
   margin-right: 24px;
}

.draggable .dashboard-report-header-title:hover {
   cursor: move;
}

.dashboard-report-header-close a {
   width: 24px;
   height: 24px;
   background: url("images/cross-dark.png") 4px 4px no-repeat;
   position: absolute;
   top: 4px;
   right: 4px;
   display: block;
}

.dashboard-report-header-close:hover {
   cursor: pointer;
}

.dashboard-report-content {
   text-align: center;   
   background-color: #fff;
   padding: 1em;
}

.dashboard-report-content-loader {
   width: 406px;
   height: 227px;
   background: url(images/ajax-loader.gif) center center no-repeat #fff;
}

.dashboard-toolbar-invoiceaccount {
   width: 55%;
   float: left;
}

.dashboard-toolbar-addreport {
   float: right;
}

.wallboard-report-header-title {
   font-size:18px;
   font-weight: bold;
   padding: 0 1em;
   line-height: 32px;
   height: 32px;
}

/*
   signup form
*/
.signup-form
{
   padding-bottom:20px;
}

.signup-form p {
   margin-top: 1em;
   margin-bottom: 1em;
}

.signup-form table.overview a {
   text-decoration: none;
}

.signup-form table.overview td {
   padding: 3px;
}

/* 
   multi-column layout 
*/
.multi-column-layout { }
.multi-column-layout-column {
   float: left;
   margin-right: 1em;
}

/* 
   a "search + results + selected items" layout
*/
.item-selection-results, 
.item-selection-selected {
   width: 400px;
   height: 200px;
   background-color: #fff;
   overflow-x: auto;
   border-bottom: 1px solid #DEDEDE;
}

.item-selection-results-row,
.item-selection-results-row *,
.item-selection-selected-row,
.item-selection-selected-row * {
   cursor: pointer;
   -moz-user-select: none; 
   -khtml-user-select: none; 
   -webkit-user-select: none; 
   -o-user-select: none;    
}

.item-selection-results-row,
.item-selection-selected-row {
   border-bottom: 1px solid #eee;
   line-height: 2em;
   padding-left: 0.5em;
}

.item-selection-results-row:hover,
.item-selection-selected-row:hover {
   background-color: #eee;
}

.item-selection-results-row i,
.item-selection-selected-row i {
   float: right;
   line-height: 2em;
   padding-right: 0.5em;
   display: inline-block;
}

.item-selection-selected-row i { color: #900; }
.item-selection-results-row i { color: #090; }

.item-selection-search-controls input[type=text] { width: 155px; }
.item-selection-search-controls input[type=submit] { width: 70px; }
.item-selection-search-controls .error-message { color: red; }

.item-selection-results-controls { text-align: center; }

/*
   style each row as though it can be clicked
*/
.table-row-select tr:hover {
   background-color: #eee;
   cursor: pointer;
}

.table-row-select tr.selected {
   background-color: #efe;
}

/*
   disallow text selections within jstree trees
*/
.jstree * {
   -moz-user-select: none;
   -khtml-user-select: none;
   -webkit-user-select: none;
   -o-user-select: none;
}

/* 
   Block UI 
*/

/* styles for a message */
.block-ui-popup-message {
   /* NOTE: THESE STYLES ARE UNFINISHED */
   font-size: 30px;
   color: #333;
   display: none;
   padding: 0.5em;
   /* NOTE: THESE STYLES ARE UNFINISHED */
}

/* styles for the loading gif */
.block-ui-popup-loader {
   width: 100px;
   height: 100px;
   left: 50%;
   top: 50%;
   margin-left: -50px;
   margin-top: -50px;
   background-color: #eee;
   border-radius: 1em;
}

.block-ui-popup-loader img {
   position: absolute;
   margin: auto;
   top: 0; 
   left: 0; 
   bottom: 0; 
   right: 0;
}

.popup-control-open-link {
   vertical-align: baseline;
}

input[type=file]
{
   display: inline;
}

.grouped-column-left {
   padding-right: 4px !important;
}

.grouped-column-right {
   padding-left: 0px !important;
}

.grayed-value {
   color: #D0D0D0 !important;
}