button,
input[type="button"],
input[type="submit"] {
  -webkit-appearance: none;
  appearance: none;

  font-family: inherit;
  font-size: 14px;
  line-height: 1.0;

  padding: 6px 12px;
  border: 1px solid #777;
  border-radius: 4px;

  background-color: #f5f5f5;
  color: #000;

  cursor: pointer;
  box-sizing: border-box;
}


body { line-height: 1.3; }

.container { width:auto; padding:10px; }

div.right, th.right { text-align: right; }

.fieldWithErrors {
  display: inline; }

.error_messages {
  width: 400px;
  border: 2px solid #cf0000;
  padding: 0;
  padding-bottom: 12px;
  margin-bottom: 20px;
  background-color: #f0f0f0;
  font-size: 12px; }
  .error_messages h2 {
    text-align: left;
    padding: 5px 5px 5px 15px;
    margin: 0;
    font-weight: bold;
    font-size: 12px;
    background-color: #cc0000;
    color: white; }
  .error_messages p {
    margin: 8px 10px; }
  .error_messages ul {
    margin: 0; }

input.date {
  width: 75px;
}

input.money {
  width: 75px;
  text-align: right;
}

div#user_actions {
  text-align: right;
  width: 100%;
}

.board_list table {
  width: 100%;
}

.pagination {
  width: 100%;
  margin: 10px;
  text-align: center;
}

table.row-highlight tr:hover {
  background-color: yellow;
}

.rounded {
  padding: 10px;
}

a.subject {
  text-decoration: none;
  color: #4F6B72;
}

a.no-line {
  text-decoration: none;
}

.body {
  height: 300px;
  background-color: rgb(220, 234, 244);
}

.bottom_actions {
  text-align: center;
}

.reply_form {
  text-align: center;
}

.error ul {
  margin-bottom: 0;
}

label.required {
  background: url("/images/required_star.gif") no-repeat scroll right top transparent;
  padding-right: 10px;
}

a.icon {
  text-decoration: none;
}

.post-body {
  min-height: 250px;
}

div.row {
  padding: 5px 0;
  clear: both;
}

div.center, tr.center, td.center {
  text-align: center;
}

div.right {
  text-align: right;
}

div.left {
  text-align: left;
}

p + p {
  text-indent: 0;
}

/*JQUERY-UI + BLUEPRINT CSS CALENDAR FIX*/
#ui-datepicker-div {
  display: none;
}

/* without this, sub-menu won't be visible. */
.container {
  min-height: 500px;
}

.color_info { clear:left; height:20px; width: auto; display: flex; }
.p_color { width:20px; height:20px; margin-right:5px; border:1px solid #aaa; }
	#linesheet-products .p_color { width:10px; height:10px; }
	.p_color span { display:block; float:right; width:10px; height:20px; }
.p_color_name { font:12px/20px arial; width:auto; height:15px; white-space: nowrap; }
	.p_color_name span { padding-right:5px; color:#999; display:none; }
.color_image img { width:20px; }
.color_file_upload input { font:11px arial; }


.search_panel { background:#F8E7B0; padding:10px; font:11px arial; }

a.no_line {
  text-decoration: none;
  color: #000099;
}

a.order_selected {
  color: red;
}

fieldset.size .span-2.selected{ font-weight: bold; color:red; }

.profiler-results.profiler-left { width:0px; overflow:hidden; }
th, td, caption { padding:0px; }
div.right { text-align:right; width:100%; }
h3 { margin:5px 0px 5px 0px; }
.hide { display:none; }
.center { text-align:center; }
.v_top { vertical-align:top; }
.row.inline { clear:none;  display:inline; }

div.inline { display:inline-block; float: left; }
.r10 { margin-right:10px; }
.pr10 { padding-right:10px; }
.flr { float:right; }

#admin .container { width:auto; padding:0px 20px 20px 20px; }
#admin .container h1 { clear:both; color:#666; font:30px century gothic; margin:0px;}
#admin .container h2 { clear:both; color:#666; font:17px century gothic; margin:5px 0px;}
  #admin .container h2#admin { font: 12px/30px arial; color:#fff; margin:0px; }

#admin .container div#logo { background:url(/images/custom/images/logo.png) no-repeat -15px 0px; background-size: auto 40px; height:45px; }

#top_menu { position:absolute; right:20px; margin-top:-45px; }
  #top_menu a { text-decoration:none; color:#000; }

#logo_only { text-align: center; padding: 30px 0px 30px; }
  #logo_only img { width: 200px; }
#forgot_password legend { font: bold 14px tahoma; text-align: center; color:#666; }
#forgot_password .button { margin: 0px; }

#colors .span-4 { width:100x;; float:left; }
#colors .span-4 .p_color { float:left; border:1px solid #666; }
#colors .span-4  .color_info { width:auto; height:30px; }
#colors .span-4 .p_color_name { width: 80px;  text-transform:none; }
#colors .span-2, #colors .span-3 { font: 11px tahoma; width:auto;  }

fieldset { padding: 5px; margin:0; border-width:2px; background:#efefef; }

.span-24, div.span-24 { width:100%; }
  div.span-24.w_auto { width:auto; }
  div.span-24.w_fixed { width:950px; }

#menu h2 { float:left; width: auto; background: #888; color:#fff; text-transform: uppercase;  height: 30px;  font:13px/25px century gothic; padding: 0px 15px; }
#menu ul li a { color:#fff; border-color:#999; }
#menu ul li { font:13px/29px century gothic;  height:29px; background:#000; }
ul.dropdown li.hover, ul.dropdown li:hover  { background: #999; }

#category { margin: 0px; }
  #category div.c_box { border-bottom:1px solid #ccc; }
  #category div.c_box div { display:inline-block; padding-right:10px; }
    #category div.c_box div.c_name { font: bold 13px arial; width: 150px; }

.pagination { font:300 15px century gothic; word-spacing:0.5em; }
em.current { font-weight:400; font-style: normal;}

.nbutton { background:#F5F5F5; font:bold 11px verdana; padding: 7px 10px; display: inline-block; }
.nbutton.primary { color:#529214; }
a.nbutton { text-decoration: none; }
input[type=submit].nbutton { padding: 5px 10px; border:1px solid #ccc; margin-top:8px;  font:bold 11px verdana; color:#555; letter-spacing:-1px; }

.sbutton { background:#000; color:#fff; padding:0px 10px; }
  a.sbutton { color:#fff; text-decoration:none; }
  .sbutton.red { background:red; }

legend { background:#999; color:#fff; padding:0px 10px; font:11px arial; }

fieldset.normal { border:none; }
  legend.cc { display:none; }

input[type="text"] { padding: 0px; }

#packing_other_charge_description { width: 100px; }

div.span-3.delivery_company { display:none; }
.note { height: 100px; }

.packing_items { display:none; }
.button.green { color:green; }

#admin_note { height: 80px; }
.invoice_no a { font:bold 18px arial; }

table.payment { background:#FFCC80; border:0px solid #aaa; }

table.stripe:not(.no-hover) tr:hover {
  background: #FFE0B4;
  transform: scale(1,1);
  -webkit-transform: scale(1,1);
  -moz-transform: scale(1,1);
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
  -webkit-box-shadow: 0 1px 4px rgba(0,0,0,0.2);
  -moz-box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
table.stripe:not(.no-hover) tr.even:hover td {
  background: #FFE0B4;
}

table.new thead th { background: #d9d9d9; }
table.new tr.even td { background: #efefef; }
table.in_progress thead th { background: #9eb9ca; }
table.in_progress tr.even td { background: #d5e6ec; }
table.declined thead th { background: #d17171; }
table.declined tr.even td { background: #e9dbdb; }
table.shipped thead th { background: #9fcca1; }
table.shipped tr.even td { background: #dee7de; }
table.cancelled thead th { background: #ebec90; }
table.cancelled tr.even td { background: #f1f1d2; }


/*product_edit*/
.toggle_txt { color:#fff; font:bold 11px arial; }
.toggle_txt a { text-decoration:none;  }
.toggle_txt a span.true { text-decoration:none; color:white; border:1px solid green; border-radius: 8px; padding:0px 4px; background:green; }
.toggle_txt a span.false { text-decoration:none; color:white; border:1px solid #999; border-radius: 8px; padding:0px 4px; background:#999; }

a.reauth-link { color: black; font-weight: bold; text-decoration: none; border: 1px solid red; border-radius: 8px; padding: 2px 5px; margin: 2px 0px;}
a.reauth-link:hover { background: #ffd3d3; border: 1px solid red;}

a.po-link { text-decoration: none; font-weight: bold; }
a.po-link:hover { text-decoration: underline; font-weight: bold; }
a.company-link {
  text-decoration: none;
  color: #444;
  font-weight: bold;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
a.company-link:hover { text-decoration: underline; color: #ff9900; font-weight: bold; }

a.order-header {
  color: black;
  text-decoration: none;
  font-weight: bold;
  font-size: 24px;
}
a.order-header:hover { text-decoration: underline; }
a.new-header:hover { color: #888; }
a.in-progress-header:hover { color: #9eb9ca; }
a.declined-header:hover { color: #d17171; }
a.shipped-header:hover { color: #9b7f48; }
a.cancelled-header:hover { color: #a3a52e;}

span.status-Captured { font-weight: bold; color: green; }

span.auth-amount { font-weight: bold; }
span.text-payeezy { color: #222222; }
span.text-stripe { color: #6772E5; }
span.text-paypal { color: navy; font-weight: bold; }

span.true { text-decoration:none; color:white; border:1px solid green; border-radius: 8px; padding:0px 4px; background:green; }

a.ip-link { text-decoration: none; color: white; font-weight: bold; }

span.false { text-decoration:none; color:white; border:1px solid #999; border-radius: 8px; padding:0px 4px; background:#999; }

a.ip-link { text-decoration: none; color: white; font-weight: bold; }

ul.existing { list-style:none; padding:0px; margin:0px; font:11px arial; }
  ul.existing li { width:210px; height: auto; float:left; }
    ul.existing li div.span-1 { width:20px; }
    ul.existing li div.span-4 { width:170px; float:left; }
      ul.existing li div.span-4 div.color_info {  }
        ul.existing li div.span-4 div.color_info div.p_color { width:20px; border:1px solid #000; }
        ul.existing li div.span-4 div.color_info div.p_color_name { width:130px; font-size:11px; }
      ul.existing li div.span-4 .quantity_for_color { width:20px; margin-top:-50px; }

    ul.existing li div.span-3 { margin-left:30px; width:50px; float:left; }
    ul.existing li div.span-2 { width:50px; float:left; }
    ul.existing li div.inline { margin-left: 0px; margin-top: -5px; }
      ul.existing li div.inline select { font:10px arial; }

ul.not-existing { clear:both; list-style:none; padding:0px; margin:0px; border:1px solid #aaa; padding-top:20px; background:#f1f1f1; font:11px arial; height:200px; overflow-y:auto; }
  ul.not-existing li { width:210px; height: 30px; float:left; }
    ul.not-existing li div.span-1 { width:20px; }
    ul.not-existing li div.span-4 { width:170px; float:left; }
      ul.not-existing li div.span-4 div.color_info {  }
        ul.not-existing li div.span-4 div.color_info div.p_color { width:20px; border:1px solid #000; }
        ul.not-existing li div.span-4 div.color_info div.p_color_name { width:130px; font-size:11px; overflow:hidden; word-wrap:break-all }

    ul.not-existing li div.span-3 { display:none; margin-left:30px; width:50px; float:left; }
    ul.not-existing li div.span-2 { display:none; width:50px; float:left; }

#pictures_fieldset .span-7 { width:150px; }

#orders td {padding-right:5px; }

.edit_user input { font:12px/18px arial; padding:2px; }

#category h2 { font:12px arial; }
  #subcategory { width: auto; }

#admin_user input { padding:2px; font:12px arial; }

#edit_multiple_products {}
  #edit_multiple_products .style_no input { width:100px; border:none; font-weight:bold; }
  #edit_multiple_products .price input { width:70px; }
  #edit_multiple_products .category select { width:130px; font:11px arial; }

#edit_pictures { }
#edit_pictures td { border-bottom:1px solid #aaa; }
  #edit_pictures tr:first-child td {  border-top:1px solid #aaa; }
#edit_pictures td.style_no { width:100px; font:bold 13px arial; }
#edit_pictures td.pictures { text-align:left; font:11px arial; width:860px; }
  #edit_pictures td.pictures .picture_box { float:left; height:220px; margin-right:20px; }
  #edit_pictures td.pictures .picture_box img { display: block; }
  #edit_pictures td.pictures .picture_box input { display: block; }
  #edit_pictures td.pictures .picture_box input[type="text"] { margin-left:10px; width:20px; }
  #edit_pictures td.pictures .picture_box span.ck_title { clear:both; display: block; float:left; }
  #edit_pictures td.pictures .picture_box span.ck_delete { display: block; float:left; }
  #edit_pictures td.pictures .picture_box select { clear:both; display: block; font:11px arial; }




/*navigation*/
#menu_box { clear: both; height:auto; margin-top:10px; width:960px; color:#fff; }
#menu { Z-INDEX: 9; MARGIN: 0px auto; padding:0px; height:auto; width:auto; text-align: left; border: 0px solid blue; background:#000; }

#nav {  color:#fff; white-space: nowrap; MARGIN: auto; LIST-STYLE-TYPE: none; width:auto; padding:0px; }

#nav LI { padding: 0px 10px; border-right:1px solid #fff; margin: 0px 0px; display:inline-block; position:relative;  }

#nav LI:last-child { border:none; }

#nav LI A { font: 14px/25px century gothic; TEXT-DECORATION: none; letter-spacing:0px; color:#fff; background:#000; }

#nav A:hover { color:#999; }

#nav LI UL { /*submenu*/
	background: #000; width: auto; padding: 10px 0px 0px; LIST-STYLE-TYPE: none; filter: Alpha(Opacity=95); -moz-opacity:0.95; opacity: 0.95; position: absolute; margin-top:0px; margin-left:-10px; z-index:10; }

  #nav LI UL LI { color: #fff; text-align:left; padding:0px 10px; margin:0px; display: block; width: auto; border:none; line-height: 15px; }
  #nav LI UL LI A {  color:#fff; font:12px/12px century gothic; letter-spacing:0px;  }
#nav LI UL LI A span { padding-left:15px; font-weight:normal; font-size:12px;  }

#nav LI UL LI A:hover { color: #999; }
#nav LI LI { WIDTH: auto; POSITION: relative; font-size: 12px; }
#nav LI UL { LEFT: -999em;  HEIGHT: auto; }
#nav LI:hover UL { left: auto;  }


ul.list { font-family: century gothic; list-style:none; font-size: 14px; }

.product_image { float:left; }
.created_at, .updated_at, .activated_at { font:10px arial; }

.dates .created_at { font-size:12px; float:left; margin-right: 30px; }
.dates .updated_at { font-size:12px; float:left; margin-right: 30px; }
.dates .activated_at { font-size:12px; float:left; margin-right: 30px; margin-bottom:10px;}
.dates span.label { font-weight: bold; }

.p_category { clear:both;  }

ol#colors li { width: 200px; }

.capitalize { text-transform:capitalize; }

table.stat { border-collapse:collapse; }
table.stat th { padding:2px; color:#fff; text-align:center; border:1px solid #fff; font:11px arial; background:#efefef; }
    table.stat th.stat_web { background: #666; }
    table.stat th.stat_las { background: #B32622; }
    table.stat th.stat_fg { background: #2265B3; }
    table.stat th.stat_total { background:#111; }

.size { font-size: 11px; }
.size .quantity-zero { border:2px solid transparent; }
.size .quantity-non-zero { border:2px solid red; }

.hide { display: none; }

/*menu*/
.menu_subcategory { margin-left: 30px; width:400px; }

/*buttons*/
.button_s { font:10px arial; color:#fff; background:orange; text-decoration:none; padding:0px 3px; }
.button_s:hover { background:#FFC968; }


iframe.product_sync { width: 200px; height: 200px;}

ol#products.ui-sortable { width: 700px; }

#pictures_fieldset div.span-7 { margin-bottom:20px;  font:10px arial; text-transform:uppercase;  }

.row.p_brand { display:none; }

a.delete-link { position:absolute; margin-top:-10px; margin-left:55px; font:10px arial; }

.address_box { padding-top:5px; padding-bottom:2px;}
.address_box > span { margin-right: 5px;  }
.address_box > span.street { display:block; float:left;  }
.address_box > span.suite { display:block; }
.address_box > span.city { clear:both; display:block;  float:left; }
.address_box > span.state { display:block; float:left; }
.address_box > span.zip { display:block; float:left;  }
.address_box > span.country { clear:both; display:block; float:left; font-weight:bold; font-family: century gothic; padding: 3px 0px; text-transform: uppercase; }

.credit_number { background:#fff; padding: 2px 4px;  border:1px solid #999;  font: 12px arial;  display:block;  margin-top:5px; width:150px;  }

#tagging_icons { width:auto; clear:both; border-collapse:collapse; }
#tagging_icons td, #tagging_icons th { border:1px solid #999; }
#tagging_icons th { padding:5px 10px; background:#eee; }
#tagging_icons td:first-child { text-align:center; }

#orders tr.total { font-size:14px; line-height:130%; }

#statistics-overview { margin-top:20px; }
#statistics-overview th, #statistics-overview td { text-align:right; }
#statistics-overview h3 { font-family:century gothic; }

a.button2 { background:#666; color: #fff; font:10px arial; text-decoration:none; padding:2px 4px; text-transform: uppercase; }
a.button2.negative { background:red; }

a span.home { text-decoration: none; font-size: 0px; background: url(/images/home-icon.png) no-repeat 0px 5px; width: 17px; height: 20px; display:inline-block; vertical-align: middle; }

.orderless { background: red; color:#fff; padding: 0px 5px; border-radius: 5px;}

table.stripe th { font-size: 11px;  }
table.stripe th a { display:inline-block; }

td.email, td.registered, td.permit, td.email { font-size: 11px; }
td.registered { padding-right: 10px; }
td.permit a { text-decoration:none; background:#666; color:#fff; font-size: 9px; padding: 0px 3px; border-radius: 2px; }

td.orders, td.logins { text-align: center; }

.sort-symbols { padding-right: 10px; white-space: nowrap; }
.sort-symbols a { display:inline-block; width:5px; font-size:10px; }
td.contact { width:150px; }

.product-picture-div .title, .product-picture-div .delete, .product-picture-div .handle { display: none }
.product-picture-div:hover .title, .product-picture-div:hover .delete, .product-picture-div:hover .handle { display: inline }

.hover-show-icons .hidden-icon { visibility: hidden; cursor: default; }
.hover-show-icons:hover .hidden-icon { visibility: visible; }


.marketplace-link {
  color: white;
  padding: 1px 5px;
  border-radius: 3px;
  margin-right: 3px;
}

.marketplace-link a {
  text-decoration: none;
  color: white;
}

.marketplace-link .edit {
  font-size: 80%;
  padding: 1px 3px;
  border-radius: 10px;
}

.marketplace-link-lashowroom {
  background-color: #D4524F;
}

.marketplace-link-lashowroom .edit a {
  color: #D4524F;
}

.marketplace-link-fashiongo {
  background-color: #3D7AB6;
}

.marketplace-link-fashiongo .edit a {
  color: #3D7AB6;
}

.marketplace-link .edit {
  background-color: white;
}

input.button {
  display: inline;
  float: left;
  display: block;
  margin: 0.7em 0.5em 0.7em 0;
  border-width: 1px;
  border-style: solid;
  font-family: "Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
  font-size: 100%;
  line-height: 130%;
  font-weight: bold;
  text-decoration: none;
  cursor: pointer;
  padding: 5px 10px 5px 7px;
  background-color: #f5f5f5;
  border-color: #eeeeee #dedede #dedede #eeeeee;
  color: #565656;
}

input.button.positive {
  color: #529214;
}

input.button.negative {
  color: #d12f19;
}

.transaction input[type="text"] {
  /*
  height: 32px;
  font-size: 1rem;
  */
  width: 76px;
  text-align: right;
  margin-top: 8px;
}

span.best_in_place input.fit { width: auto; }
span.best_in_place input.fit-1 { width: 1em; }
span.best_in_place input.fit-2 { width: 2em; }
span.best_in_place input.fit-3 { width: 3em; }
span.best_in_place input.fit-4 { width: 4em; }
span.best_in_place input.fit-5 { width: 5em; }
span.best_in_place input.fit-6 { width: 6em; }
span.best_in_place input.fit-7 { width: 7em; }
span.best_in_place input.fit-8 { width: 8em; }
span.best_in_place input.fit-9 { width: 9em; }
span.best_in_place input.fit-10 { width: 10em; }

span.style-no,
span.style-no span.best_in_place,
span.style-no span.best_in_place input { min-width: 100px; }

hr.separator {
  height: 2px;
  background-color: #888;
}

/* admin/products/order_stats */
table#order_stats_table {
  width: auto;
  margin-top: 10px;
}

table#order_stats_table tr.row-summary th {
  background-color: white;
  padding: 4px;
}

table#order_stats_table td.right {
  text-align: right;
}

table#order_stats_table th,
table#order_stats_table td {
  padding: 2px 4px 2px 4px;
}
table#order_stats_table th.padded,
table#order_stats_table td.padded {
  padding: 2px 24px 2px 24px;
}

table.hide_checkbox td.checkbox, table.hide_checkbox th.checkbox {
  display: none;
}

table.hide_status td.status, table.hide_status th.status {
  display: none;
}

.customer_note_tooltip {
  color: blue;
  border: 1px solid blue !important;
}

.inventory-grid {
  width: 1400px;
}

.inventory-grid div.product_container {
  border: 1px solid lightgrey;
  margin-bottom: 16px;
}

.inventory-grid .product {
  width: 96%;
  display: flex;
  flex-direction: column;
  justify-content: start;
}

.inventory-grid .product:nth-child(even) {
  background-color: #f5f5f5;
}

.inventory-grid .row {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.inventory-grid th.left,
.inventory-grid td.left { text-align: left; }
.inventory-grid th.center,
.inventory-grid td.center { text-align: center; }
.inventory-grid th.right,
.inventory-grid td.right { text-align: right; }

.inventory-grid .last-update-td {
  text-align: center;
  font-size: 0.7rem;
}

.inventory-grid .product-picture {
  margin: 0 8px 0 8px;
  text-align: center;
}

.inventory-grid .inventory-table {
  flex-grow: 1;
  margin: 0 16px 0 16px;
}

.inventory-grid span.style-no {
  font-size: 16px;
  font-weight: bold;
  margin: 0 8px 0 8px;
}

.last-update {
  display: flex;
  justify-content: space-between;
  align-items: center;
  column-gap: 4px;
  margin: 0 8px 0 8px;
}

.last-update .history {
  text-align: left;
  flex-grow: 1;
}

.bip-colorship-qty,
.bip-ohq-qty {
  text-align:right;
  width:50px;
}

.bip-colorship-qty input[type="text"],
.bip-ohq-qty input[type="text"] {
  max-width: 50px;
  text-align:right;
  font-size: 15px;
}

a.plain {
  color: black;
  text-decoration: none;
}

div.delete-color-image {
  display: inline-block;
  color: red;
  font-size: 1rem;
}

div.delete-color-image:hover {
  cursor: pointer;
}

.hover-visible-container {
  &:hover .hover-visible {
    visibility: visible;
  }
  .hover-visible {
    visibility: hidden;
  }
}

table.table {
  border-collapse: collapse;
}

table.table :is(th,td) {
  padding: 5px 10px;
}

table.table.bordered :is(th,td) {
  border: 1px solid black;
}

table.table.hover tr:hover {
  background-color: #eee;
}

table.table.striped tr:nth-child(even) {
  background-color: #eaeaea;
}

form.form :is(input[type='text'],input[type='select'],input[type='number'],input[type='submit'],select) {
  padding: 5px 10px;
  margin-left: 5px;
  margin-right: 5px;
}
form.form label {
  margin-left: 10px;
}

[data-with-actions="true"] {
  & div.actions {
    visibility: hidden;
  }

  &:hover div.actions {
    visibility: visible;
  }
}

div.table_container {
  text-align: center;
  & table {
    margin: auto;
    width: auto;
    text-align: left;
  }
}

a.btn {
  display: inline-block;
  margin: 0.7em 0.5em 0.7em 0;
  border-width: 1px;
  border-style: solid;
  font-family: "Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
  font-size: 100%;
  line-height: 130%;
  font-weight: bold;
  text-decoration: none;
  cursor: pointer;
  padding: 5px 10px 5px 7px;
  background-color: #f5f5f5;
  border-color: #eeeeee #dedede #dedede #eeeeee;
  color: #565656;
  img {
    margin: 0 3px -3px 0 !important;
    padding: 0;
    border: none;
    width: 16px;
    height: 16px;
  }

  &:hover {
    background-color: #dff4ff;
    border-color: #d2f1ff #c2e1ef #c2e1ef #d2f1ff;
    color: #336699;
  }
  &:active {
    background-color: #6299c5;
    border-color: #72a9d5 #6299c5 #6299c5 #72a9d5;
    color: white;
  }
}

a.no_line {
  text-decoration: none;
  color: inherit;
}

body.v2 {
  font-size: 12px;
  line-height: normal;
  font-family: "Roboto", "Noto", sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  color: #0d0d0d;

  table.table-v2 {
    th,td {
      padding: 8px;
    }

    thead th:first-child {
      border-top-left-radius: 8px;
      border-bottom-left-radius: 8px;
    }

    thead th:last-child {
      border-top-right-radius: 8px;
      border-bottom-right-radius: 8px;
    }

    tbody td {
      border-bottom: 1px solid #cdcdcd;
    }
  }

  table.table-v2.hoverable {
    tr:hover { background-color: #efefef; }
  }

  .button {
    display: inline-block;
    padding: 6px 12px;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    border: 1px solid transparent;
    border-radius: 4px;
    background-color: transparent;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
  }

  .button-success {
    color: #fff;
    background-color: #28a745;
    border-color: #28a745;
  }
  .button-success:hover {
    color: #fff;
    background-color: #218838;
    border-color: #1e7e34;
  }
  .button-warning {
    color: #212529;
    background-color: #ffc107;
    border-color: #ffc107;
  }
  .button-warning:hover {
    color: #212529;
    background-color: #e0a800;
    border-color: #d39e00;
  }
  .button-info {
    color: #fff;
    background-color: #17a2b8;
    border-color: #17a2b8;
  }
  .button-info:hover {
    color: #fff;
    background-color: #138496;
    border-color: #117a8b;
  }
  .button-danger {
    color: #fff;
    background-color: #dc3545;
    border-color: #dc3545;
  }
  .button-danger:hover {
    color: #fff;
    background-color: #c82333;
    border-color: #bd2130;
  }

  .section {
    border: 1px solid #dedede;
    border-radius: 4px;
    padding: 10px;
  }

  .section-header {
    font-size: 14px;
    color: #787878;
    border-bottom: 1px solid #dedede;
    padding-bottom: 6px;
    padding-left: 4px;
    margin-bottom: 12px;
    font-weight: 600;
  }

  .row-align-centered {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  dl.grid-list {
    display: grid;
    grid-template-columns: max-content auto;

    dt {
      color: #9C9C9C;
      grid-column-start: 1;
      padding: 8px 8px;
    }

    dd {
      margin: 0;
      padding: 8px 8px;
      grid-column-start: 2;
    }

    div.full {
      grid-column: 1 / 3;
    }
  }

  #admin-products-filter {
    width: 100%;
    padding: 8px 16px;
    margin-bottom: 12px;
    background-color: #f5f5f5;
    box-sizing: border-box;
    border: 1px solid transparent;
    border-radius: 8px;

    .fields {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: flex-start;
      gap: 10px;

      .button-column {
        margin-top: auto;
      }
    }

    label {
      display: block;
      color: #565656;
      font-size: 12px;
      font-weight: bold;
    }

    select, input {
      margin: 0;
      padding: 6px 4px;
    }

    input[type="checkbox"] {
      width: 20px;
      height: 20px;
      border-radius: 4px;
    }
  }

  #form-with-selection {
    margin-top: 12px;

    .product-modifiers {
      display: none;
      border: 1px solid #efefef;
      border-radius: 8px;
      padding: 12px 16px;
      position: relative;
      margin-bottom: 16px;

      .title {
        position: absolute;
        top: -8px;
        background: white;
        padding: 0 4px;
        font-weight: 700;
        color: blue;
      }

      label {
        display: block;
        color: #565656;
        font-size: 12px;
        font-weight: bold;
      }

      select, input[type="text"] {
        margin: 0;
        padding: 6px 4px;
        font-size: 12px;
        width: 300px;
        box-sizing: border-box;
      }

      input[type="submit"] {
        margin: 0;
        padding: 6px 4px;
        border: 1px solid buttonface;
        border-radius: 4px;
        cursor: pointer;
      }

      input[type="submit"]:hover {
        background-color: #dff4ff;

      }
    }

    .product-modifiers.visible {
      display: block;
    }
  }

  #admin-products-table {
    img {
      width: 60px;
    }

    .icon {
      display: inline-block;
      width: 14px;

      img {
        width: 100%;
      }
    }

    td.style-no {
      font-size: 18px;
      font-weight: 600;
    }

    .action-buttons {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .action-button {
      display: block;
      font-size: 16px;
      line-height: 32px;
      border: 1px solid transparent;
      border-radius: 4px;
      text-align: center;
      text-decoration: none;
      width: 120px;
    }

    td div.label {
      color: #666;
    }

    td.price {
      font-size: 16px;
      font-weight: 600;
    }
  }

  #order-details {
    & > h1 {
      font-size: 24px;
      line-height: 48px;
    }

    .panes {
      display: grid;
      grid-template-columns: 1fr 1fr;
      column-gap: 16px;
    }

    dd.creator {
      color: blue;
      font-weight: bold;
    }

    dd.status {
      select {
        margin: 0;
      }
    }

    dd.order-date {
      font-size: 14px;
      line-height: 20px;
    }

    dd.customer {
      font-size: 14px;

      .nth-order {
        margin-top: 4px;
        width: fit-content;

        & > a {
          display: flex;
          align-items: center;
        }
      }
    }

    dd.ship-method {
      span.best_in_place {
        display: block;
        width: max-content;
        border: 1px solid #bbbbbb;
        color: black;
        padding: 6px 12px;
      }

      span.best_in_place:hover {
        cursor: pointer;
      }
    }

    div.ship-all-items-at-once {
      color: red;
      text-align: center;
      font-size: 18px;
      font-weight: 600;
      padding: 6px 0;
      background-color: rgba(255,0,0,0.1);
      border: 1px solid rgba(255,0,0,0.2);
      border-radius: 4px;
      margin-bottom: 8px;
    }

    div.stripe-transaction {
      display: flex;
      flex-direction: column;
    }

    div.stripe-logo {
      padding: 4px;
      height: 32px;
      box-sizing: border-box;
      display: inline-block;
      border-radius: 4px;
      width: fit-content;
      border: 1px solid #635BFF;
    }

    div.transaction {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 15px;

      .button {
        font-size: 14px;
        padding: 2px 8px;
      }
    }

    .btn.void {
      margin: 0.7em 0.5em 0.7em 0;
      border-width: 1px;
      border-style: solid;
      font-family: "Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
      font-size: 100%;
      line-height: 130%;
      font-weight: bold;
      text-decoration: none;
      cursor: pointer;
      padding: 5px 10px 5px 7px;
      background-color: #f5f5f5;
      border-color: #eeeeee #dedede #dedede #eeeeee;
      color: red;
    }

    #capture-payment,
    #purchase {
      input[type="text"] {
        margin: 0;
        width: 120px;
      }
    }

    div.declined {
      padding: 7px 0;
    }

    #address-info,
    #order-items,
    #store-credit,
    #add-item {
      margin-top: 12px;
    }

    #order-items {
      margin-top: 12px;

      th, td {
        padding-left: 6px;
        padding-right: 6px;
      }
    }

    .add-credit-header {
      padding: 20px 8px 12px;
    }

    .add-credit-button,
    #add-item-button,
    .search-button {
      color: #529214;
      display: inline-block;
      border-width: 1px;
      border-style: solid;
      font-family: "Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
      font-size: 100%;
      line-height: 130%;
      font-weight: bold;
      text-decoration: none;
      cursor: pointer;
      padding: 5px 18px;
      background-color: #f5f5f5;
      border-color: #eeeeee #dedede #dedede #eeeeee
    }

    #add-item-button,
    .search-button {
      display: inline-block;
    }

    .search_result {
      margin-top: 12px;
    }
  }

  #admin-users {
    th, td {
      padding-left: 4px;
      padding-right: 4px;
    }
    thead th {
      font-size: 12px;
      text-wrap: nowrap;
    }

    .sort-header {
      color: black;
      cursor: pointer;
      text-decoration: none;
    }

    .sort-header.current {
      color: blue;
    }

    .business-name-with-home {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;

      .home-link {
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }

    .filters {
      width: 100%;
      box-sizing: border-box;
      padding: 8px 12px;
      display: flex;
      border: 1px solid #efefef;
      flex-direction: row;
      gap: 10px;
      align-items: flex-end;

      label {
        display: block;
        color: #888;
      }

      select, input {
        margin: 0;
        padding: 3px 6px;
      }

    }
  }
}

.sortable-wrapper {
  display: flex;
  justify-content: flex-end;
  .label {
    margin-right: 8px;
  }
  .sort-icon {
    align-self: center;
    font-size: 200%;
    a {
      text-decoration: none;
    }
    &.off {
      opacity: 0.3;
    }
    &.on {
      opacity: 1.0;
    }
  }
}