@charset "utf-8";
/*****************
* @this - Styles for objects found throughout the whole site.
* @mobile.css - Must be defined first, styles to use for mobile devices
* @480_960.css - Overwrites styles from mobile for display on larger devices
* @960.css - Overwrites styles from mobile.css and 480_960.css for large displays
*****************/

/* CSS Document */

html, body {
  font-family: 'Lato', sans-serif;
  font-size: 100%;
}

h1 {
  margin: 10px 0;
  line-height: 1.3em;
}

h3 {
  color: #900;
}

p {
  margin: 5px 0;
  line-height: 1.2em;
}

a, a:visited {
  color: #0066C0;  
}

a:hover {
  color: #900;
  cursor: pointer;
}

a.navigation {
  text-decoration: underline;
}

legend {
  font-weight: bold;
}

input:not([type='file']), select, option, textarea {
  background-color: #FFFFF8;
  border-radius: 5px;
}

select {
  height: 35px;
}

input:not([type='color']):not([type='file']):not(.mce-textbox), textarea {
  padding: 8px;
  box-shadow: inset 0 1px 3px #DDD;
}

input:not([type='color']):not([type='file']):focus,
select:focus,
textarea:focus {
  outline-width: 0;
}

option {
  padding: 2px 8px;
}

.alignRight {
  text-align: right;
}

.alignCenter {
  text-align: center;
}

.vtop {
  vertical-align: top;
}

.bold {
  font-weight: bold;
}

.redTxt {
  color: #900;
}

.hidden {
  display: none;
}

.flexContainer {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.flexRow {
  flex-direction: row;
}

.flexCol {
  flex-direction: column;
}

.flexWrap {
  flex-wrap: wrap;
}

#unipak-logo {
  max-width: 350px;
  width: 100%;
}

#currentCompany {
  position: absolute;
  top: 10px;
  right: 10px;
}

#leftSaleColumn {
  min-width: 500px;
}

.input_lbl {
  font-weight: bold;
  margin-bottom: 5px;
}

img.ui-datepicker-trigger {
  float: left;
}

img.ui-datepicker-trigger:hover {
  cursor: pointer;
}

.input_lbl,
.input_add_opt,
.form_input {
  float: left;
}

.input_add_opt {
  font-size: smaller;
  margin-left: 30px;
  margin-top: 5px;
}

input.hasDatepicker {
  float: left;
  width: 115px;
  margin-right: 10px;
}

.helpertxt {
  font-size: smaller;
  font-style: italic;
}


/* Message Container */
.error_message_container {
  background-color: #ffd4d4;
  border: solid 2px #D00;
  padding: 10px;
  margin: 10px;
}
.error_title {
  color: #D00;
  font-weight: bold;
}

.message_container {
  background-color: #fff6d4;
  border: solid 2px #b7ab8d;
  padding: 10px;
  margin: 10px;
}

.green-btn:hover,
.red-btn:hover,
.grey-btn:hover,
.yellow-btn:hover {
  cursor: pointer;
}

a.green-btn,
a.green-btn:hover,
a.green-btn:visited,
a.red-btn,
a.red-btn:hover,
a.red-btn:visited,
a.grey-btn,
a.grey-btn:hover,
a.grey-btn:visited,
a.yellow-btn,
a.yellow-btn:hover,
a.yellow-btn:visited {
  color: #FFF;
  text-decoration: none;
}

.green-btn {
  box-shadow: inset 0 1px 3px #DDD;
  border-radius: 5px;
  border: solid 2px;
  padding: 12px;
  font-weight: bold;
  color: #FFF;

  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#38c910+0,299a0b+100 */
  background: rgb(56,201,16); /* Old browsers */
  background: -moz-linear-gradient(top, rgba(56,201,16,1) 0%, rgba(41,154,11,1) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top, rgba(56,201,16,1) 0%,rgba(41,154,11,1) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, rgba(56,201,16,1) 0%,rgba(41,154,11,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#38c910', endColorstr='#299a0b',GradientType=0 ); /* IE6-9 */
}

.red-btn {
  box-shadow: inset 0 1px 3px #DDD;
  border-radius: 5px;
  border: solid 2px;
  padding: 12px;
  font-weight: bold;
  color: #FFF;

  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ff1414+0,a30d0d+100 */
  background: #ff1414; /* Old browsers */
  background: -moz-linear-gradient(top,  #ff1414 0%, #a30d0d 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top,  #ff1414 0%,#a30d0d 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom,  #ff1414 0%,#a30d0d 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff1414', endColorstr='#a30d0d',GradientType=0 ); /* IE6-9 */

}

.grey-btn {
  box-shadow: inset 0 1px 3px #DDD;
  border-radius: 5px;
  border: solid 2px;
  padding: 12px;
  font-weight: bold;
  color: #FFF;

  background: #969696; /* Old browsers */
  background: -moz-linear-gradient(top,  #969696 0%, #787878 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top,  #969696 0%,#787878 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom,  #969696 0%,#787878 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#969696', endColorstr='#787878',GradientType=0 ); /* IE6-9 */

}

.yellow-btn {
  box-shadow: inset 0 1px 3px #DDD;
  border-radius: 5px;
  border: solid 2px;
  padding: 12px;
  font-weight: bold;
  color: #FFF;
  background: #fcaf35; /* Old browsers */
}


/* Tablesorter Styles */
/**********************/

table.tablesorter {
  font-family:arial;
  background-color: #CDCDCD;
  margin:10px 0px 5px;
  font-size: 8pt;
  width: 100%;
  text-align: left;
}

table.tablesorter a {
  text-decoration: none;  
}

table.tablesorter thead tr th, table.tablesorter tfoot tr th {
  background-color: #e6EEEE;
  border: 1px solid #FFF;
  font-size: 8pt;
  color: #000;
  padding: 4px 10px 4px 4px;
}
table.tablesorter thead tr .header {
  background-image: url('../images/asc_desc.gif');
  background-repeat: no-repeat;
  background-position: center right;
  cursor: pointer;
  padding-right: 18px;
}
table.tablesorter tbody tr {
  background-color: #FFF;
}
table.tablesorter tbody tr.odd {
  background-color:#F0F0F6;
}
table.tablesorter tbody tr.odd.error {
  background-color:#e9d0d0;
}
table.tablesorter tbody tr.even.error {
  background-color:#f7e6e6;
}
table.tablesorter tbody tr.odd.error:hover,
table.tablesorter tbody tr.even.error:hover,
table.tablesorter tbody tr:hover {
  background-color:#FFC;
}
table.tablesorter tbody tr.highlight {
  background-color:#FFDADA;
}
table.tablesorter tbody tr td.highlight {
  background-color:#FFDADA;
}
table.tablesorter tbody td {
  padding: 4px;
  vertical-align: top;
}
table.tablesorter thead tr .headerSortUp {
  background-image: url('../images/asc.gif');
}
table.tablesorter thead tr .headerSortDown {
  background-image: url('../images/desc.gif');
}
table.tablesorter thead tr .headerSortDown, table.tablesorter thead tr .headerSortUp {
  background-color: #8dbdd8;
}

/***** USER DISPLAY STYLES *****/
#user_header {
  width: 100%;
  height: 80px;
  background-color: #69C;
  background-image: url("../images/white-trans-gradient.png");
  background-repeat: repeat-x;
  background-position: top;
}

#user_header_padding {
  padding: 5px 10px;
}

#user_body_container {
  width: 100%;
}

#user_content {
  float: left;
  padding: 10px 20px;
  width: calc(100% - 240px); /* (200 for left menu, 40 for left and right padding) */
  height: calc(100% - 100px); /* (80 for header, 20 for top and bottom padding) */
  overflow: auto;
}

/* Menu */
#menu_container {
  width: 200px;
  height: calc(100% - 80px); /* minus #user_header height */
  float: left;
  background: #E1E1E1;
}

#menu_container ul {
  float: left;
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 100%;
}

#menu_container li {
  border-bottom: dashed 1px #333;
}

#menu_container li a {
  display: block;
  color: #000;
  padding: 10px 16px;
  text-decoration: none;
}

#menu_container li a:hover {
  background-color: #555;
  color: #FFF;
}

#mobile_menu_toggle {
  display: none;
}

.nav_menu_header  {
  float: left;
  width: 100%;
  font-weight: bold;
  font-size: larger;
  margin-top: 20px;
  margin-left: 10px;
}

/* Add New Sale */
#frm-new_sale-new_group {
  float: left;
  padding-right: 20px;
  margin-right: 20px;
  border-right: solid #ccc 1px;
}

#frm-new_sale-existing_group {
  float: left;
}

#frm-select_org {
  min-width: 300px;
  height: 100px;
  padding: 0px;
}

#frm-select_org option {
  border-radius: 0px;
}

.brochure-list-image,
.prize-list-image {
  float: left;
  width: 400px;
  height: 238px;
  margin-right: 30px;
  margin-bottom: 30px;
  border: solid 3px #FFFFFF;
}

.brochure-list-image.selected,
.prize-list-image.selected {
  background-color: #FFFCDD;
  border: solid 3px #FFF9BC;
}

.brochure-list-image img {
  width: 175px;
}

.select-profit_structure {
  max-width: 175px;
}

/******************
* Addresses
******************/
.address_block {
  float: left;
  min-width: 200px;
  margin-right: 10px;
  margin-bottom: 10px;
  border: solid 1px #CCC;
  padding: 3px 5px;
}

.address_block .address-header {
  font-weight: bold;
}

.address_block .address-body,
.address_block .address-select {
  font-size: smaller;
}

.address_block .address-select {
  margin-top: 10px;
}

/******************
* Sale Display Page
******************/
#completedSaleInformation {
  background: rgb(253, 254, 255);
  background: linear-gradient(0deg, rgba(239, 242, 255, 1) 0%, rgba(253, 254, 255, 1) 100%);
  padding: 10px;
  margin-bottom: 20px;
  flex-flow: wrap;
}

#completedSaleInformation legend {
  color: #090;
}

#completedSaleInformation a {
  text-decoration: none;
}

#sellerPage_items_totals {
  float: right;
}

#leftSaleColumn, .leftSellerCol {
  width: 600px;
}

.rightSellerCol {
  max-width: 500px;
}

.box_header {
  float: left;
  width: 100%;
  padding: 5px;
  background-color: #f9e027;
  margin-top: 10px;
  margin-bottom: 10px;
}

.saleStatus_running {
  color: #090;
  font-weight: bold;
}

.saleStatus_received, .saleStatus_complete {
  color: #900;
  font-weight: bold;
}

/******************
* Ticket Styles
******************/

.container-ticketMetaInfo {
  float: right;
  margin-left: 20px;
  min-width: 300px;
  display: flex;
  flex-direction: row;
  gap: 20px;
  align-items: start;
}
.container-ticketMetaInfo td {
  font-size: 14px;
}
.ticketResponseContainer {
  width: 600px;
}
.ticket-description-area {
  width: 588px;
  height: 350px;
  background-color: #fbf9f5;
  border: 1px solid;
  padding: 5px;
  border-radius: 5px;
  overflow-y: auto;
}
.ticketOpen {
  color: #090;
}
.ticketMedium, .ticketOnHold {
  color: #BB6;
}
.ticketHigh, .ticketClosed {
  color: #F00;
}
.ticketCritical {
  color: #900;
}
.hrStyle {
  border: 0;
  height: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  margin-bottom:10px;
}

.ticketMenuItem {
  float: left;
  margin-right: 20px;
}

.ticketMenuItem.selected {
  color: #900;
}

.ticket-suggestion-list {
    position: absolute;
    border: 1px solid #ccc;
    background: #fff;
    z-index: 1000;
    max-height: 150px;
    overflow-y: auto;
    display: none;
}
.ticket-suggestion-item {
    padding: 5px;
    cursor: pointer;
}
.ticket-suggestion-item:hover {
    background-color: #f0f0f0;
}

.ticket-suggestion-item.highlighted {
    background-color: #007BFF;
    color: white;
}

mention {
  color: #3d3dff;
}

#matrixMenuTicketCount {
  color: #900;
}

#tickets-header {
  flex-direction: row;
}

#ticket_container,
#frm_addTicket_container {
  min-width: 600px;
  max-width: 900px;
}

#ticketActivities {
  display: flex;
  flex-direction: column;
  width: 100%;
}

#ticketActivities .ticketActivity {
  display: flex;
  gap: 20px;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

#ticketActivities .ticketActivity.odd {
  background-color: #f7f3e9;
}

#ticketActivities .ticketActivity.system {
  justify-content: center;
  background-color: #eaf4fc;
}

#ticketActivities .container-entryMeta {
  font-size: small;
  padding: 10px;
  background-color: rgba(225, 225, 225, 0.2);
  min-width: 150px;
}

#ticketActivities .activityDescription {
  padding: 10px;
  overflow-x: auto;
}

#ticketActivities .entryMeta-name {
  font-weight: bold;
}

#ticketActivities .entryMeta-attachments {
  margin-top: 10px;  
}

#frm_addTicket_container #salefiles {
  max-width: 400px;
}

.ticketTable,
#tblTickets {
  font-size: medium;
}

.ticketTable td,
#tblTickets td {
  padding: 8px;
}

#priorityMsg {
  background-color: rgba(225, 225, 225, 0.15);
  padding: 10px;
  border-radius: 8px;
}

#priorityMsg h3 {
  margin-top: 0px;
}

.ticketAttachment {
  width: 100%;
  margin-top: 10px;
  line-height: 18px;
  background-size: 18px;
  background-repeat: no-repeat;
  background-position: left center;
  padding-left: 28px;
}

.ticketAttachment.iconImage {
  background-image: url('../images/iconImage.png');
}

.ticketAttachment.iconFile {
  background-image: url('../images/iconFile.png');
}