@charset "utf-8";
/**
 * Custom CSS for CartonCloud App.
 * Designed to override bootstrap and cake-generic.
 *
 */

* {
    margin:0;
    padding:0;
}

/** General Style Info **/
html, body {
    height: 100%;
    width:100%;
}

body {
    font-size: 14px;
    display: flex;
    flex-direction: column;
}

form {
    display: inline;
    margin-right: 0px;
}
#header h1{
    background:none;
    border-bottom: none;
    color: hsl(var(--color-theme-fg));
    position: inherit;
    padding-top:20px;
}
h1{
    padding: 10px;
    text-align: center;
    width:100%;
    position: relative;
    margin: 0px;
    background: hsl(var(--color-surface));
    border-bottom: 1px hsl(var(--color-fg-7)) solid;
}
h1.jumbotron {
    border-bottom: 0px;
}

.smallText {
    font-size: small;
}

.flex {
    display: flex;
}

a {
    color: hsl(var(--color-primary));
}

a:hover {
    color: hsl(var(--color-primary-900));
}

div.uploadResponse{
    border: 1px solid black;
    padding: 5px;
    text-align: center;
}
div.center{
    width: 100%;
    text-align: center;
}
div.text-center{
    text-align: center;
}
div.squeeze{
    margin: 0px;
    padding: 0px;
}

.auto-size-dropdown {
    width:90%;
}
div.searchOptions{
    -webkit-border-radius: 5px;
    border-radius: 5px;
    height: auto;
    background-color: hsl(var(--color-primary-50));
    -webkit-box-shadow: 1px 1px 3px hsl(var(--color-fg-7));
    box-shadow: 1px 1px 3px hsl(var(--color-fg-7));
    border: 1px solid hsl(var(--color-fg-7));
    position: relative;
    padding: 10px 0px 5px 30px;
    width:auto;
}
div.closeSearchOptions{
    position:absolute;
    top: 0px;
    right: 0px;
}
div.pageOptions{
    display:inline-block;
    position: relative;
    padding: 5px;
    background: hsl(var(--color-surface));
    -webkit-border-bottom-right-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -moz-border-radius-bottomright: 5px;
    -moz-border-radius-bottomleft: 5px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    border-bottom: 1px solid hsl(var(--color-fg-7));
    border-left: 1px solid hsl(var(--color-fg-7));
    border-right: 1px solid hsl(var(--color-fg-7));
}

dl.model_actions{
    margin-left:100px;
    margin-top:-20px;
}
dl.model_actions dd{
    -webkit-border-radius: 5px;
    border-radius: 5px;
    border: 1px solid hsl(var(--color-fg-7));
    z-index: 900;
    padding: 8px;
    clear:both;
    position: relative;
}

/** Layout **/
#header{
    background-color: hsl(var(--color-theme-bg));
    color: hsl(var(--color-theme-fg));
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.2);
    padding: 0;
    width: 100%;
}

#header-content {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    margin: 0 24px;
    padding: 12px 0;
    column-gap: 32px;
    row-gap: 12px;
}

#header-content .nav-button a, li.user-options a{
    color: hsl(var(--color-theme-fg));
}

#header-content .nav-button a:hover, li.user-options a:hover{
    background-color: hsl(var(--color-header-dropdown-menu-bg-hover));
}

.header-title-search-wrap {
    display: flex;
    align-items: center;
    flex-grow: 1;
    column-gap: 16px;
    row-gap: 12px;
    flex-wrap: wrap;
}

.header-hamburger-account-info-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    column-gap: 16px;
}

.header-title {
    display: flex;
    align-items: center;
    column-gap: 12px;
    margin-right: 16px;
}

.header-logo {
    height: 46px; /** default logo image should be exactly 2x this **/
    max-width: 224px;
    object-fit: contain;
}

.header-title-switchers {
    display: flex;
    flex-direction: column;
    align-items: start;
}

.header-title-switcher {
    display: inline-block;
}

.header-title-switcher-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
    font-size: 17px;
    font-weight: 600;
    line-height: 1;
    text-align: start;
    padding: 6px 8px;
    color: hsl(var(--color-theme-fg));
    background: transparent;
    border: none;
    border-radius: var(--radius-md);
}

.header-title-switcher-button:hover, .header-title-switcher-button:focus {
    background: hsl(var(--color-theme-bg-hover));
}

.header-title-switcher .dropdown-menu>li>a {
    color: hsl(var(--color-header-dropdown-menu-fg));
}

.header-title-switcher .dropdown-menu>li:hover>a {
     background-color: hsl(var(--color-header-dropdown-menu-bg-hover));
 }

.header-customer-selector-button {
    color: hsl(var(--color-theme-fg));
    padding: 0 8px;
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
    font-size: 14px;
    font-weight: 600;
    text-align: start;
    background: transparent;
    border: none;
    border-radius: var(--radius-md);
}

.header-customer-selector-button:hover, .header-customer-selector-button:focus {
    background: hsla(0, 0%, 0%, 0.1);
}

.header-customer-name {
    color: hsl(var(--color-theme-fg));
    padding: 0 8px;
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
    font-size: 14px;
    font-weight: 600;
}

.header-customer-search {
    display: block;
    margin-left: 8px;
    margin-top: 2px;
    min-width: 384px;
}

.header-customer-search form {
    display: block;
}

.header-customer-search .select2-container {
    padding: 0;
    display: block;
}

.globalSearch {
    flex-grow: 1;
    max-width: 384px;
    min-width: 240px;
}

#header-content ul.header-account-info {
    display: inline-flex;
    align-items: center;
    column-gap: 20px;
    row-gap: 6px;
    flex-wrap: wrap;
    margin: 0 0 0 auto;
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
    font-weight: 400;
}
#header-content ul.header-account-info li {
    font-size: small;
    list-style: none;
    margin: 0;
}
#header-content ul.header-account-info li.faint {
    color: hsl(var(--color-theme-fg) / 0.85);
}
#header-content ul.header-account-info li.user-notifications {
    position: relative;
}
#header-content ul.header-account-info li.faint a{
    color: hsl(var(--color-theme-fg) / 0.85);
    text-decoration: none;
    font-weight: 600;
}
#header-content ul.header-account-info li.faint a:hover{
    text-decoration: underline;
}
#header-content ul.header-account-info .dropdown-toggle {
    font-weight: 700;
    display: inline-flex;
    column-gap: 4px;
    align-items: center;
}

.navbar-toggle {
    background-color: hsl(var(--color-theme-bg));
    color: hsl(var(--color-theme-fg));
    border-radius: var(--radius-md);
    border: 1px solid hsl(var(--color-theme-fg) / 0.25);
    width: 36px;
    height: 36px;
    margin: 0;
    font-size: 14px;
    line-height: 20px;
    align-items: center;
    justify-content: center;
}

.navbar-toggle:hover, .navbar-toggle:focus {
    background-color: hsl(var(--color-theme-bg-hover));
}

/*The top navigation*/
#topnav {
    margin: 0 auto;
    padding: 0 24px;
    border: none;
    box-shadow: none;
    -webkit-box-shadow: none;
}

#topnav .nav-tabs {
    border-top: 1px solid hsl(var(--color-theme-fg) / 0.2);
    border-bottom: none;
    padding: 8px 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    row-gap: 4px;
    column-gap: 28px;
    margin: 0;
    width: 100%;
}

#topnav a {
    color: hsl(var(--color-theme-fg));
    font-weight: normal;
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
    font-weight: 500;
    font-size: 16px;
}

#topnav .nav-tabs>li {
    margin: 0;
}

#topnav .navbar-nav>li>a {
    padding: 8px 16px;
    border: none;
    border-radius: var(--radius-base);
    color: hsl(var(--color-theme-fg) / 0.85);
    font-size: 15px;
}

#topnav li.active > a.topnav-link,
#topnav .dropdown-menu>.active>a {
    background-color: hsl(var(--color-theme-bg-selected));
    color: hsl(var(--color-theme-fg));
}

#topnav li.active > a.topnav-link.dropdown-toggle {
    cursor: pointer;
}

#topnav li.active > ul a{
    color: hsl(var(--color-header-dropdown-menu-fg));
}

#topnav li.active > ul a:hover {
    background-color: hsl(var(--color-header-dropdown-menu-bg-hover));
}

#topnav > ul > li > a:hover,
#topnav > ul > li > a:focus,
#topnav > ul > li > a[aria-expanded='true'] {
    background-color: hsl(var(--color-theme-bg-hover));
    color: hsl(var(--color-theme-fg));
    outline: none;
}

#topnav > ul > li > ul > li > a:hover,
#topnav > ul > li > ul > li > a:focus {
    background-color: hsl(var(--color-header-dropdown-menu-bg-hover));
    color: hsl(var(--color-header-dropdown-menu-fg));
    outline: none;
}

#topnav ul.dropdown-menu,
#header-content ul.dropdown-menu{
    background-color: hsl(var(--color-header-dropdown-menu-bg));
}

#header .dropdown-menu>li>a:hover,
#header .dropdown-menu>li>a:focus,
#header .nav .open>a, .nav .open>a:hover, .nav .open>a:focus {
    background-color: hsl(var(--color-header-dropdown-menu-bg-hover));
    color: hsl(var(--color-header-dropdown-menu-fg));
}

/* dropdown submenu */
.dropdown-submenu {
    position: relative;
}

#topnav .dropdown-submenu a.dropdown-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#topnav .dropdown-submenu a.dropdown-toggle > .caret {
    transform: rotate(-90deg);
}

.dropdown-submenu > ul.dropdown-menu {
    position: absolute;
    left: 100%;
    top: 0;
    margin-left: 11px;
}
.nav .dropdown-submenu > a:focus {
    background-color: transparent;
}

@media only screen and (max-width: 767px) {
    .navbar-toggle {
        display: inline-flex;
    }

    #header-content.has-nav {
        flex-direction: column;
        align-items: stretch;
    }

    #header-content.has-nav .header-hamburger-account-info-wrap {
        flex-grow: 1;
    }

    #topnav .nav-tabs {
        flex-direction: column;
        align-items: start;
    }

    #topnav .navbar-nav>li>a {
        font-size: 14px;
    }

    #topnav .navbar-nav .open .dropdown-menu>li {
        margin: 0;
    }

    #topnav .navbar-nav .open .dropdown-menu>li>a {
        font-size: 14px;
    }

    #topnav .dropdown-submenu a.dropdown-toggle > .caret {
        transform: rotate(0deg);
    }

    .header-customer-search {
        width: 100%;
        min-width: 128px;
    }

    .globalSearch {
        min-width: 0;
    }
}

#leftnav {
    float: left;
    width: 200px;
    margin-left:10px;
}
#leftnav a {
    color:#FFFFFF;
}
/* Wrapper for page content to push down footer */
#wrap {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

body.overflow-visible #content {
    overflow: visible;
}

#content {
    padding: 0px 20px 40px 20px;
    height: auto;
    overflow-x: auto;
    flex-grow: 1;
}

body.consignments-map #content {
    padding: 0;
}

body.consignments-map #app-footer {
    display: none;
}

/** containers **/
div.form,
div.index,
div.view {
    width:95%;
}

div.simple_border {
    border: 1px solid black;
}


/** Tables **/
#maintable tr, tr td {
    border-spacing:0;
    border-collapse:collapse;
}
table tr td.noborder {
    border-bottom: 0px;
}
table tr.small {
    font-size: 8px;
}

table tr.highlight{
    background-color: hsl(var(--color-green-100));
}
table tr.redHighlight{
    background-color: hsl(var(--color-red-300));
    border: 1px solid hsl(var(--color-red-600));
}

table tr:nth-child(even).highlight {
    background: hsl(var(--color-green-100));
}

table tr:nth-child(odd).highlight {
    background: hsl(var(--color-green-100));
}

table tr:nth-child(even).redHighlight {
    background: hsl(var(--color-red-300));
    border: 1px solid hsl(var(--color-red-600));
}
td.highlight{
    background: hsl(var(--color-green-100));
}
table tr.greenRowHighlight {
    background-color: hsl(var(--color-green-100));
}
table tr.redRowHighlight {
    background-color: hsl(var(--color-red-100));
}

.highlight{
    background: hsl(var(--color-green-100));
}

.redHighlight{
    background: hsl(var(--color-red-300));
}

.blueHighlight{
    background: hsl(var(--color-primary-300));
}

div.searchOptions table tr:nth-child(even) {
    background: none;
}
div.searchOptions table tr:nth-child(odd) {
    background: none;
}
table.lightborder {
    border: 1px solid hsl(var(--color-fg-6));
}
td.spaceFiller {
    width: 70%
}
td.fixedSpace {
    width: 10%
}
td.toprow {
    border-top: 3px solid hsl(var(--color-fg-3));
}
dt {
    border: 1px solid hsl(var(--color-fg-7));
}
form div.squeeze div.submit {
    margin: 0px;
    padding: 0px;
}

select {

}
select[multiple=multiple] {

}

td > input[type="radio"], td > input[type="checkbox"], td > div > input[type="radio"], td > div > input[type="checkbox"]
{
    vertical-align: middle;
    -webkit-transform: scale(1.6,1.6);
    -moz-transform: scale(1.6,1.6);
    -o-transform: scale(1.6,1.6);
    margin-left: 5px;
    margin-right: 5px;
}

.table>thead>tr>th, .table>tbody>tr>th, .table>tfoot>tr>th, .table>thead>tr>td, .table>tbody>tr>td, .table>tfoot>tr>td {
    vertical-align: middle;
}

form div.row, form div.row div{
    clear:none;
    margin-bottom: 0px;
    padding: 0px;
}

.radio, .checkbox {
    min-height: 10px;
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: 20px;
}
div.searchbox{
    display: inline-block;
    vertical-align: middle;
}
div.inline{
    display: inline-block;
}
.left{
    float: left;
    clear: none;
}
.left.center-padding{
    padding-right: 10px;
}
.right{
    float: right;
    clear: none;
}
.right.center-padding{
    padding-left: 10px;
}
.clear{
    clear: both;
}
.half-width{
    width: 50%;
}
.quarter-width{
    width: 24%;
}
div.searchbox input {
    width: 400px;
    display: inline;
}

input[type=submit] {
    color: #ffffff;
    background-color: #5cb85c;
    border-color: #4cae4c;
    width: auto;
}

input[type=submit].btn-danger {
    color: #fff;
    background-color: #d9534f;
    border-color: #d43f3a;
}

table tr:nth-child(even).pack_list_ctn,
table tr:nth-child(odd).pack_list_ctn {
    background-color: #00FF66;
}
table tr:nth-child(even).pack_list_inner,
table tr:nth-child(odd).pack_list_inner {
    background-color: #CCCC33;
}
table tr:nth-child(even).pack_list_unit,
table tr:nth-child(odd).pack_list_unit {
    background-color: #00CCCC;
}
table tr:nth-child(even).pack_list_other,
table tr:nth-child(odd).pack_list_other {
    background-color: hsl(var(--color-fg-6));
}


.actions ul li a:hover,
.actions a:hover {
    background: #ededed;
    border-color: #acacac;
    text-decoration: none;
}

.warning-text {
    color: hsl(var(--color-red-700));
}

.urgent-text {
    color: hsl(var(--color-red-700));
    font-weight: bold;
}

input.tinycell {
    width:70px;
}

/** Interactives **/
div.userrole {
    position:relative;
    margin: 0px;
    padding: 0px
}
.userrole>ul.list {
    display:none;
    position:absolute; left:0px; z-index:999;
    width:100px;
    margin:5px; padding:0px; list-style:none;
    background:#fff; color:#333;
    -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px;
    -moz-box-shadow:0 0 5px #999; -webkit-box-shadow:0 0 5px #999; box-shadow:0 0 5px #999
}
.userrole>ul.list li:hover {
    background:#003D4C;
    color:#FFFFFF;
}
.userrole>ul.list li:last-child {
    border:none
}

/* For the Selectable / Sortable jQuery UI plugin */
li.selected { border: 1px solid hsl(var(--color-red-600)); }
li.child { margin-left: 20px; }

.bold {
    font-weight: bold;
}

.new_menu_item {
    vertical-align: top;
    font-size: 9px;
    margin-left: -22px;
}

#higher_location {
    position: absolute;
    left: 50px;
    top: 20px;
}
#previous_location {
    position: absolute;
    left: 0px;
    top: 70px;
}
#next_location {
    position: absolute;
    left: 100px;
    top: 70px;
}
#lower_location {
    position: absolute;
    left: 50px;
    top: 120px;
}
.locations {
    position:relative;
    left: -500px;
    top: -300px;
}
.location-width{
    width:100px;
}
.select2{
    width: inherit;
}
.input_customerid {
    width:285px;
}
.smallSelect2 {
    width: 100px;
}
.medSelect2 {
    width: 180px;
}
.verifyProductIdSelect2 {
    width: 350px;
}
.medLargeSelect2 {
    width: 220px;
}
.largeSelect2 {
    width: 400px;
}
.xlargeSelect2 {
    width: 600px;
}
.xxlargeSelect2 {
    width: 1000px;
}

.fullWidthSelect2 {
    width: 100%;
}

.largeMultiSelect2 {
    width: 98%;
}

.searchBoxSelect2 {
    width: 900px;
}
.ajaxLoader {
    background: url('../img/select2-spinner.gif') no-repeat left;
    width: 16px;
    height: 16px;
}
.loader {
    text-align: center;
}
td.glow {
    border: 1px solid blue;
}
.largeCheckBox, .largeDisabledCheckBox {
    display: none;
}
.largeCheckBox + label {
    float: left;
    width: 50px;
    height: 50px;
    cursor: pointer;
    background: url('../img/large_checkbox_unchecked.png') no-repeat left;
}
.largeCheckBox:checked + label {
    background: url('../img/large_checkbox_checked.png') no-repeat left;
}
.largeDisabledCheckBox + label {
    float: left;
    width: 50px;
    height: 50px;
    background: url('../img/large_checkbox_unchecked_grey.png') no-repeat left;
}
.largeDisabledCheckBox:checked + label {
    background: url('../img/large_checkbox_checked_grey.png') no-repeat left;
}
[data-tooltip]:before {
    /* needed - do not touch */
    content: attr(data-tooltip);
    position: absolute;
    opacity: 0;

    /* customizable */
    /*transition: all 0.15s ease;*/
    padding: 10px;
    /*color: #333;*/
    color: #31708f;
    border-radius: 10px;
    /*box-shadow: 2px 2px 1px silver;*/
}
[data-tooltip]:hover:before {
    /* needed - do not touch */
    opacity: 1;

    /* customizable */
    background: #d9edf7;
    border-color: #bce8f1;
    margin-top: 5px;
    margin-left: 60px;
}
[data-tooltip]:not([data-tooltip-persistent]):before {
    pointer-events: none;
}
.inline-label-icon {
    color: hsl(var(--color-primary));
    vertical-align: middle;
    font-size: 20px;
}
.largeCheckboxContainer {
    width: 65px;
}
.emailBox {
    width:800px;
    display:none;
    padding-bottom:20px;
    position:relative;
    text-align:left;
    background-color: hsl(var(--color-surface));
    font-size: 10px;
}
.exportDeliverySummaryBox {
    display:none;
    width:400px;
    padding-bottom:20px;
    position:relative;
    text-align:left;
    background-color: hsl(var(--color-surface));
    font-size: 10px;
}
.highlighted {
    background-color:yellow;
}

.history-image{
    max-width:700px;
    max-height:300px;
    height:auto;
}

.email-consignment_error_photo{
    max-width:50px;
    max-height:50px;
}

.table-striped > tbody > tr:nth-child(odd) > th {
    background-color: inherit;
}

.table-hover > tbody > tr:hover > th {
    background-color: inherit;
}

.table-hover > tbody > tr:hover > td {
    background-color: hsl(var(--color-gray-50));
}

.table-hover > tbody > tr:hover.highlight > td{
    background-color: hsl(var(--color-green-200));
}

.table-hover > tbody > tr.highlight > td{
    background-color: hsl(var(--color-green-100));
}

.table-hover > tbody > tr:nth-child(even),
.table-hover > tbody > tr:nth-child(odd) {
    background-color: inherit;
}

label {
    display: block;
    font-size: 110%;
    margin-bottom:3px;
}

.radio label,
.checkbox label {
    display: block;
}

div.paginator {
    margin: 20px 0px;
}

.pagination {
    margin: 0px;
}

#header .nav-button {
    background:none!important;
    border:none;
    padding:0!important;
    color: hsl(var(--color-theme-fg));
}
.nav-icon{
    width: 120px;
}

#header .nav-button:hover {
    text-decoration: underline;
}

#header  .nav-button > .dropdown-toggle .caret {
    border-bottom-color: hsl(var(--color-theme-fg));
    border-top-color: hsl(var(--color-theme-fg));
}
iframe .commentsIFrame {
    height: auto;
    width: auto;
    border: 0px;
}

iframe .androidHistoriesFrame{
    height: 99%;
    width: 99%;
    border: 0px;
}

div.parent-display{
    padding: 0px;
    margin-top: 5px;
}

#rightPanel {
    position:fixed;
    top:40%;
    right:0px;
    -webkit-border-bottom-left-radius: 5px;
    -webkit-border-top-left-radius: 5px;
    -moz-border-radius-bottomleft: 5px;
    -moz-border-radius-topleft: 5px;
    border-bottom-left-radius: 5px;
    border-top-left-radius: 5px;
    border-bottom: 1px solid #222;
    border-top: 1px solid #222;
    border-left: 1px solid #222;
    cursor: pointer;
    z-index:10000;
    height: auto;
}

#rightPanelInner {
    width:70px;
    height:auto;
    color: white;
    background-color: rgb(0, 0, 0);
    opacity: 0.8;
    text-align: center;
    padding-top: 5px;
    padding-bottom: 5px;
}

.panelSeperator {
    margin: 2px 0px 2px 0px;
    border-bottom: 1px solid #FFF;
}

#rightPanelUpArrow {
    height: 10px;
    width: 100%;
    text-align:center;
    background: url('../img/slide_arrow_up.png') center top no-repeat;
}

#rightPanelDownArrow {
    height: 10px;
    width: 100%;
    text-align:center;
    background: url('../img/slide_arrow_down.png') center top no-repeat;
}

#topPanel {
    position:fixed;
    top:0px;
    right:50%;
    -webkit-border-bottom-left-radius: 5px;
    -webkit-border-bottom-right-radius: 5px;
    -moz-border-radius-bottomleft: 5px;
    -moz-border-radius-bottomright: 5px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    border-bottom: 1px solid #222;
    border-right: 1px solid #222;
    border-left: 1px solid #222;
    cursor: pointer;
    z-index:10000;
}

#topPanelInner {
    width:270px;
    height:30px;
    color: white;
    background-color: #EEE;
    opacity: 1;
    text-align: center;
    padding-top: 5px;
    padding-bottom: 5px;
}

.modal-dialog.large {
    width: 800px; /* respsonsive width */
}

.modal-backdrop {
    position: fixed;
}

.btn-margin .btn{
    margin: 2px;
}

.btn-lg {
    padding: 10px 16px;
    font-size: 18px;
    border-radius: 6px;
}

.ui-autocomplete {
    z-index: 1060;
}

.icon-faded
{
    opacity:0.3;
    filter:alpha(opacity=30); /* For IE8 and earlier */
}

.icon-faded-med
{
    opacity: 0.5;
    filter:alpha(opacity=50); /* For IE8 and earlier */
}

.xero-icon-sm
{
    background: url('../img/xero.svg') no-repeat left;
    display: inline-block;
    width: 20px;
    height: 20px;
    vertical-align: middle;
}

.xero-icon
{
    background: url('../img/xero.svg') no-repeat left;
    display: inline-block;
    width: 30px;
    height: 30px;
    vertical-align: middle;
}

.quickbooks-icon
{
    background: url('../img/quickbooks.svg') no-repeat left;
    display: inline-block;
    width: 30px;
    height: 30px;
    vertical-align: middle;
}

.quickbooks-icon-sm
{
    background: url('../img/quickbooks.svg') no-repeat left;
    display: inline-block;
    width: 20px;
    height: 20px;
    vertical-align: middle;
}

.myob-icon-sm
{
    background: url('../img/myob.svg') no-repeat left;
    display: inline-block;
    width: 20px;
    height: 20px;
    vertical-align: middle;
}

.myob-icon
{
    background: url('../img/myob.svg') no-repeat left;
    display: inline-block;
    width: 40px;
    height: 30px;
    vertical-align: middle;
}

.reckon-icon
{
    background: url('../img/reckon.svg') no-repeat left;
    display: inline-block;
    width: 35px;
    height: 30px;
    vertical-align: middle;

}

.calculatorDropdown {
    display: inline;
    background-color: #e9ecef;
    width: 33px;
    height: 33px;
    border-top-right-radius: 2px;
    border-bottom-right-radius: 2px;
    margin-left: -1.5px;
    border: 1px rgb(133, 133, 133) solid;
}

.next-step-heading{
    padding-bottom: 80px;
}

.pull-right{
    margin-left: 5px;
}

img.center, div.block-center {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.tight {
    margin: 0px;
    padding: 0px;
    display: inline;
}

div.error-information {
    position: fixed;
    top: 10px;
    left: 50%;
    width: 400px;
    margin-left: -150px;
    z-index: 9999;
    background: hsl(var(--color-surface));
    border: 1px solid hsl(var(--color-red-600));
    display: none;
    font-weight: bold;
}

div.invitation-box {
    margin: 0 auto;
    max-width: 700px;
    text-align: center;
    padding: 5px;
    border: 1px solid hsl(var(--color-fg-7));
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

.strikethrough {
    text-decoration: line-through;
}

.tenant-error{
    background-color: hsl(var(--color-surface));
    font-weight:bold;
    font-size:20px;
    color: hsl(var(--color-red-600));
}

.transparent {
    opacity:0.4;
    filter:alpha(opacity=40);
}

.add-asset-transaction form div {
    clear: both;
    margin-bottom: 0em;
    padding: 0em;
    vertical-align: text-top;
}

.ex-tooltip {
    position: absolute;
    background: #EEE;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
    border-radius: 3px;
    padding: 5px;
    -webkit-box-shadow: 0 1px 3px #000;
    -moz-box-shadow: 0 1px 3px #000;
    -ms-box-shadow: 0 1px 3px #000;
    -o-box-shadow: 0 1px 3px #000;
    box-shadow: 0 1px 3px #000;
    border-collapse: separate;
    display: none;
}

.xchart path:hover,
.xchart rect:hover
{
    opacity:0.7
}


.d3-tip {
    line-height: 1;
    font-weight: bold;
    padding: 12px;
    background: rgba(0, 0, 0, 0.9);
    color: #fff;
    border-radius: 2px;
    font-size: 12px;
}

/* Creates a small triangle extender for the tooltip */
.d3-tip:after {
    box-sizing: border-box;
    display: inline;
    font-size: 10px;
    width: 100%;
    line-height: 1;
    color: rgba(0, 0, 0, 0.9);
    content: "\25BC";
    position: absolute;
    text-align: center;
}

/* Style northward tooltips differently */
.d3-tip.n:after {
    margin: -1px 0 0 0;
    top: 100%;
    left: 0;
}

#widgets-outer {
    width: 960px;
}

.navbar-nav > li > .dropdown-menu {
    margin-top:-2px;
}


/**
Config the widget configuration button
*/
.widget-config-btn {
    background-color: transparent;
    border: transparent
}

table.inside-tab, table.inside-tab>thead>tr>th, table.inside-tab>tbody>tr>th, table.inside-tab>tfoot>tr>th, table.inside-tab>thead>tr>td, table.inside-tab>tbody>tr>td, table.inside-tab>tfoot>tr>td
.inside-tab>.table>thead>tr>th, .inside-tab>.table>tbody>tr>th, .inside-tab>.table>tfoot>tr>th, .inside-tab>.table>thead>tr>td, .inside-tab>.table>tbody>tr>td, .inside-tab>.table>tfoot>tr>td {
    border-top: 0px;
}

.tooltip-wrapper {
    display: inline-block;
    padding:0px;
    margin:0px;
}
form div.tooltip div{
    margin:0px;
}

.start-hidden{
    display: none;
}

.advanced-options > .panel-heading{
    margin-bottom:0px;
}

form div.no-margin-bottom{
    margin-bottom:0px ;
}

form div.panel{
    padding:0px;
}

#sortConsignmentUl { padding: 1em; margin-left: 1em;}
#sortConsignmentUl li { font-size: 1.3em; margin-left: 1.5em;}

#saveSortOrderBtn { margin-left: 1em; }

.table>thead>tr>td.padcell, .table>tbody>tr>td.padcell, .table>tfoot>tr>td.padcell {
    padding-right: 12px;
    padding-left: 5px;
}

div.dataTables_filter > label
{
    display:inline;
}

.fullScreen {
    padding: 10px;
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 10;
    background-color: hsl(var(--color-surface));
    overflow:auto;
}

.globalThrobber {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    display:none;
    margin: auto;
    opacity: 0.6;
    filter: alpha(opacity=60);
    background: url('../img/global-throbber.gif') 50% 50% no-repeat #000000;
    background-size: 60px 60px;
}

.localThrobber {
    width: 100%;
    height: 100%;
    min-height: 100px;
    margin: auto;
    opacity: 0.6;
    filter: alpha(opacity=60);
    background: url('../img/global-throbber.gif') 50% 50% no-repeat #000000;
    background-size: 60px 60px;
}

.dataTableToolbar {
    float: left;
}
.dataTables_wrapper div, div.noPad{
    clear: none;
    margin-bottom: 0px;
    padding: 0px;
}

.chargeConfig .modal-body label {
    display: inline;
    width: 50%;
}

.chargeConfig .modal-body .input {
    margin: 10px;
}

#notification-container {
    background-color: hsl(var(--color-surface));
    border: 1px solid hsl(var(--color-fg-7));
    box-shadow: 0 3px 8px rgba(0, 0, 0, .25);
    position: absolute;
    right: 0;
    overflow-x: hidden;
    overflow-y: auto;
    width: 400px;
    z-index: 10000;
    display: none;
    margin-top: 5px;
    min-height: 200px;
}

#notification-body {
    min-height:200px;
    width:100%;
    height:100%;
    color: hsl(var(--color-fg-base));
}

div.notification-content {
    padding: 5px;
    border-bottom: 1px solid hsl(var(--color-fg-7));
}
div.notification-new {
    background-color: hsl(var(--color-primary-50));
}
div.notification-time {
    font-size: 10px;
}
.content-window-header{
    font-weight: bold;
}
.content-window-info{
    font-size: 10px;
    font-style: italic;
    color: #0e0e0e;
    font-weight: normal;
}
.content-window{
    max-height:250px;
}
table.content-window-table th{
    padding: 5px;
}

.map-controls{
    background-color: hsl(var(--color-surface));
    text-align:center;
    border: 1px solid hsl(var(--color-fg-7));
    border-radius: 8px;
}
div.top-controls{
    min-width:300px;
    border-top: 0px;
    border-radius: 0px 0px 8px 8px;
    padding-bottom:10px;
}
div.driver-controls{
    min-width:200px;
    border-left: 0px;
    min-height: 200px;
    border-radius: 0px;
    max-height:300px;
    overflow-y: scroll;
}
div.driver-controls td{
    font-weight: bold;
}
.driver-labels {
    margin-top:10px;
    color: white;
    font-family: "Lucida Grande", "Arial", sans-serif;
    font-size: 10px;
    text-align: center;
    width: 30px;
    white-space: nowrap;
}
.driver-complete {
    font-size: 20px;
}

.mapDiv {
    width:100%;
    height:500px;
    position: absolute;
    left: 0;
}


.scrollable-menu{
    height: auto;
    max-height: 200px;
    overflow-x: hidden;
}


#jsFilePreviewDiv.affix{
    position: fixed;
    top: 0px;
}

/* bootstrap datetimepicker widget changes for the app */
@media only screen and (max-device-width : 1024px) {

    .bootstrap-datetimepicker-widget {
        width: 45em !important;
        margin: 0px 100px 0px -170px !important;
        position: fixed !important;
        top: 35% !important;
        left: 40% !important;
    }

    .bootstrap-datetimepicker-widget table tr {
        font-size: 1.5em !important;
        height: 54px !important;
        line-height: 40px !important;
    }

    input[name='expiry_date']:focus{
        color : transparent;
        text-shadow : 0 0 0 #000;
        outline : none;
    }

}

input.datePicker {
    position: relative;
}

.inline-block{
    display: inline-block !important;
}

.top-5{
    top: 5px !important;
}

table tr.sortableTr {cursor: move;}
table tr.sorting-row td {background-color: hsl(var(--color-green-100));}

.width-50-percent {
    width: 50% !important;
}

.thin-box {
    outline-style: solid;
    outline-width: thin;
    padding: 4px;
    margin-left:3px;
    margin-right: 3px;
    outline-color: gainsboro;
    background-color: hsl(var(--color-surface));
    cursor: default;
    vertical-align: middle;
}

th.collapse-box, td.collapse-box {
    width: 1px;
    white-space: nowrap;
}

.sticky-button-bottom {
    margin-top: 10px;
    position: fixed;
    bottom:20px;
    z-index: 1000;
}

.bottom-10 {
    bottom: 10% !important;
}

.margin-bottom-0 {
    margin-bottom: 0px !important;
}

.margin-bottom-40 {
    margin-bottom: 40px !important;
}

.stickyBtns{
    z-index: 1000 !important;
}

.select2-search-field {
    width: 100%;
}

.affix-top > .panel-heading {
    background-color: hsl(var(--color-surface)) !important;
    border-color: hsl(var(--color-surface)) !important;
}

.affix {
    top:0 !important;
    min-width: 98% !important;
}

.dynamic-width-1 {
    width: 80%;
    max-width: 400px;
}

.dynamic-modal-width {
    width: 90% !important;
    min-width: 700px !important;
}

#bulkConsignmentAllocationTable, #bulkConsignmentAllocationTableSelectionTable, #deliveriesTable tbody tr {
    font-size: 12px;
    line-height: 1;
}

a.disabled {
    pointer-events: none;
}

div.half-width div.jsSectionAdhocChargeData {
    width:100%;
}

.online-dot:before {
    color: hsl(var(--color-green-600));
    content: "\25cf";
    font-size: 1.5em;
}
.offline-dot:before {
    color: hsl(var(--color-red-600));
    content: "\25cf";
    font-size: 1.5em;
}
.warning-dot:before {
    color: hsl(var(--color-orange-500));
    content: "\25cf";
    font-size: 1.5em;
}

#StatusAlertBar {
    min-width: 950px;
    padding: 0;
    margin: 0;
}
.status-update-list, .status-update-item, .info-banner-list, .info-banner-item {
    margin: 0;
    border: none;
}
.info-banner-list .list-group-item {
    -webkit-border-radius: 0;
    border-radius: 0;
    background-color: #44AEAC;
    color: white;
}
.info-banner-list .list-group-item A {
    color: white;
}

table.shrink tr td:first-child {
    white-space:nowrap;
}
table.shrink tr td:not(:first-child) {
    width: 99%;
}

/* provides space above to separate content from what is above it */
.content-break {
    margin-top: 40px;
}

/* limits the width of a piece of content and centers it */
.content-cap-width {
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
}

/* For Super-User Only sections, highlight with a red box so it is obvious */
div.super-user-only {
    border:1px solid hsl(var(--color-red-600));
}

/* For super-user-only icons, make them appear in red */
svg.super-user-only {
    color: hsl(var(--color-red-600));
}

button.super-user-only {
    border-color: hsl(var(--color-red-600));
}

button.cc-add-btn {
    background-color: #28a745;
    border-color: #28a745;
}

.input-size-alert {
    width: 97%;
    margin: .5em;
}

table#ConsignmentDetailsTable tr td:first-child {
    width: 40%;
}

table.strip-border {
    border-collapse: collapse;
    border-spacing: 0;
}

table.clear-background tr {
    background: transparent;
}

td.bare {
    border-bottom: none; padding: 0; margin: 0;
}

table#ConsignmentEditTable tr td:first-child {
    width: 40%;
}

tr.border-none td {
    border: none;
}

table.consignment-add-form-advanced tr td:first-child {
    width: 30%;
}

table.row-selection-bg-danger tr.highlight {
    background: hsl(var(--color-red-100));
}

/* Terms of Service styling */
#TermsOfServiceContainer {
	width: 100%;
	margin: 0 auto;
}

#TermsOfServiceModalDialogContainer {
	width: 80vw;
	overflow-y: initial !important;
}

#TermsOfServiceModalBody {
	height: 60vh;
	overflow-y: auto;
}

#TermsOfServiceTerms li > ul {
	padding-bottom: 0.5em;
}

/* Privacy Policy styling */
#PrivacyPolicyContainer {
	width: 800px;
	margin: 0 auto;
}

/* Login page links */
.login-links-container {
	background-color: hsl(var(--color-canvas));
	clear: both;
	margin: 1em auto;
	padding: 2em;
	display: flex;
	flex-direction: row;
}

.login-links-container a {
	color: hsl(var(--color-fg-4));
    text-decoration: none;
}

.login-links-container a:hover {
    color: hsl(var(--color-fg-base));
}

#CalculateDistanceButton {
    margin-left: 10px;
}

/** BI Dashboard Settings tab styles **/
.bi-embedded-dashboard-settings {
    margin-bottom: 0;
}

.bi-embedded-dashboard-settings .bi-embedded-setting {
    margin-bottom: 0;
    display: inline-block;
}
/** Progress Circle styles **/
.chart .progress-details {
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin-bottom: 0;
    padding: 0;
}

.chart .progress-details-inner {
    margin: 0 auto;
    text-align: center;
    padding: 0;
}

.chart {
    position: relative;
    box-sizing: border-box;
    margin-bottom: 0;
    margin-right: 10px;
    padding: 0;
    display: inline-block;
}

.chart .circular-chart {
    display: block;
    width: 100%;
    max-width: 4em;
}

.chart .circle-bg {
    fill: none;
    stroke: hsl(var(--color-fg-7));
    stroke-width: 3.8;
}

.chart .circle {
    fill: none;
    stroke-width: 2.8;
    stroke-linecap: round;
    animation: progress 1s ease-out forwards;
}

@keyframes progress {
    0% {
        stroke-dasharray: 0 100;
    }
}

.chart .circular-chart.blue .circle {
    stroke: hsl(var(--color-primary-500));
}

.chart .type {
    line-height: 1.1;
    display: block;
    fill: hsl(var(--color-fg-3));
    font-family: sans-serif;
    font-size: 0.7em;
    text-anchor: middle;
}

.chart .percentage {
    line-height: 1.1;
    display: block;
    fill: hsl(var(--color-fg-3));
    font-family: sans-serif;
    font-size: 0.8em;
    text-anchor: middle;
}

.hideDiv {
    display: none;
}

tr.total-toprow {
    border-top: 2px solid hsl(var(--color-fg-3));
    font-weight: bold;
}

tr.total-row {
    font-weight: bold;
}
/** End Progress Circle Styles **/

/** Billing Plan Excess Styles **/
.excess-form-container {
    margin-bottom: 0;
}

.charge-band-title {
    padding: 0 0 0 .5em;
    font-size: 110%;
    font-weight: 700;
    margin-bottom: 0;
}

.charge-band-wrapper {
    padding: 0;
    margin-bottom: 0;
}

.charge-band-field .input-group {
    padding: 0;
}

.charge-band-field .input-group input {
    height: 60px;
}

.charge-band-field .input-group .form-control:focus {
    border-color: #000000;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(0, 0, 0, 0.6);
}
/** End Billing Plan Excess Styles **/

.flex-form-row {
    display: flex;
    align-items: center;
    padding: 0;
}

.flex-form-row input {
    padding: 0.9rem;
}

.modal-button-top {
    position: absolute;
    top: 0;
    right: 0;
    margin: 1rem 4rem 1rem 1rem;
}

/* Overriding bootstrap button background color with theme blue */
.btn.btn-primary {
    background-color: hsl(var(--color-primary));
}

.btn.btn-primary:hover {
    background-color: hsl(var(--color-primary-600));
}

.nav-tabs.page-tabs>li>a {
    display: inline-flex;
    align-items: center;
    column-gap: 8px;
}

/** Form validation **/
.help-block .help-block-item {
    display: block;
    margin-bottom: 5px;
}

.help-block .help-block-item-warning {
    color: #8a6d3b;
}
/** End Form validation **/

.code-error {
    color: #d9534f;
}

/* End of Year Wrapped Banner */
#EndOfYearWrappedAlerts .list-group-item {
    -webkit-border-radius: 0;
    border-radius: 0;
    background-color: #44AEAC;
    color: white;
}

#EndOfYearWrappedAlerts .list-group-item A {
    color: white;
}

/* Info banner */
.info-banner {
    -webkit-border-radius: 0;
    border-radius: 0;
    background-color: #44AEAC;
    color: white;
    padding: 10px 15px;
}
.info-banner A {
    color: white;
}
.info-banner > div {
    text-align: center;
}
.info-banner > div:last-child {
    margin-top: 10px;
}
@media only screen and (min-width: 767px) {
    .info-banner {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 15px;
    }

    .info-banner > div:first-child {
        flex-grow: 1;
        text-align: center;
    }

    .info-banner > div:last-child {
        flex-shrink: 0;
        margin: 0;
        text-align: right;
    }
}