:root {
    --page-background: #F0F1F4;
    --color-red: #C71610;
    --color-green: #13AD60;
    --color-yellow: #F3A157;

/* BLUE*/
    --blue-primary: #0052CC;
    --blue-100: #F7F9FD;
    --blue-200: #F0F6FF;
    --blue-201: #F4F7FE;
    --blue-300: #E9EDF4;
    --blue-301: #D0DAED;
    --blue-400: #7AA3F3;
    --blue-500: #2264E5;
    --blue-700: #2B3674;
    --blue-800: #202750;

/* GRAY*/
    --gray-100: #EAEAEA;
    --gray-200: #D6D8DC;
    --gray-300: #CED4DA;
    --gray-400: #636D81;
    --gray-401: #747C93;
    --gray-500: #636D81;
    --gray-600: #464F60;
}

html * {
    margin: 0;
    /*padding: 0; SELECT NOT DISPLAYED CORRECTLY IN FIREFOX */
}

/* GENERAL */
/*
.spinner {
    padding: 5px;
    position: absolute;
    right: 0;
}
*/
.box-button { position:absolute;top:5px;right:5px; }
.box-status { padding: .5em; margin-right: 5px; }
.box-status.error,
.box-status.notice,
.box-status.success    { margin-bottom: 1em; border: 1px solid #ddd; }
.box-status.error      { background: #FBE3E4; color: #8a1f11; border-color: #FBC2C4; }
.box-status.notice     { background: #FFF6BF; color: #514721; border-color: #FFD324; }
.box-status.success    { background: #E6EFC2; color: #264409; border-color: #C6D880; }
.error a    { color: #8a1f11; }
.notice a   { color: #514721; }
.success a  { color: #264409; }
.highlight { font-weight: bold; background-color: #FBE3E4; }

/*.selected { color: #666; background-color: #fff2a8; border-left: 5px solid #a8d1ff;}*/
/*.unselected { color: #ccc;}*/
/*.unavailable { background: #FBE3E4; color: #8a1f11; border-color: #FBC2C4;}
.available { background: #E6EFC2; color: #264409; border-color: #C6D880; }*/
.unavailable { background: #FBE3E4; color: #8a1f11; border-color: #FBC2C4;}
.available { background: #a8d1ff; color: #264409; border-color: black; } /* border-color: #C6D880; */
.yui-gf .yui-u { margin-left:0px; width:75%; }

body {
    background: var(--page-background, #fff);
    color: #333;
    /*font: 11px "lucida grande", verdana, arial, helvetica, sans-serif;*/
}
#grailsLogo {
    padding-left: 0px;
    margin:0;
}
#grailsAppName {
    font-size: 4em;
    font-weight: bold;
    font-family: 'verdana';
    letter-spacing: -1px;
    padding-left: 0px;
    vertical-align: middle;
}

a:link, a:visited, a:hover {
    color: #666;
    /*font-weight: bold;*/
    /*font-size: 0.9em;*/ /* removed because it's distracting */
    /*text-decoration: underline;*/
    text-decoration: none;	    /* removed because we do not want to see underline */
}
a:hover {
    text-decoration: underline;
}

a.button:link,a.button:visited {
    color:#333;
}
a.button:hover {
    color: white;
}

a.disabled {
    pointer-events: none;
    cursor: default;
}


h1 {
    font-weight: normal;
    font-size: 16px;
    /*margin: .8em 0 .3em 0;*/
}

/*
ul {
    padding-left: 5px;
}*/

input, select, textarea, button {
    /*
    background-color: #fcfcfc;
    border: 1px solid #ccc;
    font: 11px "lucida grande", verdana, arial, helvetica, sans-serif;
    */
    margin: 2px 0;
    padding: 2px 4px;
}

select {
    padding: 2px 2px 2px 0;
}
textarea {
    /*
    width: 250px;
    height: 150px;*/
    vertical-align: top;
}

input:focus, select:focus, textarea:focus {
    border: 1px solid #b2d1ff;
    /* Causing buttons to change background color ?? when in focus  */
}

.body {
    /*float: left;*/
    margin: 0px 0px 0px 0px;
}

/* NAVIGATION MENU */

.nav {
    /*background: #fff url(../images/skin/shadow.jpg) bottom repeat-x;*/
    background-color: #eee;
    border: 1px solid #ccc;
    border-style: solid none solid none;
    margin-top: 5px;
    padding: 7px 12px;
}


.linkButton {
    color: #333;
    padding: 10px 5px;
}
.linkButton a {
    padding: 2px 3px;
    padding-left: 20px;
}


.linkButton a.home {
    background: url(../images/skin/house.png) center left no-repeat;
}
.linkButton a.list {
    background: url(../images/icons/silk/table.png) center left no-repeat;
}
.linkButton a.create {
    background: url(../images/icons/silk/add.png) center left no-repeat;
}

.linkButton a.ALL {
    background: url(../images/icons/silk/bullet_white.png) center left no-repeat;
}
.linkButton a.NEW {
    background: url(../images/icons/silk/bullet_white.png) center left no-repeat;
}
.linkButton a.OPEN {
    background: url(../images/icons/silk/bullet_white.png) center left no-repeat;
}
.linkButton a.FULFILLED {
    background: url(../images/icons/silk/bullet_white.png) center left no-repeat;
}
.linkButton a.CANCELED {
    background: url(../images/icons/silk/bullet_white.png) center left no-repeat;
}

.linkButton a.order-status-PENDING {
    background: url(../images/icons/silk/bullet_white.png) center left no-repeat;
}
.linkButton a.order-status-PLACED {
    background: url(../images/icons/silk/bullet_white.png) center left no-repeat;
}
.linkButton a.order-status-RECEIVED {
    background: url(../images/icons/silk/bullet_white.png) center left no-repeat;
}

.linkButton a.request-status-NEW {
    background: url(../images/icons/silk/bullet_white.png) center left no-repeat;
}
.linkButton a.request-status-REQUESTED {
    background: url(../images/icons/silk/bullet_white.png) center left no-repeat;
}
.linkButton a.request-status-PENDING {
    background: url(../images/icons/silk/bullet_white.png) center left no-repeat;
}
.linkButton a.request-status-PICKED {
    background: url(../images/icons/silk/bullet_white.png) center left no-repeat;
}
.linkButton a.request-status-OPEN {
    background: url(../images/icons/silk/bullet_white.png) center left no-repeat;
}
.linkButton a.request-status-FULFILLED {
    background: url(../images/icons/silk/bullet_white.png) center left no-repeat;
}
.linkButton a.request-status-CANCELED {
    background: url(../images/icons/silk/bullet_white.png) center left no-repeat;
}
.linkButton a.request-status-PLACED {
    background: url(../images/icons/silk/bullet_white.png) center left no-repeat;
}
.linkButton a.request-status-RECEIVED {
    background: url(../images/icons/silk/bullet_white.png) center left no-repeat;
}
.linkButton a.request-status-SHIPPED {
    background: url(../images/icons/silk/bullet_white.png) center left no-repeat;
}
.linkButton a.shipment-status-PENDING {
    background: url(../images/icons/silk/bullet_white.png) center left no-repeat;
}
.linkButton a.shipment-status-SHIPPED {
    background: url(../images/icons/silk/bullet_white.png) center left no-repeat;
}
.linkButton a.shipment-status-RECEIVED {
    background: url(../images/icons/silk/bullet_white.png) center left no-repeat;
}


.linkButton a.report_low {
    background: url(../images/icons/silk/chart_bar.png) center left no-repeat;
}
.linkButton a.report_reorder {
    background: url(../images/icons/silk/arrow_refresh.png) center left no-repeat;
}
.linkButton a.report_expiring {
    background: url(../images/icons/silk/clock.png) center left no-repeat;
}
.linkButton a.report_expired {
    background: url(../images/icons/silk/clock_red.png) center left no-repeat;
}
.linkButton a.report_consumption {
    background: url(../images/icons/silk/package_white.png) center left no-repeat;
}
.linkButton a.report_transactions {
    background: url(../images/icons/silk/calendar_view_day.png) center left no-repeat;
}
.linkButton a.report_shipping {
    background: url(../images/icons/silk/lorry.png) center left no-repeat;
}
.linkButton a.report_inventory {
    background: url(../images/icons/silk/package.png) center left no-repeat;
}
.linkButton a.settings {
    background: url(../images/icons/silk/cog.png) center left no-repeat;
}
.linkButton a.supported {
    background: url(../images/icons/silk/accept.png) center left no-repeat;
}
.linkButton a.formulary {
    background: url(../images/icons/silk/pill.png) center left no-repeat;
}
.linkButton a.stocked {
    background: url(../images/icons/silk/tick.png) center left no-repeat;
}
.linkButton a.notSupported {
    background: url(../images/icons/silk/decline.png) center left no-repeat;
}

.ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 7vw;
}

/* MESSAGES AND ERRORS */

.message {
    background: #f3f8fc url(../images/icons/silk/information.png) 8px 50% no-repeat;
    border: 1px solid #b2d1ff;
    color: #006dba;
    margin: 5px 0 5px 0;
    padding: 5px 5px 5px 30px
}

.warning {
    background: #FFF6BF url(../images/icons/silk/error.png) 8px 50% no-repeat;
    border: 1px solid #FFD324;
    color: #514721;
    margin: 5px 0 5px 0;
    padding: 5px 5px 5px 30px
}

div.errors {
    background: #fff3f3;
    border: 1px solid red;
    color: #cc0000;
    margin: 10px 0 5px 0;
    padding: 5px 0 5px 0;
}

div.errors ul {
    list-style: none;
    padding: 0;
}
div.errors li {
    background: url(../images/skin/exclamation.png) 8px 0% no-repeat;
    line-height: 16px;
    padding-left: 30px;
}

td.errors select {
    border: 1px solid red;
}
td.errors input {
    border: 1px solid red;
}

/* TABLES */

table {
    /*border: 1px solid #ccc;*/		/* jmiranda: removed because it's annoying to have to disable the border */
    width: 100%;
}
tr {
    border: 0;
}
td, th {
    font: 11px "lucida grande", verdana, arial, helvetica, sans-serif;
    line-height: 12px;
    padding: 6px 6px;
    text-align: left;
    vertical-align: top;
}
th {
    /*background: #fff url(../images/skin/shadow.jpg);*/
    color: #666;
    font-size: 11px;
    font-weight: bold;
    line-height: 17px;
    padding: 2px 6px;
    border-top: 1px solid #f2f2f2;
}
th a:link, th a:visited, th a:hover {
    color: #333;
    display: block;
    font-size: 10px;
    text-decoration: none;
}
th.asc a, th.desc a {
    background-position: right;
    background-repeat: no-repeat;
}
th.asc a {
    background-image: url(../images/skin/sorted_asc.gif);
}
th.desc a {
    background-image: url(../images/skin/sorted_desc.gif);
}

.odd {
    background: #f7f7f7;
}
.even {
    background: #fff;
}

/* LIST */

.list table {
    border-collapse: collapse;
}
.list th, .list td {
    /*border-left: 1px solid #ddd;*/
}
.list tbody tr:hover {
    background: #b2d1ff;
}

.list tbody tr.none:hover {
    background: none;
}
.list tbody tr.unhighlight:hover {
    background: none;
}



/* PAGINATION */

.paginateButtons {
    background: #fff url(../images/skin/shadow.jpg) bottom repeat-x;
    border: 1px solid #ccc;
    border-top: 0;
    color: #666;
    font-size: 10px;
    overflow: hidden;
    padding: 10px 3px;
}
.paginateButtons a {
    background: #fff;
    border: 1px solid #ccc;
    border-color: #ccc #aaa #aaa #ccc;
    color: #666;
    margin: 0 3px;
    padding: 2px 6px;
}
.paginateButtons span {
    padding: 2px 3px;
}

/* DIALOG */

.prop {
    padding: 5px;
}
.prop .name {
    text-align: left;
    width: 25%;
    /*white-space: nowrap;*/ /* it makes the sidebar tables look really bad */
}
.prop .value {
    text-align: left;
    width: 75%;
}
/* allows table to be flush with its parent table cell */
.prop .table {
    padding: 0px;
}

/* ACTION BUTTONS

.buttons {
    background: #fff url(../images/skin/shadow.jpg) bottom repeat-x;
    border: 1px solid #ccc;
    color: #666;
    font-size: 10px;
    margin-top: 0px;
    overflow: hidden;
    padding: 0;
}

.buttons input {
    background: #fff;
    border: 0;
    color: #333;
    cursor: pointer;
    font-size: 10px;
    font-weight: bold;
    margin-left: 3px;
    overflow: visible;
    padding: 2px 6px;
}
.buttons input.delete {
    background: transparent url(../images/skin/database_delete.png) 5px 50% no-repeat;
    padding-left: 28px;
}
.buttons input.edit {
    background: transparent url(../images/skin/database_edit.png) 5px 50% no-repeat;
    padding-left: 28px;
}
.buttons input.save {
    background: transparent url(../images/skin/database_save.png) 5px 50% no-repeat;
    padding-left: 28px;
}
*/

/* more menu button icons */
.menuButton {
    padding-left: 0px;
}
.menuButton a {
    padding-left: 15px;
}
.linkButton a.alert {
    background: url(../images/icons/silk/bell.png) center left no-repeat;
}
.linkButton a.error {
    background: url(../images/icons/silk/error.png) center left no-repeat;
}
.linkButton a.email {
    background: url(../images/icons/silk/email.png) center left no-repeat;
}
.linkButton a.settings {
    background: url(../images/icons/settings.png) center left no-repeat;
}
.linkButton a.shipment {
    background: url(../images/icons/truck.png) center left no-repeat;
}
.linkButton a.drugRoute {
    background: url(../images/icons/silk/pill_go.png) center left no-repeat;
}
.linkButton a.drugClass {
    background: url(../images/icons/silk/pill.png) center left no-repeat;
}
.linkButton a.warehouse {
    background: url(../images/icons/silk/building.png) center left no-repeat;
}
.linkButton a.site {
    background: url(../images/icons/silk/map.png) center left no-repeat;
}
.linkButton a.location {
    background: url(../images/icons/silk/building.png) center left no-repeat;
}
.linkButton a.locationType {
    background: url(../images/icons/silk/building_key.png) center left no-repeat;
}
.linkButton a.inventory {
    background: url(../images/icons/silk/book.png) center left no-repeat;
}
.linkButton a.eventType {
    background: url(../images/icons/silk/calendar.png) center left no-repeat;
}
.linkButton a.import {
    background: url(../images/icons/silk/table_add.png) center left no-repeat;
}
.linkButton a.menu {
    background: url(../images/icons/silk/text_list_bullets.png) center left no-repeat;
}
.linkButton a.account {
    background: url(../images/icons/document.png) center left no-repeat;
}
.linkButton a.main {
    background: url(../images/icons/document.png) center left no-repeat;
}
.linkButton a.auth {
    background: url(../images/icons/document.png) center left no-repeat;
}
.linkButton a.user {
    background: url(../images/icons/user.png) center left no-repeat;
}
.linkButton a.role {
    background: url(../images/icons/silk/shield.png) center left no-repeat;
}
.linkButton a.admins {
    background: url(../images/icons/users.png) center left no-repeat;
}
.linkButton a.group {
    background: url(../images/icons/silk/group.png) center left no-repeat;
}
.linkButton a.people {
    background: url(../images/icons/silk/group.png) center left no-repeat;
}

.linkButton a.admin {
    background: url(../images/icons/profile.png) center left no-repeat;
}
.linkButton a.transaction {
    background: url(../images/icons/document.png) center left no-repeat;
}
.linkButton a.stockCard {
    background: url(../images/icons/silk/book.png) center left no-repeat;
}
.linkButton a.recordInventory {
    background: url(../images/icons/silk/book_add.png) center left no-repeat;
}
.linkButton a.country {
    background: url(../images/icons/map.png) center left no-repeat;
}
.linkButton a.inventorylineitem {
    background: url(../images/icons/package.png) center left no-repeat;
}
.linkButton a.product {
    background: url(../images/icons/silk/package.png) center left no-repeat;
}
.linkButton a.order {
    background: url(../images/icons/silk/text_list_numbers.png) center left no-repeat;
}
.linkButton a.transactionentry {
    background: url(../images/icons/silk/text_list_numbers.png) center left no-repeat;
}
.linkButton a.documentupload {
    background: url(../images/icons/document.png) center left no-repeat;
}
.linkButton a.building {
    background: url(../images/icons/building.png) center left no-repeat;
}
.linkButton a.shipper {
    background: url(../images/icons/silk/lorry.png) center left no-repeat;
}
.linkButton a.shipperService {
    background: url(../images/icons/silk/map.png) center left no-repeat;
}
.linkButton a.browse {
    background: url(../images/icons/browse.png) center left no-repeat;
}
.linkButton a.dashboard {
    background: url(../images/icons/silk/application_view_tile.png) center left no-repeat;
}
.linkButton a.metadata {
    background: url(../images/icons/wrench.png) center left no-repeat;
}
.linkButton a.bullet {
    background: url(../images/icons/silk/bullet_white.png) center left no-repeat;
}
.linkButton a.invalid {
    background: url(../images/icons/silk/cross.png) center left no-repeat;
}
.linkButton a.new {
    background: url(../images/icons/silk/add.png) center left no-repeat;
}
.linkButton a.edit {
    background: url(../images/icons/silk/pencil.png) center left no-repeat;
}
.linkButton a.browse {
    background: url(../images/icons/silk/magnifier.png) center left no-repeat;
}
.linkButton a.view {
    background: url(../images/icons/silk/magnifier.png) center left no-repeat;
}
.linkButton a.delete {
    background: url(../images/icons/silk/delete.png) center left no-repeat;
}
.linkButton a.trash {
    background: url(../images/icons/silk/bin.png) center left no-repeat;
}
.linkButton a.export {
    background: url(../images/icons/silk/arrow_down.png) center left no-repeat;
}
.linkButton a.indent {
    background: url(../images/icons/indent.gif) center left no-repeat;
}

/* FORMS
-------------------------------------------------------------- */

/* --------------------------------------------------------------

   forms.css
   * Sets up some default styling for forms
   * Gives you classes to enhance your forms

   Usage:
   * For text fields, use class .large or .text

-------------------------------------------------------------- */


label       { font-weight: normal; white-space: nowrap; }
fieldset    { padding:0em; margin: 0 0 .2em 0; border-top: 1px solid lightgrey; }
legend      { font-weight: normal; font-size:1.2em;  margin-left: 10px; margin-right: 10px; }
/*
legend span {
	position: absolute;
	margin-top: -1em;
}*/

/* Form fields
-------------------------------------------------------------- */
input{box-sizing:border-box}

input[type=text],
input[type=password],
input.text, input.large,
textarea, select {
    background-color:#fff;
    border:1px solid #bbb;
}
input[type=text]:focus,
input[type=password]:focus,
input.text:focus, input.large:focus, span.large:focus,
textarea:focus, select:focus {
    border-color:#666;
}

input[type=text],
input[type=password],
input.text, input.large, span.large,
textarea, select {
    margin:0;
}

textarea, input.large {
    width: 100%;
}


/*
input[type=submit] {
	background-color: #ccc;
	height: 200px;
}*/

input.text, input.large, span.large   { padding:5px; }
textarea      { padding:5px; }

input[type=checkbox], input[type=radio],
input.checkbox, input.radio {
    position:relative; top:.25em;
}

input[readonly="readonly"] {
    background-color: lightgrey;
}

form.inline { line-height:3; }
form.inline p { margin-bottom:0; }


/* Success, notice and error boxes
-------------------------------------------------------------- */

.error,
.notice,
.success    { padding: .8em; margin-bottom: 1em; border: 2px solid #ddd; }
.error      { background: #FBE3E4; color: #8a1f11; border-color: #FBC2C4; }
.notice     { background: #FFF6BF; color: #514721; border-color: #FFD324; }
.success    { background: #E6EFC2; color: #264409; border-color: #C6D880; }
.error a    { color: #8a1f11; }
.notice a   { color: #514721; }
.success a  { color: #264409; }



/* BUTTONS
-------------------------------------------------------------- */

/*
select, input, textarea {
	-moz-border-radius: 1px;
	border-radius: 1px;
	-moz-box-shadow: 5px 5px 5px #ccc;
  	-webkit-box-shadow: 5px 5px 5px #ccc;
  	box-shadow: 5px 5px 5px #ccc;
}
*/


/* FOOTER
-------------------------------------------------------------- */

/* Fix for footer creep
----------------------------------------------------------*/




/* WIZARD
-------------------------------------------------------------- */

/* = STEPS CONTAINER
----------------------------*/
.wizard-steps {
    margin:0px 10px 0px 10px;
    padding:0px;
    position: relative;
    clear:both;
    font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: bold;
}
.wizard-steps div {
    position:relative;
}
/* = STEP NUMBERS
----------------------------*/
.wizard-steps span {
    display: block;
    float: left;
    font-size: 10px;
    text-align:center;
    width:15px;
    margin: 2px 5px 0px 0px;
    line-height:15px;
    color: #ccc;
    background: #FFF;
    border: 2px solid #CCC;
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    border-radius:10px;
}
/* = DEFAULT STEPS
----------------------------*/
.wizard-steps a {
    position:relative;
    display:block;
    width:auto;
    height:24px;
    margin-right: 18px;
    padding:0px 10px 0px 10px;
    float: left;
    font-size:11px;
    line-height:24px;
    color:#666;
    background: #F0EEE3;
    text-decoration:none;
    text-shadow:1px 1px 1px rgba(255,255,255, 0.8);
}
.wizard-steps a:before {
    width:0px;
    height:0px;
    border-top: 12px solid #F0EEE3;
    border-bottom: 12px solid #F0EEE3;
    border-left:12px solid transparent;
    position: absolute;
    content: "";
    top: 0px;
    left: -12px;
}
.wizard-steps a:after {
    width: 0;
    height: 0;
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
    border-left:12px solid #F0EEE3;
    position: absolute;
    content: "";
    top: 0px;
    right: -12px;
}

/* = COMPLETED STEPS
----------------------------*/

.wizard-steps .completed-step a {
    color:#163038;
    background: #A3C1C9;
}
.wizard-steps .completed-step a:before {
    border-top: 12px solid #A3C1C9;
    border-bottom: 12px solid #A3C1C9;
}
.wizard-steps .completed-step a:after {
    border-left: 12px solid #A3C1C9;
}
.wizard-steps .completed-step span {
    border: 2px solid #163038;
    color: #163038;
    text-shadow:none;
}
/* = ACTIVE STEPS
----------------------------*/
.wizard-steps .active-step a {
    color:#A3C1C9;
    background: #163038;
    text-shadow:1px 1px 1px rgba(0,0,0, 0.8);
}
.wizard-steps .active-step a:before {
    border-top: 12px solid #163038;
    border-bottom: 12px solid #163038;
}
.wizard-steps .active-step a:after {
    border-left: 12px solid #163038;
}
.wizard-steps .active-step span {
    color: #163038;
    -webkit-box-shadow:0px 0px 2px rgba(0,0,0, 0.8);
    -moz-box-shadow:0px 0px 2px rgba(0,0,0, 0.8);
    box-shadow:0px 0px 2px rgba(0,0,0, 0.8);
    text-shadow:none;
    border: 2px solid #A3C1C9;
}
/* = HOVER STATES
----------------------------*/
.wizard-steps .completed-step:hover a, .wizard-steps .active-step:hover a {
    color:#fff;
    background: #8F061E;
    text-shadow:1px 1px 1px rgba(0,0,0, 0.8);
}
.wizard-steps .completed-step:hover span, .wizard-steps .active-step:hover span {
    color:#8F061E;
}
.wizard-steps .completed-step:hover a:before, .wizard-steps .active-step:hover a:before {
    border-top: 12px solid #8F061E;
    border-bottom: 12px solid #8F061E;
}
.wizard-steps .completed-step:hover a:after, .wizard-steps .active-step:hover a:after {
    border-left: 12px solid #8F061E;
}


/* Custom css
-------------------------------------------------------------*/
/* used to remove the 10px margin that yui adds by default */
#doc3 {
    margin:auto;
}
label.error {
    display: block;
}
.hidden {
    display: none;
}
.ui-state-highlight {
    font-weight: bold;
    color: black;
}
.buttons {
    padding-top: 10px;
    /*border-top: 3px solid lightgrey;*/
    text-align: center;
    padding: 10px;
}

button.action-btn, button.previous, button.next {

}

.sorthandle {
    background-image:url(../images/grippy.png);
    cursor:move;
    display:inline-block;
    height:100%;
    margin-bottom:-6px;
    min-height:24px;
    width:8px;
}



.button {
    -moz-border-radius: 5px;
    border-radius: 5px;
    padding: 2px;
    margin: 5px;
    border: 1px solid #aaa;
}
.category-selector {
    padding: 1px;

}

.action-btn {

}
#banner {
    padding: 0px;
}
.black-top {
    border-top: 3px solid lightgrey;
}
.capitalize {
    text-transform: capitalize;
}
.uppercase {
    text-transform: uppercase;
}

.red {
    background-color: red;
    color: white;
    height: 2em;
}
.blue {
    background-color: blue;
    color: white;
    height: 2em;
}

/*
.edit {
    background-image: url('/images/icons/silk/pencil.png') no-repeat right center;
}
*/
.box {
    border: 1px solid lightgrey;
    margin: 5px;
    background-color: #fcfcfc;
    padding: 0px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}
.box-barcode, .box-status {
    padding:5px;
    border: 1px solid lightgrey;
    margin: 0px;
    background-color: #fcfcfc;
    -moz-border-radius: 3px;
    border-radius: 3px;
}
.box-white {
    border: 1px solid lightgrey;
    margin: 1px;
    background-color: white;
    padding: 7px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

.box-slim {
    border: 1px solid lightgrey;
    margin: 5px;
    padding: 10px;
    background-color: #f5f5f5;
    text-align:center;
}

.wizard-box {
    border: 0px solid lightgrey;
    margin: 1px;
    background-color: white;
    padding: 7px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    height: 25px;
}


.padded {
    padding: 25px;
}
.smpad {
    padding: 5px;
}

.hidden {
    display: none;
}

.total {
    /*background-color: #f7f7f7;*/
}
.start {
    border-right: 3px solid lightgrey;
}
.end {
    border-left: 3px solid lightgrey;
}
.border-right {
    border-right: 1px solid lightgrey;
}
.border-left {
    border-left: 1px solid lightgrey;
}
.border-top {
    border-top: 1px solid lightgrey;
}

.credit { color: green; }
.debit {
    color: red;
}
.discrepancy { color:red; }
.debit:before {
    content: '(';
}
.debit:after {
    content: ')';
}

.transaction-type-debit { }
.transaction-type-credit { }


.nowrap {
    white-space: nowrap;
}

/* Action Menu Items */
.actions .action-menu-info a:hover {
    cursor: pointer;
}
.actions .action-menu-item {
    border: 0px solid black;
    margin: 0px;
    padding: 0px;
}
.actions .action-menu-item a {
    display: block;
    padding: 5px;
    font-weight: normal;
    color: #666;
    font-size: 0.9em;
    font: 11px "lucida grande", verdana, arial, helvetica, sans-serif;
    line-height: 12px;
    text-align: left;
}
.actions .action-menu-item a:hover {
    display: block;
    background-color: lightgrey;
    padding: 5px;
    text-decoration: none;
}
.actions .download-subbuttons button {
    all: unset;
    display: block;
    padding: 5px;
    font-weight: normal;
    color: #666;
    font-size: 0.9em;
    font: 11px "lucida grande", verdana, arial, helvetica, sans-serif;
    line-height: 12px;
    text-align: left;
}

.actions .download-subbuttons:hover {
    display: block;
    background-color: lightgrey;
    text-decoration: none;
}

/* Flow Header */
.currentState { font-weight: bold; background-color: #eee; color: blue; }
.circle {
    display:inline;
    padding-left:4px;
    padding-right:4px;
    color: white;
    background: lightgrey;
    -moz-border-radius:100px;
    -webkit-border-radius:100px;
}
.count {
    display: block;
    float: left;
    font-size: 10px;
    font-weight: bold;
    text-align:center;
    width:25px;
    margin: 2px 5px 0px 0px;
    line-height:25px;
    color: #ccc;
    background: #FFF;
    border: 2px solid #CCC;
    -webkit-border-radius:20px;
    -moz-border-radius:20px;
    border-radius:20px;
    box-sizing: revert;
}
.count.active {
    background-color: #f3961c;
    color: white;
}


.circle a {
    font-size:9px;
    text-decoration:none;
    color: white;
    position:relative; top:-2px;
}
.currentState > .circle { background-color: blue; }
.currentState > .circle a { font-weight: bold; }

.numberCircle {
    -webkit-border-radius: 999px;
    -moz-border-radius: 999px;
    border-radius: 999px;
    width: 12px;
    height: 12px;
    padding: 4px;
    background: lightyellow;
    border: 1px solid #666;
    color: #666;
    text-align: center;

    font: 10px Arial, sans-serif
}


/* Product Details box */
/*#product-details-box { width: 260px;}*/
.summary {
    padding: 15px 15px 15px 15px;
    background-color: #f5f5f5;
    border-bottom: 1px solid #aaa;
}
.summary-actions {
    padding: 1px;

}

#product-details-box span.name {   }
#product-details-box span.value { font-size: 1.0em; }
#product-details-box th { color: lightgrey; }
#product-details-box fieldset table td { padding: 6px; }
.product-details { height: 45px; line-height: 2px; }
/*
.product-details .label { width: 80px; }

.product-details .value { width: 150px; }
*/
.product-details .button { width: 20px; }
/* Text Alignment classes */
.right { text-align: right; }
.left { text-align: left; }
.center { text-align: center; }

/* Vertical Alignment classes */
.top { vertical-align: top; }
.bottom { vertical-align: bottom; }
.middle { vertical-align: middle; }

/* temporarily hide the nav bar until we figure out whether we want to keep it or not */
.nav { display: none; }

#product-suggest-wrapper > ul.ui-autocomplete {
    width: auto !important;
}

#product-suggest-wrapper > ul > li.ui-menu-item {
    height: auto;
    font-weight: normal;
}

li.ui-menu-item {
    text-align: left;
    font-weight: bold;
}

h3 {
    color: #666;
    font-size: 1.2em;
    vertical-align: middle;
    padding: 5px 0px 2px;
    margin: 0px;
    margin-bottom: 5px;
    /*color: #008000;*//*green */
}
h3.ui-state-active { background-color: #f7f7f7; }  /* #F8F7EF */

.body {
    /*margin-right: 5px;*/
    /*padding: 0px 0 10px 0;*/

}

/* Added to fix an issue with being able to select actions from the action menu at the bottom of pages */
/* Fixed the action menu (when menu runs off page). */

body {
    text-align: left;
    padding-bottom: 50px;
    font-family: 'Inter', sans-serif !important;
}


#content {
    /*padding: 5px 35px 5px 5px;*/
    padding: 0px;
}

#dashboard {
    margin: 0px;
}
#productDetails {
    width: 250px;
}
.actionsMenu {
    text-align: left;
    padding: 5px;
}
.actionsMenu a {
    padding-left: 2px;
}
.actionsMenu ul li {
    display: inline;
    padding-right: 15px;
}

.widget-large { border: 1px solid lightgrey; margin: 5px; }
.widget-small { border: 1px solid lightgrey;  margin: 5px; }
.widget-header { background-color: #FFF; margin: 1px; font-weight: bold; font-size: 110%;}
.widget-content { margin: 5px; }
.widget-content tr { height: 30px; }
.widget-content td,th { vertical-align: middle; }
img {
    vertical-align: middle;
}

a:hover {
    /*font-weight: bold;*/

}
.fade {
    color: #aaa;
}
.fade:not(.show) {
    opacity: 1;
}
.empty {
    line-height: 100px;
    color: #aaa;
}

#chooseLocation {
    position: absolute;
    width: 50%;
    top: 10%;
    left: 50%;
    margin-left: -25%;
}
#chooseLocationSelect {
    max-height: 400px;
    margin-bottom: 5px
}

#loginForm {
    width:500px;
    position: absolute;
    top: 20%;
    left: 50%;
    margin-left: -250px;
}

#loginContainer {
    margin: 50px auto;
    width: 640px;
}

#loginFormBox {
    border: 1px solid lightgrey;
    padding: 20px;
}

.loginField {
    font-weight: bold;

}

#signupForm {
    width:700px;
    position: absolute;
    top: 5%;
    left: 50%;
    margin-left: -350px;
}


label, input, td, th {
    /*font-size: 10pt;*/
}

th {
    border-top: 0px;
    border-bottom: 3px solid lightgrey;
    /*background-color: white;*/
}

th.no-border-bottom {
    border-bottom: 0px;
}

tfoot th, tfoot td {
    border-top: 2px solid lightgrey;
    border-bottom: 0px;
}


.toggle-button {
    cursor: hand;
}
.toggleable {
    display: none;
}


/* Shipment summary add padding around To/From addresses */
#summary td {
    padding: 15px;
}

.tab {
    padding: 15px;
}
.tabOuter {

    background-color: #eee;
}

/* IMPORTANT: not sure why this works, but mis-aligns the menu */


table.withoutBorder {
    border: 0px solid #ccc;
    width: 100%
}

table.container {
    width: 100%;
}

table#listOutgoing {
    border: 0px;
}

table#listOutgoing td {
    border: 0px;
}

table#listOutgoing th {
}

table.small {
    /*width: 0%;*/
    display: inline;

}


.five {
    width: 5%;
}
.tenth {
    width: 10%;
}
.quarter {
    width: 25%;
}
.full {
    width: 100%;
}
.right {
    text-align: right;
}
.left {
    text-align: left;
}
.center {
    text-align: center;
}

.dialog td {
    padding: 10px;
}

.small {
    font-size:.7em;
}

.large {
    font-size:1.1em;
}

.number { font-size: 1.1em }

.menu {
    padding: 0px;
    border-right: 1px solid #eee;
    border-bottom: 1px solid #eee;
    border-top: 1px solid #eee;
}
.menu .menu-heading {
    font-size: 1.25em;
    line-height: 2em;
    vertical-align: middle;
    padding: 0px 0px 2px 25px;
    display: block;
    background-color: #fafafa /*#F8F7EF*/;
}
.menu .menu-subheading {
    vertical-align: middle;
    padding: 2px 0px 2px 15px;
    display: block;
    font-weight: bold;
}
.menu .menu-section {
    padding-top: 5px;
    padding-right: 0px;
    padding-bottom: 0px;
}
.menu .menu-section ul {
    padding-top: 0px;
    padding-bottom: 5px;
}
input.button {
    /*vertical-align: middle;*/
    /*border: 0px;*/
    /*margin: 0px;*/
}

.menu .menu-section ul li {
    /*display: block;
   padding: 0px 0px 2px 0px;
    cursor: pointer;*/
}
.menu .menuSection a {
    font-weight: normal;
    text-decoration: none;
}
.menu .menuSection a:hover {
    text-decoration: underline;
    font-weight: normal;
}
.menu .menuSection a:visited {
    text-decoration: none;
    font-weight: normal;
}
.nav {
    margin: 0px;
    margin-bottom: 1px;
    padding: 10px;
    background-color: #F7F7F7;
}
.buttonBar {
    padding: 10px;
    text-align: left;
}

.button-bar {
    padding: 10px;
    text-align: left;
}

#resultSummary {
    font-size: 9pt;
}
label {
    margin-right: 10px;
    color: #666;
    font-weight: bold;
}
label.required {
    color: red;
}
label.optional {
    color: #AAA;
}
label.clear {
    display: block;
}

/* TODO figure out what this was meant for */
h2 {
    top: 0;
    position: relative;
    padding-left: 10px;
    font-size: 15px;
    font-weight: 400;
    color: #555;
    line-height: 18px;
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.5);




    position: relative;
    height: 40px;
    line-height: 40px;
    background: #E9E9E9;
    background: -moz-linear-gradient(top, #fafafa 0%, #e9e9e9 100%);
    /* FF3.6+ */

    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fafafa), color-stop(100%, #e9e9e9));
    /* Chrome,Safari4+ */

    background: -webkit-linear-gradient(top, #fafafa 0%, #e9e9e9 100%);
    /* Chrome10+,Safari5.1+ */

    background: -o-linear-gradient(top, #fafafa 0%, #e9e9e9 100%);
    /* Opera11.10+ */

    background: -ms-linear-gradient(top, #fafafa 0%, #e9e9e9 100%);
    /* IE10+ */

    background: linear-gradient(top, #fafafa 0%, #e9e9e9 100%);
    /* W3C */

    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FAFAFA', endColorstr='#E9E9E9');
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#FAFAFA', endColorstr='#E9E9E9')";
    border: 1px solid #D5D5D5;

    -webkit-background-clip: padding-box;
}


.category-header {
    font-size: 1.2em;
    text-align: left;
    background-color: #f7f7f7;
    border-top: 1px solid lightgrey;
    vertical-align: middle;
}


/*
tr.hasRelated {
	border-top: 4px solid #E5ECF9;
	border-left: 4px solid #E5ECF9;
	border-right: 4px solid #E5ECF9;
	border-bottom:4px solid #E5ECF9;
}
*/

tr.hideRelated {
}

tr.showRelated {
    background-color: #E5ECF9;
    border-top: 4px solid #E5ECF9;
    border-left: 4px solid #E5ECF9;
    border-right: 4px solid #E5ECF9;
    border-bottom:4px solid #E5ECF9;
}

tr.hideRelated td { }
tr.showRelated td { font-weight: bold;}


tr.expanded {
    background-color: #E5ECF9;
}

tr.isRelated {
    border-left: 4px solid #E5ECF9;
    border-right: 4px solid #E5ECF9;
}


tr.lastRelated {
    border-bottom-color:#E5ECF9;
    border-bottom-style:solid;
    border-bottom-width:4px;
}



h4 {
    font-size: 1.2em;
    padding: 10px;
}

/*
h2 {
	margin-top: 10px;
	margin-bottom: 5px;
	font-size: 1.2em;
	border-bottom: 1px solid #ddd;
	border-top: 1px solid #ddd;
	background-color: #EBF1F7;
	font-size: 135%;
	line-height: 2;
	padding: 0 0 0 10px;
}
*/

/*
.chzn-select, .chzn-select-deselect { width: 95%; }
*/
.chzn-container {
    width: 100% !important;
}
.logo {
    font-size: 2em;
    font-weight: bold;
    line-height: 30px;
}
.logo a, .logo a:hover, .logo a:visited {
    color: #666;
    text-decoration:none;
    vertical-align:middle;
}

.logo-label {
    padding:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    color: white;
    background-color: red;
}

.title {
    font-size: 1.5em;
    line-height: 1.6em;
    font-weight: bold;
    color: #666;
}

.buttons {
    margin-top: 1px;
}

/* TODO figure out if we need to keep this */
#pageBody {
    margin-left: 280px;
    margin-right: 20px;
    padding: 1px;
}

#pageTitle {
    /*border-top: 1px solid lightgrey;
    background-color: #f0f0f0;
    background-color: #525D76;*/
    border-bottom: 1px dotted #525D76;
    /*margin-bottom: 10px;

    padding: 5px;
    color: white;
    */
}

.page-header {
    margin: 10px 0px 0px 25px;
    vertical-align: middle;

}

.page-actions {
    vertical-align: middle;
    float: left;
    width: 55px;
}

.page-title {
    margin-left: 15px;
}


.section {
    /*
    padding-left: 10px;
    padding-bottom: 10px; */
}



/* stole from blueprint screen.css */
hr {background:#ddd;color:#ddd;clear:both;float:none;width:100%;height:.1em;margin:0 0 0em 0em;border:none;}
hr.space {background:#fff;color:#fff;}


/* Login information in banner
-------------------------------------------------------------*/
/* 	NOTE: I cannot get the login info to move down to the "bottom",
	so I was using absolute positioning at one point (might be gone now)  */

#hd {
    vertical-align: bottom;
    padding: 5px;
    margin: 0px;
    /*
    border-bottom: 1px solid lightgrey;
    background-color: white;
    */
}


ul.treeList {
    list-style-type: square;
}
ul.treeList li ul li {
    padding-left: 15px;
}

#loggedIn {
    text-align: right;
    margin: 0px;
    font-size: 1.2em;
    border: 0px solid #000;
    /*padding: 5px 10px 10px 15px;*/
}


#loggedIn ul {
    list-style:none;
    margin: 0;
    padding: 0;
}
#loggedIn ul li  {
    display: inline;
    margin: 0 0px;
}

.pageTitle {
    margin:  10px 0 0 15px;
}

/* breadcrumb
-------------------------------------------------------------*/
.breadcrumb {
    font: 11px Arial, Helvetica, sans-serif;
    background-image:url('../images/bc_bg.png');
    background-repeat:repeat-x;
    height:30px;
    line-height:30px;
    color:#9b9b9b;
    border-bottom:solid 1px #cacaca;
    width:100%;
    overflow:hidden;
    margin:0px;
    padding:0px;
}

.breadcrumb li {
    list-style-type:none;
    float:left;
    padding-left:10px;
}

.breadcrumb a {
    height:30px;
    display:block;
    background-image:url('../images/bc_separator.png');
    background-repeat:no-repeat;
    background-position:right;
    padding-right: 15px;
    text-decoration: none;
    color:#454545;
}

.home {
    border: none;
    margin: 8px 0px;
}

.breadcrumb a:hover {
    /*color:#35acc5;*/
    text-decoration: underline;
}


/* Bubble with an isoceles triangle
------------------------------------------ */

.triangle-isosceles {
    position:relative;
    padding:15px;
    margin:1em 0 3em;
    color:white;
    background:#f3961c;

    /* css3 */
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px;
    background:-moz-linear-gradient(top, #f9d835, #f3961c);
    background:linear-gradient(top, #f9d835, #f3961c);
}

/* creates triangle */
.triangle-isosceles:after {
    content:"";
    display:block; /* reduce the damage in FF3.0 */
    position:absolute;
    bottom:-15px;
    left:50px;
    width:0;
    border-width:15px 15px 0;
    border-style:solid;
    border-color:#f3961c transparent;
}

/* megamenu
-------------------------------------------------------------*/
.megamenu a:hover {

}

ul.megamenu a.mm-item-link:link, ul.megamenu a.mm-item-link:visited {
    padding: 7px 15px;
}

ul.megamenu {
    padding: 0;
    margin: 0;
}

.mm-item-content {
    min-width: 300px;
}

.mm-content-section {
    float: left;
    min-width: 100px;
    padding: 10px;
}

.mm-content-base { padding: 0px; margin: 0px; }
.mm-menu-item a,
.mm-menu-item a:visited {
    text-decoration: none;
    padding: 7px;
    display: block;
    color: #333;
}
.mm-menu-item:hover {
    background-color: lightgrey;
}



/* not sure if these are needed any longer, so we should look into getting rid of these
-------------------------------------------------------------*/
/*
#footer {
    position:absolute;
    vertical-align: middle;
    border-top: 1px solid #aaa;
    bottom: 0px;
    margin-top: 150px;
    padding-top: 5px;
    width:100%;
    text-align: center;
    height: 30px;
    background: #fff;
}
*/
#footer {
    position: relative;
    margin-top: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 12px;
    line-height: 1.5;
    color: #777;
    border-top: 1px solid #eee;
}

#header {
    vertical-align: middle;
    padding: 2px;

}




/*
-------------------------------------------------------------*/

div.message {
    /*font-size: 125%*/
}

div.errors {
    margin: 10px 0 5px 0;
    padding: 5px 0 5px 0;
    /*font-size: 125%*/
}



div#dashboard li {
    margin-top: 10px;
}


.listcontainer {
    margin-bottom: 1em;
    /*overflow: hidden;*/

}

.list {
    list-style-type: none;
    /*
    margin: 10px;
    padding: 10px;*/
}

.list li {
    border-left: 1px solid #000;
    float: left;
    padding: 5px 10px 5px 10px;
    /*margin: 0 .5em 0 -.5em;*/
    /*padding: 0 .75em 0 .75em;*/
}

.list li.first {
    border-left: 0px;
}

/*
.list .active {
    font-weight: bold;
    background-color: #ccc;
}
*/
.list li {
    background-color: #eee;
}


.indent {
    text-indent: 15px;
}

.prop-multi {
    padding-left: 100px;
}

.prop {
    border-top: 1px dotted #ccc;
}

.prop .first {
    border-top: 0px;
}

.prop .name {
    width: 25%;
    background-color: #F7F7F7;
    text-align: right;
}

.prop .label {
    width: 45%;
}

.prop .value {
    text-align:left;
    /*width: 30%;*/
    background-color: white;
    vertical-align: top;
    line-height: 1.5em;
}
.active	{ color: green; }
.inactive { color: red; }

label { display: inline; text-decoration: none;}
label.none { display: block; text-decoration: none; }
label.block { display: block;}
fieldset .prop { margin: 10px; }
.radio { padding-left: 10px; }
.progressbar { width: 250px; height: 20px; }
#progressbar {  padding: 10px; margin: 10px; }
#progressbar .step { border: 1px solid #aaa; background-color: whitesmoke; padding: 10px;}
#progressbar .caption { width: 50px; margin: 0 auto; }​
.step.selected { font-weight: bold; text-decoration: underline; background-color: #f7f7f7 /*#F8F7EF*/; }
span.right { float: left; }
span.left { width: 10%;  float: left; text-align: center; }

.actions { cursor: pointer; position: absolute; z-index:999; background-color: #f5f5f5; border: 1px solid lightgrey; padding: 0px; display: none; min-width: 200px; }
.action-menu { cursor: pointer; }
.action-menu { padding: 0; }
.action-menu-root { margin: 0px; }
.action-menu-item { margin: 0px; padding: 3px; }

.document-list-item { margin: 1px; }

.details { cursor: pointer; position: absolute; z-index:999; background-color: white; border: 1px solid lightgrey; padding: 10px; display: none; }

.selected {
    font-weight: bold;
}
select{ padding: 3px; }
.tabSelected {
    text-align: center;
    background-color: white;
    border: 1px solid black;
    border-bottom: hidden;
}
.tabDefault {
    text-align: center;
    background-color: #f0f0f0;
    border: 1px solid black;
    border-bottom: 1px solid black;
    border-top: 1px solid black;
    border-right: 1px solid black;
    border-left: 1px solid black;
}
.tabSpacer {
    width: 3px;
    border-top: 0px;
    border-bottom: 1px solid black;
}

.verticalTabSelected {
    text-align: left;
    background-color: white;
    border: 1px solid #CCC;
}

.verticalTabDefault {
    text-align: left;
    background-color: #f7f7f7;
    border: 1px solid #CCC;
}

.data td, .data th {
    vertical-align: middle;
}
.data th {
    border: 0px;
}
.categoryBreadcrumb {
    font-weight: bold;
    padding: 10px;
    text-align: left;
}
.clear-all {
    padding: 5px;
    margin-left: 20px;
}

.filterRow {
    font-size: 13px;
    padding: 5px;
    margin: 5px;
    white-space:nowrap;
    background-color: #F7F7F7; /*#D8D8D8*/
}
.filterTab {
    border: 1px solid lightgrey;
    padding: 5px;
    margin-left:5px;
}

.filterTab a {
    padding: 0 2px 0 2px;
    margin: 0px;
}


.paddingRow {
    padding:2px;
    border-top:none; border-right:none; border-left:none;
    background-color:white;
}
.filterSelected {
    background-color:white;
    border-bottom:none;
}
.checked {
    background-color: #FFCC66;
}
.checkbox {
    margin: 5px;
}
.scrollTable {
    border-collapse:collapse;
}
.searchable {
    font-size: 16px;

}

img.photo {
    width: 36px;
    height: 36px;
}
img.photo_medium {
    width: 6em;
    height: 7.5em;
}
img.photo_small {
    width: 4em;
    height: 5em;
}

img.photo_tiny {
    width: 16px;
    height: 16px;
}

.readonly {
    color: grey;
}

.template-image {
    text-align: center
}

.template-name {
    text-align: center;
    font-size: 13px;
}


.template-form div {
    padding: 5px;
}

.template-form label {
    display: inline-block;
    width: 150px;
    text-align: right;
}

/* =============================================================================
   jquery tabs
   ========================================================================== */

/**
 * jquery tabs

.ui-tabs { position: relative; padding: .2em; zoom: 1; }
.ui-tabs .ui-tabs-nav { margin: 0; padding: .2em .2em 0; }
.ui-tabs .ui-tabs-nav li { list-style: none; float: left; position: relative; top: 1px; margin: 0 .2em 1px 0; border-bottom: 0 !important; padding: 0; white-space: nowrap; }
.ui-tabs .ui-tabs-nav li a { float: left; padding: .5em 1em; text-decoration: none; }
.ui-tabs .ui-tabs-nav li.ui-tabs-selected { margin-bottom: 0; padding-bottom: 1px; }
.ui-tabs .ui-tabs-nav li.ui-tabs-selected a, .ui-tabs .ui-tabs-nav li.ui-state-disabled a, .ui-tabs .ui-tabs-nav li.ui-state-processing a { cursor: text; }
.ui-tabs .ui-tabs-nav li a, .ui-tabs.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-selected a { cursor: pointer; }
.ui-tabs .ui-tabs-panel { display: block; border-width: 0; padding: 1em 1.4em; background: none; }
.ui-tabs .ui-tabs-hide { display: none !important; }
.ui-tabs .ui-tabs-panel { padding: 0; }

 */

.ui-tabs .ui-tabs-panel { display: block; border-width: 0; padding: 0em 0em; background: none; }

#transactionLogTabs {
    background: transparent;
    border: none;
}
#transactionLogTabs > .ui-widget-header {
    background: transparent;
    border: none;
    border-bottom: 1px solid #c0c0c0;
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;
    border-radius: 0px;
}
/*
#transactionLogTabs .ui-state-default {
	background: transparent;
	border: none;
}
#transactionLogTabs .ui-state-active {
	background: transparent url(../images/ui-tabs-arrow.png) no-repeat bottom center;
	border: none;
}
*/
.tabs .ui-state-default a {
    color: #c0c0c0;
}
.tabs .ui-state-active a {
    color: #459E00;
}

.tabs {
    background: transparent;
    border: none;
}


.tabs > .ui-widget-header {
    background: transparent;
    border: none;
    border-bottom: 1px solid #c0c0c0;
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;
    border-radius: 0px;
}


/*
.tabs .ui-state-default {
	background: transparent;
	border: none;
}
.tabs .ui-state-active {
	background: transparent url(../images/ui-tabs-arrow.png) no-repeat bottom center;
	border: none;
}
*/
.tabs .ui-state-default a {
    color: #c0c0c0;
}
.tabs .ui-state-active a {
    color: #459E00;

}

.tabs .list, .tabs .tableScroll {
    border-bottom: 1px solid lightgrey;

}

.banner-menu,
.banner-menu button,
.banner-menu input {
    height: 30px;
}

.global-search {
    right: 0;
    top: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    background:#FFFFFF;
    font-size: 16px;
    width: clamp(230px, 60vw, 1000px);
    overflow: hidden;
    border: solid 1px var(--blue-500);
    outline: rgba(34, 100, 229, 0.15) outset 3px !important;
    transition: outline-width ease-in-out 0.1s;
    border-radius: 3px;
    padding: 5px 12px;
}
.global-search.global-search--hidden {
    display: none !important;
}

.global-search .global-search-input {
    flex-grow: 1;
    border: none;
    margin: 0 4px;
    font-family: 'Inter', sans-serif;
}

.global-search  .global-search-input:focus {
    outline: none;
}
.global-search  .global-search-input::placeholder {
    color: var(--gray-401);
}

.global-search .global-search-close {
    font-size: 24px;
}

.global-search-results {
    max-height: 300px;
    width: clamp(230px, 60vw, 1000px) !important;
    overflow-y: auto;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.15), 2px 2px 4px rgba(0, 0, 0, 0.15);
    border-radius: 0 0 4px 4px;
    margin: 0;
    border: none;
    padding: 12px;
}
.global-search-static-results {
    width: 90% !important;
}

.global-search-results .ui-menu-item {
    font-weight: unset;
}
.global-search-results .ui-menu-item a {
    padding: 8px 12px;
    cursor: pointer;
    margin: 0;
    color: var(--blue-700);
}

.global-search-results .ui-menu-item a.ui-state-hover {
    background: var(--blue-100);
    margin: 0;
    border: none;
}


.tag {
    border: 1px solid #a5d24a;
    -moz-border-radius:2px;
    -webkit-border-radius:2px;
    display: block;
    float: left;
    padding: 5px;
    white-space: nowrap;
    text-wrap:none;
    text-decoration:none;
    background: #cde69c;
    color: #638421;
    margin-right: 5px;
    margin-bottom:5px;
    font-family: helvetica;
    font-size:13px;
}
.tag a { font-weight: normal; color: #82ad2b; text-decoration:none; font-size: 11px; text-wrap: none; }
.tag-danger { color: #a94442; background-color: #f2dede; border-color: #ebccd1; }
.tag-success { color: #3c763d; background-color: #dff0d8; border-color: #d6e9c6; }
.tag-info { color: #31708f; background-color: #d9edf7; border-color: #bce8f1; }
.tag-warning { color: #8a6d3b; background-color: #fcf8e3; border-color: #faebcc; }



/*span.lotNumber { 1px solid #a5d24a; -moz-border-radius:2px; -webkit-border-radius:2px; display: block; color: black; font-weight: bold; margin-right: 5px; margin-bottom:5px;font-family: helvetica;  font-size:13px; }*/
.lotNumber { font-family: ui-monospace, monospace, sans-serif; vertical-align: middle; text-transform: uppercase; }
.binLocation { font-family: ui-monospace, monospace, sans-serif; vertical-align: middle; text-transform: uppercase; }
.barcode { font-family: ui-monospace, monospace, sans-serif; vertical-align: middle; text-transform: uppercase; letter-spacing: .1em; font-weight: normal; font-size: 11px; line-height: 20px}
.barcode-data { text-align: center; }
.genericName { text-transform: uppercase; }
#more { background-color: #ddd; padding: 10px; }

/*generic float*/
div.left{
    float: left;
}
div.right{
    float: right;
}
div.clear {
    clear: both;
}

/* =============================================================================
    jquery ui customization
   ========================================================================== */

.ui-buttonset { margin: 7px; }
.ui-buttonset .ui-button { margin-left: 1px; margin-right: -.3px; padding-left: 5px; padding-right: 5px; }


/* =============================================================================
   requisition.css
   ========================================================================== */

#requisition-header{
    /*padding: 0.5em;
    margin-left: 0.5em;
    margin-bottom: 2.0em*/
}

#requisition-header .title {
    font-size: 1.5em;
    font-weight: bold;
    line-height: 1em;
    float: left;
}

#requisition-header .status, #requisition-header .time-stamp{
    float: right;
    font-size: 1.0em;
    margin-left: 1.5em;
}

.ui-autocomplete { position: absolute; cursor: default;z-index:9999 !important;}

/*requisition item search auto complete*/
.ui-autocomplete span.product-group{
    font-style: italic;
}

.list-header {
    padding-left: 10px;

}


.ui_datepicker{
    background-image: url(../images/icons/silk/calendar.png);
    background-repeat: no-repeat;
    background-position: right;
}



/*fix ui-validation error message styling issue*/
.ui-validation label.error{
    display: inline;
    color: #EA5200;
    border: 0px;
    background: url(../images/icons/silk/exclamation.png) no-repeat center left;
    padding-left: 16px;
    padding-bottom: 2px;
    padding-top: 2px;
    font-weight: bold;
}

.ui-validation-items label.error{
    display: block;
}

.ui-validation input.error, .ui-validation  select.error{
    padding: 2px;
    background-color: white;
    border: 2px solid #EA5200;
}


/*process requisition item */
.ui-accordion .ui-accordion-content { padding: 0; margin: 0; }
.accordion-header {
    padding: 10px;
    background: #FCFCFC;
    color: #1C94C4;
}

.accordion-header.ui-state-active {
    background: #0099FF;
    color: white;
}


.accordion-header .row-index {
    width: 5%;
    float: left;
}

.accordion-header .product-name {
    width: 25%;
    float: left;
}



.accordion-header .status {
    width: 25%;
    float: right;
}

.accordion-header .quantity {
    width: 15%;
    float: left;
}

.accordion-header .quantityPicked {
    width: 15%;
    float: left;
}

.accordion-header .quantityRemaining {
    width: 15%;
    float: left;
}

/*
.requisition-status {
    width: 16px;
    height: 16px;
}
*/

.substitution {
    width: 16px;
    height: 16px;
}
.substitution.ok {
    background: url(../images/icons/silk/arrow_switch.png) no-repeat;
}


.requisition-status.Complete {
    background: url(../images/icons/silk/flag_green.png) no-repeat;
}

.requisition-status.Incomplete {
    background: url(../images/icons/silk/flag_red.png) no-repeat;
}

.requisition-status.PartiallyComplete {
    background: url(../images/icons/silk/flag_yellow.png) no-repeat;
}

.accordion-content {
    text-align: center;
}

.accordion-content .requisitionItemPicklist {
    /*width: 80%;*/
    padding: 5px;
    /*border: 1px solid #eeeeee;*/
    margin: 5px;
}

.accordion-content  .picklist-field{
    margin-top: 3px;
}

.accordion-content .picklist-header {
    background-color: #BEE7F7;
    padding: 5px;
    font-weight: bold;
}

.accordion-content .product-name{
    width: 30%;
    float: left;
}
.accordion-content .lot{
    width: 15%;
    float: left;
}

.accordion-content .expiration-date{
    width: 15%;
    float: left;
}

.accordion-content .quantity-onhand{
    width: 15%;
    float: left;
}

.accordion-content .quantity-picked{
    width: 25%;
    float: left;
}

.accordion-content .quantity-picked input{
    text-align: center;
    float: left;
}

#picklist{
    width: 100%;
}

#picked-item-list {
    margin-top: 2em;
}

#requisition-status-key{
    margin-top: 2em;
}

#requisition-status-key div {
    margin: 10px;
}

#requisitionForm .footer{
    margin: 10px;
}

.wide {
    width: 100%;
}
fieldset legend{
    padding: 5px;
}

.picking-item.odd{
    background: #eeeeee;
}

.picking-item{
    margin: 5px;
    vertical-align: middle;
}

blockquote {
    /*font: 14px/22px normal helvetica, sans-serif;*/
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 10px;
    padding-left: 15px;
    border-left: 3px solid #ccc;
}

.modified { color: red; }
.approved { color: green; }
.beta { background-color: #ffd351; display: inline-block; padding: 2px 5px 2px 5px; text-transform: uppercase; border-radius: 3px; color: #594300; font-weight: bold; line-height:99%; }
.deprecated { background-color: #dc3545; display: inline-block; padding: 2px 5px 2px 5px; text-transform: uppercase; border-radius: 3px; border-color: #dc3545; color: white; font-weight: bold; line-height:99%; }
.tooltip {
    position: absolute;
    width: 100px;
    height: 20px;
    line-height: 20px;
    padding: 10px;
    font-size: 14px;
    text-align: center;
    color: rgb(113, 157, 171);
    background: rgb(255, 255, 255);
    border: 4px solid rgb(255, 255, 255);
    border-radius: 5px;
    text-shadow: rgba(0, 0, 0, 0.0980392) 1px 1px 1px;
    box-shadow: rgba(0, 0, 0, 0.0980392) 1px 1px 2px 0px;
}

.unselectable {
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

table.zebra tbody > tr:nth-child(even)        { background-color: #f7f7f7; }
table.zebra tbody > tr:nth-child(odd)        { background-color: #fff; }


/*
#requisition-items tbody > tr:nth-child(even)        { background-color: #f7f7f7; }
#requisition-items tbody > tr:nth-child(odd)        { background-color: #fff; }
#requisition-items td { padding: 2px; margin: 0}
#requisition-items input { border: 0}
#requisition-items tbody > tr:nth-child(odd) input      { background-color: #fff; }
#requisition-items tbody > tr:nth-child(even) input      { background-color: #f7f7f7; }
*/

table.requisition { border-collapse: collapse; }
table.requisition td, table.requisition th { padding: 10px; border-right: 1px solid lightgrey; }

.disabled {
    pointer-events: none;
    cursor: default;
}

.status { text-transform: uppercase; }

#requisition-items td input[type="text"] {
    width: 100%;
    box-sizing: border-box;
    -webkit-box-sizing:border-box;
    -moz-box-sizing: border-box;
}
fieldset { padding: 0px; margin: 0px; }


tr.canceled, tr.canceled a {
    color: #aaa;
    font-style: italic;
}

span.canceled, div.canceled {
    text-decoration: line-through;
    color: #aaa;

}

.requisition-number {
    background-color: #f7f7f7;
    color: black;
    font-size: 1.3em;
    padding: 1px;
    border: 1px solid lightgrey;
    margin: 1px;
    font: bold;
    border-radius: 0.2em;

}



/* ------------------------------------------
 * CSS3 GITHUB BUTTONS (Nicolas Gallagher)
 * Licensed under Unlicense
 * http://github.com/necolas/css3-github-buttons
 * --------------------------------------- */


/* =============================================================================
   Base Button
   ========================================================================== */

.button {
    position: relative;
    overflow: visible;
    display: inline-block;
    padding: 0.5em 1em;
    border: 1px solid #d4d4d4;
    margin: 0;
    text-decoration: none;
    text-align: center;
    text-shadow: 1px 1px 0 #fff;
    font:11px/normal sans-serif;
    color: #333;
    white-space: nowrap;
    cursor: pointer;
    outline: none;
    background-color: #ececec;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f4f4f4), to(#ececec));
    background-image: -moz-linear-gradient(#f4f4f4, #ececec);
    background-image: -ms-linear-gradient(#f4f4f4, #ececec);
    background-image: -o-linear-gradient(#f4f4f4, #ececec);
    background-image: linear-gradient(#f4f4f4, #ececec);
    /*-moz-background-clip: padding;  for Firefox 3.6 */
    background-clip: padding-box;
    border-radius: 0.2em;
    /* IE hacks */
    zoom: 1;
    *display: inline;
}

.button:hover,
.button:focus,
.button:active,
.button.active {
    border-color: #3072b3;
    border-bottom-color: #2a65a0;
    text-decoration: none;
    text-shadow: -1px -1px 0 rgba(0,0,0,0.3);
    color: #fff;
    background-color: #3c8dde;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#599bdc), to(#3072b3));
    background-image: -moz-linear-gradient(#599bdc, #3072b3);
    background-image: -ms-linear-gradient(#599bdc, #3072b3);
    background-image: -o-linear-gradient(#599bdc, #3072b3);
    background-image: linear-gradient(#599bdc, #3072b3);
}

.button:active,
.button.active {
    border-color: #2a65a0;
    border-bottom-color: #3884cd;
    background-color: #3072b3;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#3072b3), to(#599bdc));
    background-image: -moz-linear-gradient(#3072b3, #599bdc);
    background-image: -ms-linear-gradient(#3072b3, #599bdc);
    background-image: -o-linear-gradient(#3072b3, #599bdc);
    background-image: linear-gradient(#3072b3, #599bdc);
}

/* overrides extra padding on button elements in Firefox */
.button::-moz-focus-inner {
    padding: 0;
    border: 0;
}

/* =============================================================================
   Button icons
   ========================================================================== */

.button.icon:before {
    content: "";
    position: relative;
    top: 1px;
    float:left;
    width: 12px;
    height: 12px;
    margin: 0 0.75em 0 -0.25em;
    background: url(gh-icons.png) 0 99px no-repeat;
}

.button.arrowup.icon:before { background-position: 0 0; }
.button.arrowup.icon:hover:before,
.button.arrowup.icon:focus:before,
.button.arrowup.icon:active:before { background-position: -12px 0; }

.button.arrowdown.icon:before { background-position: 0 -12px; }
.button.arrowdown.icon:hover:before,
.button.arrowdown.icon:focus:before,
.button.arrowdown.icon:active:before { background-position: -12px -12px; }

.button.arrowleft.icon:before { background-position: 0 -24px; }
.button.arrowleft.icon:hover:before,
.button.arrowleft.icon:focus:before,
.button.arrowleft.icon:active:before { background-position: -12px -24px; }

.button.arrowright.icon:before { float:right; margin: 0 -0.25em 0 0.5em; background-position: 0 -36px; }
.button.arrowright.icon:hover:before,
.button.arrowright.icon:focus:before,
.button.arrowright.icon:active:before { background-position: -12px -36px; }

.button.approve.icon:before { background-position: 0 -48px; }
.button.approve.icon:hover:before,
.button.approve.icon:focus:before,
.button.approve.icon:active:before { background-position: -12px -48px; }

.button.add.icon:before { background-position: 0 -288px; }
.button.add.icon:hover:before,
.button.add.icon:focus:before,
.button.add.icon:active:before { background-position: -12px -288px; }

.button.remove.icon:before { background-position: 0 -60px; }
.button.remove.icon:hover:before,
.button.remove.icon:focus:before,
.button.remove.icon:active:before { background-position: -12px -60px; }

.button.log.icon:before { background-position: 0 -72px; }
.button.log.icon:hover:before,
.button.log.icon:focus:before,
.button.log.icon:active:before { background-position: -12px -72px; }

.button.calendar.icon:before { background-position: 0 -84px; }
.button.calendar.icon:hover:before,
.button.calendar.icon:focus:before,
.button.calendar.icon:active:before { background-position: -12px -84px; }

.button.chat.icon:before { background-position: 0 -96px; }
.button.chat.icon:hover:before,
.button.chat.icon:focus:before,
.button.chat.icon:active:before { background-position: -12px -96px; }

.button.clock.icon:before { background-position: 0 -108px; }
.button.clock.icon:hover:before,
.button.clock.icon:focus:before,
.button.clock.icon:active:before { background-position: -12px -108px; }

.button.settings.icon:before { background-position: 0 -120px; }
.button.settings.icon:hover:before,
.button.settings.icon:focus:before,
.button.settings.icon:active:before { background-position: -12px -120px; }

.button.comment.icon:before { background-position: 0 -132px; }
.button.comment.icon:hover:before,
.button.comment.icon:focus:before,
.button.comment.icon:active:before { background-position: -12px -132px; }

.button.fork.icon:before { background-position: 0 -144px; }
.button.fork.icon:hover:before,
.button.fork.icon:focus:before,
.button.fork.icon:active:before { background-position: -12px -144px; }

.button.like.icon:before { background-position: 0 -156px; }
.button.like.icon:hover:before,
.button.like.icon:focus:before,
.button.like.icon:active:before { background-position: -12px -156px; }

.button.favorite.icon:before { background-position: 0 -348px; }
.button.favorite.icon:hover:before,
.button.favorite.icon:focus:before,
.button.favorite.icon:active:before { background-position: -12px -348px; }

.button.home.icon:before { background-position: 0 -168px; }
.button.home.icon:hover:before,
.button.home.icon:focus:before,
.button.home.icon:active:before { background-position: -12px -168px; }

.button.key.icon:before { background-position: 0 -180px; }
.button.key.icon:hover:before,
.button.key.icon:focus:before,
.button.key.icon:active:before { background-position: -12px -180px; }

.button.lock.icon:before { background-position: 0 -192px; }
.button.lock.icon:hover:before,
.button.lock.icon:focus:before,
.button.lock.icon:active:before { background-position: -12px -192px; }

.button.unlock.icon:before { background-position: 0 -204px; }
.button.unlock.icon:hover:before,
.button.unlock.icon:focus:before,
.button.unlock.icon:active:before { background-position: -12px -204px; }

.button.loop.icon:before { background-position: 0 -216px; }
.button.loop.icon:hover:before,
.button.loop.icon:focus:before,
.button.loop.icon:active:before { background-position: -12px -216px; }

.button.search.icon:before { background-position: 0 -228px; }
.button.search.icon:hover:before,
.button.search.icon:focus:before,
.button.search.icon:active:before { background-position: -12px -228px; }

.button.mail.icon:before { background-position: 0 -240px; }
.button.mail.icon:hover:before,
.button.mail.icon:focus:before,
.button.mail.icon:active:before { background-position: -12px -240px; }

.button.move.icon:before { background-position: 0 -252px; }
.button.move.icon:hover:before,
.button.move.icon:focus:before,
.button.move.icon:active:before { background-position: -12px -252px; }

.button.edit.icon:before { background-position: 0 -264px; }
.button.edit.icon:hover:before,
.button.edit.icon:focus:before,
.button.edit.icon:active:before { background-position: -12px -264px; }

.button.pin.icon:before { background-position: 0 -276px; }
.button.pin.icon:hover:before,
.button.pin.icon:focus:before,
.button.pin.icon:active:before { background-position: -12px -276px; }

.button.reload.icon:before { background-position: 0 -300px; }
.button.reload.icon:hover:before,
.button.reload.icon:focus:before,
.button.reload.icon:active:before { background-position: -12px -300px; }

.button.rss.icon:before { background-position: 0 -312px; }
.button.rss.icon:hover:before,
.button.rss.icon:focus:before,
.button.rss.icon:active:before { background-position: -12px -312px; }

.button.tag.icon:before { background-position: 0 -324px; }
.button.tag.icon:hover:before,
.button.tag.icon:focus:before,
.button.tag.icon:active:before { background-position: -12px -324px; }

.button.trash.icon:before { background-position: 0 -336px; }
.button.trash.icon:hover:before,
.button.trash.icon:focus:before,
.button.trash.icon:active:before { background-position: -12px -336px; }

.button.user.icon:before { background-position: 0 -360px; }
.button.user.icon:hover:before,
.button.user.icon:focus:before,
.button.user.icon:active:before { background-position: -12px -360px; }


/* =============================================================================
   Button extensions
   ========================================================================== */

/* Primary button
   ========================================================================== */

.button.primary {
    font-weight: bold;
}

/* Danger button
   ========================================================================== */

.button.danger {
    color: #900;
}

.button.danger:hover,
.button.danger:focus,
.button.danger:active {
    border-color: #b53f3a;
    border-bottom-color: #a0302a;
    color: #fff;
    background-color: #dc5f59;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#dc5f59), to(#b33630));
    background-image: -moz-linear-gradient(#dc5f59, #b33630);
    background-image: -ms-linear-gradient(#dc5f59, #b33630);
    background-image: -o-linear-gradient(#dc5f59, #b33630);
    background-image: linear-gradient(#dc5f59, #b33630);
}

.button.danger:active,
.button.danger.active {
    border-color: #a0302a;
    border-bottom-color: #bf4843;
    background-color: #b33630;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#b33630), to(#dc5f59));
    background-image: -moz-linear-gradient(#b33630, #dc5f59);
    background-image: -ms-linear-gradient(#b33630, #dc5f59);
    background-image: -o-linear-gradient(#b33630, #dc5f59);
    background-image: linear-gradient(#b33630, #dc5f59);
}

.button.helpscout {
    /* base color is "PIH Teal" (#3AB4B1), with adjustments in HSL */

    /* button gradient runs +/- 5% L from the base color */
    background-color: #3AB4B1;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#46C3C0), to(#34A29F));
    background-image: -moz-linear-gradient(#46C3C0, #34A29F);
    background-image: -ms-linear-gradient(#46C3C0, #34A29F);
    background-image: -o-linear-gradient(#46C3C0, #34A29F);
    background-image: linear-gradient(#46C3C0, #34A29F);

    /* border colors are 10/15% darker */
    border-color: #2E8F8C;
    border-bottom-color: #287B79;
    border-right-color: #287B79;

    box-sizing: border-box;
    color: #F3FBFB; /* 50% lighter than base color */
    height: 30px;
    text-decoration: none;
    text-shadow: 1px 1px 0 #287B79; /* same as border-bottom-color */
}

.button.helpscout i {
    filter: drop-shadow(1px 1px 0 #287B79); /* apply button's text-shadow to fontawesome */
}

.button.helpscout:focus,
.button.helpscout:hover {
    /* make button 10% darker on mouseover */
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#34A29F), to(#287B79));
    background-image: -moz-linear-gradient(#34A29F, #287B79);
    background-image: -ms-linear-gradient(#34A29F, #287B79);
    background-image: -o-linear-gradient(#34A29F, #287B79);
    background-image: linear-gradient(#34A29F, #287B79);
    border-color: #287B79;
    border-bottom-color: #226866;
    border-right-color: #226866;
    color: #E0F5F5;
    text-shadow: 1px 1px 0 #226866; /* same as border-bottom-color */
}

.button.helpscout:focus i,
.button.helpscout:hover i {
    filter: drop-shadow(1px 1px 0 #226866); /* apply button's text-shadow to fontawesome */
}

.button.helpscout:active,
.button.helpscout.active {
    /* invert and darken button when pressed */
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#287B79), to(#34A29F));
    background-image: -moz-linear-gradient(#287B79, #34A29F);
    background-image: -ms-linear-gradient(#287B79, #34A29F);
    background-image: -o-linear-gradient(#287B79, #34A29F);
    background-image: linear-gradient(#287B79, #34A29F);
    border-color: #287B79;
    border-top-color: #226866;
    border-left-color: #226866;
    color: #E0F5F5;
    text-shadow: -1px -1px 0 #226866; /* same as border-bottom-color */
}

.button.helpscout:active i,
.button.helpscout.active i {
    filter: drop-shadow(-1px -1px 0 #226866); /* apply button's text-shadow to fontawesome */
}

/* HelpScout's default positioning wastes space and clobbers page content */
.BeaconContainer {
    bottom: 5px !important;
    right: 5px !important;
}

/* Pill button
   ========================================================================== */

.button.pill {
    border-radius: 50em;
}

/* Disabled button
   ========================================================================== */

.button.disable {
    opacity: 0.5;
}

/* Big button
   ========================================================================== */

.button.big {
    font-size: 14px;
}

.button.big.icon:before {
    top: 0;
}

.button.block { width: 100%; }


/* =============================================================================
   Button groups
   ========================================================================== */

/* Standard group
   ========================================================================== */

.button-group {
    display: inline-block;
    list-style: none;
    padding: 0;
    margin: 0;
    /* IE hacks */
    zoom: 1;
    *display: inline;
}

.button + .button,
.button + .button-group,
.button-group + .button,
.button-group + .button-group {
    margin-left: 15px;
}

.button-group li {
    float: left;
    padding: 0;
    margin: 0;
}

.button-group .button {
    float: left;
    margin-left: -1px;
}

.button-group > .button:not(:first-child):not(:last-child),
.button-group li:not(:first-child):not(:last-child) .button {
    border-radius: 0;
}

.button-group > .button:first-child,
.button-group li:first-child .button {
    margin-left: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.button-group > .button:last-child,
.button-group li:last-child > .button {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* Minor group
   ========================================================================== */

.button-group.minor-group .button {
    border: 1px solid #d4d4d4;
    text-shadow: none;
    background-image: none;
    background-color: #fff;
}

.button-group.minor-group .button:hover,
.button-group.minor-group .button:focus {
    background-color: #599bdc;
}

.button-group.minor-group .button:active,
.button-group.minor-group .button.active {
    background-color: #3072b3;
}

.button-group.minor-group .button.icon:before {
    opacity: 0.8;
}

/* =============================================================================
   Button container (mixing buttons and groups, e.g., nav bar)
   ========================================================================== */

.button-container .button,
.button-container .button-group {
    vertical-align: top;
}



/* =============================================================================
   Tag Cloud
   ========================================================================== */

#tagcloud a:hover { text-decoration: underline; }

select {
    text-overflow: ellipsis;
}


/* =============================================================================
   Filter list
   ========================================================================== */


ul.filter-list {
    list-style: none;
    padding: 0;
}
.filter-list-item, .filter { margin: 10px;  }
.filter-list-item {
    padding: 0 5px 0 0;
}
.filter-list-item input {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}


/* =============================================================================
   Form Field list
   ========================================================================== */



/* =============================================================================
   wizard.css
   ========================================================================== */


/* =============================================================================
    Vertical Tabs
   ========================================================================== */

/*
.ui-tabs-vertical { width: 55em; }
.ui-tabs-vertical .ui-tabs-nav { padding: .2em .1em .2em .2em; float: left; width: 12em; }
.ui-tabs-vertical .ui-tabs-nav li { clear: left; width: 100%; border-bottom-width: 1px !important; border-right-width: 0 !important; margin: 0 -1px .2em 0; }
.ui-tabs-vertical .ui-tabs-nav li a { display:block; }
.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-selected { padding-bottom: 0; padding-right: .1em; border-right-width: 1px; border-right-width: 1px; }
.ui-tabs-vertical .ui-tabs-panel { padding: 1em; float: right; width: 40em;}
*/

/*.ui-tabs-vertical { width: 55em; }*/
.ui-tabs-vertical .ui-tabs-nav { padding: .2em .1em .2em .2em; float: left; width: 15em; }
.ui-tabs-vertical .ui-tabs-nav li { clear: left; width: 100%; border-bottom-width: 1px !important; border-right-width: 0 !important; margin: 0 -1px .2em 0; }
.ui-tabs-vertical .ui-tabs-nav li a { display:block; }
.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active { padding-bottom: 0; padding-right: .1em; border-right-width: 1px; }
.ui-tabs-vertical .ui-tabs-panel { padding: 1em; float: right; width: 35em;}


/* =============================================================================
    Footable CSS
   ========================================================================== */

.footable > tbody > tr > td, .footable > thead > tr > th {
    border-left: 1px solid #ccc;
    border-top: 1px solid #ccc;
    padding: 10px;
    text-align: left;
}

/* =============================================================================
    Data Table CSS
   ========================================================================== */

table.dataTable tbody tr.odd { background-color: #f7f7f7;; }
table.dataTable tbody tr.even { background-color: #fff; }

table.dataTable tbody tr.odd td.sorting_1 { background-color: #f7f7f7;; }
table.dataTable tbody tr.even td.sorting_1 { background-color: #fff; }

table.dataTable tbody tr.odd td.sorting_2 { background-color: #f7f7f7;; }
table.dataTable tbody tr.even td.sorting_2 { background-color: #fff; }

table.dataTable td,
table.dataTable th {
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    word-wrap: break-word;
    max-width: 100px;
}

#dataTable_processing { height: 60px; }

input {
    -webkit-box-sizing : border-box;
    -moz-box-sizing : border-box;
    box-sizing : border-box;
}

.childContainer .tag {
    margin-left: 25px;
}

.new-container {
    border-top: 2px solid #ddd;
}

.packing-unit {
   background-color: #f7f7f7;

}

.dont-break-out {

    /* These are technically the same, but use both */
    overflow-wrap: break-word;
    word-wrap: break-word;

    -ms-word-break: break-all;
    /* This is the dangerous one in WebKit, as it breaks things wherever */
    word-break: break-all;
    /* Instead use this non-standard one: */
    word-break: break-word;

    /* Adds a hyphen where the word breaks, if supported (No Blink) */
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;

}

.vertical-text {
    color:#333;
    border:0px solid red;
    writing-mode:tb-rl;
    -webkit-transform:rotate(-120deg);
    -moz-transform:rotate(-120deg);
    -o-transform: rotate(-120deg);
    white-space:nowrap;
    display:block;
    bottom:0;
    width:20px;
    height:20px;
    font-family: ‘Trebuchet MS’, Helvetica, sans-serif;
    font-weight:normal;

}

/* Pivottable.css customizations*/
table.pvtTable tr th { background-color: #ddd; }

/* Hack to allow Chosen results to display correctly in jQuery dialogs  */
.ui-dialog .ui-dialog-content { overflow:visible !important; padding: 0; }
.ui-dialog { overflow: inherit !important; padding: 0; }


.blurred {
    filter: blur(6px);
}

.tabs-left {
    position: relative;
    padding-left: 35%;
    overflow: auto;
    display: flex;
}
.tabs-left .ui-tabs-nav {
    position: absolute;
    left: 0.25em;
    top: 0.25em;
    width: 33%;
    padding: 0.2em 0 0.5em 0.5em;
    background-color: #888;
}
.tabs-left .ui-tabs-nav li {
    right: 1px;
    width: 100%;
    border-right: none;
    border-bottom-width: 1px !important;
    -moz-border-radius: 4px 0px 0px 4px;
    -webkit-border-radius: 4px 0px 0px 4px;
    border-radius: 4px 0px 0px 4px;
    overflow: hidden;
    margin: 2px 0px 2px 0px;
}
.tabs-left .ui-tabs-nav li.ui-tabs-selected,
.tabs-left .ui-tabs-nav li.ui-state-active {
    border-right: 1px solid transparent;
    background-color: #ffffff;
    border-color: white;
}
.tabs-left .ui-tabs-nav li a {
    float: left;
    width: 100%;
    text-align: left;
    color: black;
}
.tabs-left .ui-tabs-panel {
    height: 400px;
    width: 100%;
}
.organization-group {
    height: 400px;
}
.header-border {
    margin-bottom: 15px;
    margin-top: 10px;
    border: 1px solid #888;
    border-radius: 4px;
    display: inline-block;
}
.header-border .heading {
    margin-left: 20px;
    margin-top: -10px;
}
.header-border .heading > span {
    background-color: white;
}
.element {
    margin: 5px;
    display: inline-block;
    padding: 0.5em 1em;
    border: 1px solid #d4d4d4;
    text-align: center;
    color: black;
    background-clip: padding-box;
    border-radius: 0.2em;
}


/* New menu redesign*/

#main-wrapper {
    display: flex;
    flex-direction: row;
    align-items: unset;
    min-height: 56px;
    width: 100%;
    font-family: 'Inter', sans-serif;
    font-style: normal;
    color: var(--blue-700);
    background: white;
    box-shadow: 0 4px 4px rgba(0,0,0,.15);
    position: relative;
    padding: 0 24px;
}


#main-wrapper #logo-wrapper {
    font-weight: 400;
    margin-right: 8px;
}

#main-wrapper #logo-wrapper > #logo-square {
    width: 40px;
    height: 40px;
}

#main-wrapper #logo-wrapper > #logo-square img {
    border: 1px solid #E6E6E6;
    border-radius: 4px;
    box-sizing: border-box;
    width: 40px;
    height: 40px;
}

#main-wrapper #logo-wrapper > #logo-square img:active {
     border: 0 !important;
     border-radius: 4px;
     box-shadow: 0 0 0 4px rgba(34, 100, 229, 0.36);
}

#main-wrapper #logo-wrapper > #logo-square img:hover {
     border: 1px solid #C5C5C5;
}

.gap-8 {
    gap: 8px;
}

#location-name-wrapper {
    height: 40px;
    padding: 0 8px;
    border: 1px solid var(--gray-200);
    border-radius: 4px;
}

#location-name-wrapper > #location-name-span {
    font-size: 15px;
    line-height: 32px;
    color: var(--gray-600);
}

#location-name-wrapper > #location-name-span > #location-label {
    height: 25px;
    background-color: var(--color-red);
    border-radius: 2px;
    padding: 4px;
}

#location-name-wrapper > #location-name-span > #location-label > span {
    color: #FFFFFF;
    font-weight: 500;
    font-size: 14px;
    line-height: 17px;
}

.dropdown-menu-subsections {
    max-height: 60vh;
    max-width: 50vw;
    overflow: hidden auto;
    display: flex;
    width: max-content;
    flex-wrap: wrap;
}

.nav-link {
    padding: 7px 15px !important;
    color: white !important;
    font-size: 14px;
}

.dropdown:hover {
    background-color: white;
}

.nav-link {
    color: black !important;
}

.nav-link:hover {
    background-color: white;
    color: black !important;
}

.navbar-nav .dropdown-menu {
    visibility: hidden;
}

.dropdown:hover .dropdown-menu {
    display: block;
    visibility: visible;
    color: black !important;
}

.dropdown-toggle::after {
    display: none !important;
}

.dropdown-menu-wrapper {
    background: transparent !important;
    border: none !important;
    transform: translateX(-4px);
    padding: 2px 4px 8px;
    margin: 0 !important;
    overflow-y: hidden;
    overflow-x: hidden;
    position: absolute !important;
    border: 0 !important;
}
.dropdown-menu-wrapper.dropdown-menu-right {
    transform: translateX(4px);
}

.dropdown-menu-content {
    background-color: white;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 4px;
}

.navbar .subsection-title {
    font-weight: 700;
    font-size: 14px;
    color: var(--blue-700) !important;
    padding: 8px 16px !important;
    line-height: 30px;
}

.nav-item a {
    line-height: 32px;
    color: var(--blue-700) !important;
    font-weight: 500;
    font-size: 15px;
    padding: 0 16px !important;
    text-decoration: none;
    cursor: pointer;
}

.nav-item a:hover,
.section-item:hover {
    background-color: unset !important;
    color: var(--blue-700) !important;
}

.dropdown-menu a.dropdown-item,
.section-item {
    color: var(--blue-700) !important;
    font-weight: 400;
    font-size: 15px;
    line-height: 32px;
    padding: 0;
}

.dropdown-menu a.dropdown-item:hover,
.collapsable a.dropdown-item:hover{
    background-color: var(--blue-200) !important;
    border-radius: 4px;
}

.dropdown-menu .dropdown-item .icon {
    font-size: 20px;
    padding: 4px !important;
    vertical-align: middle;
}

.dropdown-menu-right {
    right: 0 !important;
    left: auto !important;
}

.dropdown-menu-right-conf {
    right: auto !important;
    left: auto !important;
}

.dropdown:hover > a:hover {
    color: var(--blue-700) !important;
}

.dropdown-item {
    font-size: 14px;
    padding: 0.25rem 0.5rem;
}

.dropdown-menu-subsections {
    max-height: 60vh;
    max-width: 50vw;
    overflow: hidden auto;
    display: flex;
    width: max-content;
    flex-wrap: wrap;
}

.subsection-title {
    color: gray;
    font-size: 1.1em;
    vertical-align: middle;
    padding: 5px 0 7px 0;
    white-space: pre;
}

.padding-8 {
    padding: 8px;
}

.menu-wrapper {
    min-height: 56px;
    padding: 0 16px;
}

.menu-wrapper > ul {
    list-style-type: none;
    min-height: 56px;
}

.menu-wrapper > ul li {
    min-height: 56px;
}

.navbar-nav li.dropdown.nav-item:hover,
.navbar-nav li.collapsable.nav-item button:hover {
    background-color: var(--blue-200);
    color: var(--blue-700) !important;
}
.navbar-nav li.collapsable.nav-item > button,
.navbar-nav li.collapsable.nav-item > a {
    outline: none;
    border: none;
    background: none;
    color: inherit !important;
    min-height: 56px;
    padding: 0 8px !important;
    font-size: 15px;
}

.mobile-help-scout {
    min-height: 56px;
    display: flex;
    cursor: pointer;
    text-decoration: none;
}

.navbar-nav li.collapsable.nav-item button > i {
    font-size: 24px;
}
.navbar-nav li.collapsable.nav-item button[aria-expanded="true"] > i {
    transform: rotate(180deg);
}

.navbar-icons {
    padding: 8px 0;
}

.navbar-icons .menu-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    width: 40px;
    height: 40px;
    cursor: pointer;
}

.navbar-icons .menu-icon:hover {
    background: var(--blue-200);
    border-radius: 4px;
}

.custom-tooltip {
    background-color: var(--blue-800);
    border-radius: 2px;
    padding: 4px 8px;
    font-weight: 400;
    font-size: 12px;
    line-height: 15px;
    color: #FFFFFF;
}

.dropdown-menu .conf-subsections {
    max-width: 80vw;
    max-height: 80vh;
}

.tooltip2 {
    position: relative;
    display: inline-block;
}

.tooltip2 .tooltiptext2 {
    visibility: hidden;
    border-radius: 2px;
    padding: 4px 8px;
    background-color: var(--blue-800);
    font-weight: 400;
    font-size: 12px;
    line-height: 15px;
    color: #FFFFFF;
    text-align: center;

    /* Position the tooltip */
    position: absolute;
    z-index: 1;
    top: 150%;
    left: 50%;
    margin-left: -25px;
}

.tooltip2:hover .tooltiptext2 {
    visibility: visible;
}

.btn-group .margin-top-18 {
    margin-top: 18px !important;
}

.active-section {
    box-shadow: 0 -3px 0 var(--blue-primary) inset;
}

.active-section .nav-link {
    color: var(--blue-primary) !important;
}

@media (max-width: 1440px) {
    .nav-item > a {
        padding: 0 8px !important;
    }
}

.scrollbar::-webkit-scrollbar {
    width: 0.5em;
    height: 0.5em;
}

.scrollbar::-webkit-scrollbar-track {
    background: var(--blue-200);
}

.scrollbar::-webkit-scrollbar-thumb {
    background-color: var(--blue-301);
}

/* Spinner cricle */
.spinner-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 500px;
}

.circle-spinner {
    width: 7rem;
    height: 7rem;
    font-size: 1.5rem;
    color: var(--blue-500);
}

/* Dot Flashing Spinner */
.dot-flashing-wrapper {
    width: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.dot-flashing {
    --dot-size: 5px;
    position: relative;
    width: var(--dot-size);
    height: var(--dot-size);
    border-radius: 5px;
    background-color: var(--blue-500);
    animation: dotFlashing 0.5s infinite linear alternate;
    animation-delay: .25s;
}

.dot-flashing::before, .dot-flashing::after {
    content: '';
    display: inline-block;
    position: absolute;
    top: 0;
}

.dot-flashing::before {
    left: -12px;
    width: var(--dot-size);
    height: var(--dot-size);
    border-radius: 5px;
    background-color: var(--blue-500);
    animation: dotFlashing 0.5s infinite alternate;
    animation-delay: 0s;
}

.dot-flashing::after {
    left: 12px;
    width: var(--dot-size);
    height: var(--dot-size);
    border-radius: 5px;
    background-color: var(--blue-500);
    animation: dotFlashing 0.5s infinite alternate;
    animation-delay: 0.25s;
}

@keyframes dotFlashing {
    0% {
        opacity: 1;
    }
    50%,
    100% {
        opacity: 0.2;
    }
}

/* ======================================= */
/*             LOCATION CHOOSER            */
/* ======================================= */
.location-chooser {
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
    border: none;
    border-radius: 4px;
    padding: 24px;
}
.location-chooser .tabs {
    background-color: white;
    padding: 0;
    display: flex;
    flex-direction: row;
    gap: 24px;
}

.location-chooser .tabs > .ui-tabs-nav,
.location-chooser .tabs > .ui-tabs-panel {
    height: 500px;
    overflow: auto;
}

/* LEFT TAB */

.location-chooser .tabs > .ui-tabs-nav {
    all: unset;
    background-color: var(--blue-201);
    padding: 0;
    min-width: 150px;
    max-width: 250px;
    overflow-y: auto;
    height: 500px;
}

.location-chooser .tabs > .ui-tabs-nav > .organization-tab {
    background: transparent;
    border-radius: 0;
    border: none;
    margin: 0;
    padding: 4px 8px;
    font-size: 14px;
    cursor: pointer;
    color: var(--blue-800);
    box-shadow: inset 0 0 0 0 var(--blue-primary);
    transition: box-shadow ease-in-out 0.2s;
}
.location-chooser  .tabs > .ui-tabs-nav > .organization-tab a {
    color: inherit;
    white-space: break-spaces;
    word-break: break-word;
}

.location-chooser .tabs > .ui-tabs-nav > .organization-tab.ui-tabs-selected,
.location-chooser  .tabs > .ui-tabs-nav > .organization-tab:hover {
    background-color: white;
}
.location-chooser .tabs > .ui-tabs-nav > .organization-tab.ui-tabs-selected {
    box-shadow: inset 4px 0 0 0 var(--blue-primary);
}

/* RIGHT TAB */
.location-chooser .tabs > .ui-tabs-panel {
    all: unset;
    flex-grow: 1;
    overflow: auto;
    height: 500px;
}

/* LOCATION BUTTON */
.location-chooser .tabs .location-group .element {
    background-color: var(--blue-201);
    color: var(--blue-700);
    border-radius: 4px;
    border: 1px solid var(--location-color, var(--blue-200));
    font-size: 14px;
    padding: 6px 8px;
    text-decoration: none;
    margin: 0;
    display: flex;
    word-break: break-all;
    text-align: start;
}

.location-chooser .tabs .location-group .element:hover {
    background-color: var(--location-color, var(--blue-700));
    border: 1px solid var(--location-color, var(--blue-700));
    color: var(--blue-200);
}

.location-chooser .tabs .location-group .element i {
    color: var(--location-color, var(--blue-700));
    margin-right: 4px;
}
.location-chooser .tabs .location-group .element:hover i {
    color: var(--blue-200);
}

/* LOCATION GROUP */
.location-chooser .tabs .location-group {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.location-chooser .tabs .location-group .heading {
    color: var(--blue-700);
    font-weight: 600;
    font-size: 14px;
    width: 100%;
}


/* MODAL HEADER */
.location-chooser .ui-dialog-titlebar.ui-dialog-titlebar {
    color: var(--blue-800);
    background: white;
    border: none;
    padding: 0;
    margin: 0 0 24px;
    display: flex;
    flex-direction: row;
    align-items: center;
}
.location-chooser .ui-dialog-titlebar.ui-dialog-titlebar .ui-dialog-title {
    font-size: 20px;
    font-weight: 500;
    line-height: 32px;
}

.location-chooser .ui-dialog-titlebar .ui-dialog-titlebar-close {
    position: relative;
    margin-left: auto;
    font-size: 24px;
    font-weight: normal;
    height: 32px;
    width: 32px;
    color: inherit;
    background: transparent;
    display: grid;
    place-items: center;
    border-radius: 4px;
    transition: background-color ease-in-out 0.2s;
    text-decoration: none;
    border: none;
    padding: 0;
}
.location-chooser .ui-dialog-titlebar .ui-dialog-titlebar-close:hover {
    background: var(--blue-100);
}

/* LOCATION CHOOSER BUTTON */
.location-chooser__button {
    background: white;
    border: 1px solid var(--location-color, var(--gray-200));
    padding: 0 8px;
    border-radius: 4px;
    font-size: 15px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.location-chooser__button:hover {
    background: var(--blue-200);
}

.location-chooser__button-title {
     font-size: inherit;
     font-family: 'Inter', sans-serif;
     color: var(--gray-600);
     max-width: 200px;
     overflow-x: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
     display: inline-block;
 }

.location-chooser__button-tag {
     padding: 2px 4px;
     font-size: inherit;
     color: white;
     background-color: var(--color-red);
     border-radius: 2px;
     display: inline;
     line-height: 18px;
     margin-left: 4px;
 }

/* LOCATION CHOSER ON LOGIN */

.location-chooser__login {
    width: clamp(670px, 70vw, 1000px);
    background: white;
}
.location-chooser__login .location-chooser__header {
    margin-bottom: 24px;
}
.location-chooser__login .location-chooser__header h2 {
    all: unset;
    font-size: 20px;
    font-weight: 500;
    line-height: 32px;
    color: var(--blue-800);
}
.location-chooser__login .location-chooser__footer {
    margin-top: 24px;
}

.location-chooser__login .location-chooser__footer__last-signin {
    color: var(--gray-600);
    gap: 3px;
}

.location-chooser__login .location-chooser__footer__logout-user {
    color: var(--gray-600);
}
.location-chooser__login .location-chooser__footer__logout-btn {
    background: white;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px;
    gap: 8px;
    color: var(--blue-primary);
    border: 1px solid var(--blue-primary);
    border-radius: 4px;
    text-decoration: none;
    outline-style: outset;
    outline-width: 0;
    outline-color: rgba(1, 178, 237, 0.37);
    transition: outline-width ease-in-out 0.2s;
}

.location-chooser__login .location-chooser__footer__logout-btn:active {
    outline-width: 4px;
}

.location-chooser__login .location-chooser__footer__logout-btn:hover {
    background: var(--blue-primary);
    color: white;

    /*color: rgba(1, 178, 237);*/
}

.ui-widget {
    font-family: 'Inter', sans-serif !important;
}

.impersonate-box {
    width: 100%;
    height: 54px;
    background-color: var(--color-yellow);
    padding: 11px 30px;
    font-weight: 400;
    font-size: 16px;
    line-height: 19px;
    letter-spacing: -0.02em;
    color: #FFFFFF;
}

.impersonate-box a:hover {
    text-decoration: none;
}

.impersonate-box > .info i {
    font-size: 18px;
}

.impersonate-box > .info > span {
    padding-left: 11px;
}

.primary-button {
    height: 36px;
    padding: 8px 16px;
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.02em;
    border-radius: 4px;
    border: none;
    background-color: var(--blue-primary);
    color: #FFFFFF;
    font-family: 'Inter', sans-serif !important;
}

.primary-button:focus {
    outline: none;
}

.primary-button:hover {
    background-color: var(--blue-500);
    color: #FFFFFF;
}

.primary-button:active {
    background-color: var(--blue-500);
    box-shadow: 0 0 0 4px rgba(1, 178, 237, 0.36);
}

.primary-button:disabled {
    background-color: var(--blue-400) !important;
}

.grayed {
    background-color: var(--gray-200) !important;
}