html,
body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
    font-family: Arial, "Lucida Grande", Verdana, Helvetica, sans-serif;
    font-size: 12px;
    text-align: left;
    position: relative;
}

h1,
h2,
h3,
h4,
h5 {
    color: #000;
}

a {
    outline: none;
}

#search-contacts-input {
    margin-bottom: 5px;
}

.cell-right {
    text-align: right;
}

.cell-left {
    text-align: left;
}

.cell-center {
    text-align: center;
}

#flash {
    width: 600px;
    margin: -30px 0 0 -300px;
    position: absolute;
    top: 50%;
    left: 50%;
    padding: 10px 5px 10px 30px;
    text-align: center;
    font-size: 16px;
    z-index: 500;
}

.flash_alert {
    display: block;
    border: 1px solid #ccc;
    border-color: #c99;
    color: #fff;
    background: url(../images/ui/alertbad_icon.gif) #c00 left no-repeat;
}

.flash_hide {
    display: none;
}

.flash_notice {
    display: block;
    border: 1px solid #9c9;
    color: #060;
    background: url(../images/ui/alertgood_icon.gif) #e2f9e3 left no-repeat;
}

.flash_status {
    display: block;
    border: 1px solid #9c9;
    color: #060;
    background: #e2f9e3 left no-repeat;
}

.flash_warn {
    display: block;
    border: 1px solid #d6a23c;
    background-color: #ffffcc;
    color: #555;
}

.hide_div {
    display: none;
}

.update_alert {
    display: block;
    color: red;
    background-color: white;
    color: red;
    border: 1px solid red;
    padding: 15px;
    text-align: center;
    line-height: 150%;
}

#status_message {
    width: 700px;
    margin: 0 0 10px -375px;
    position: absolute;
    left: 50%;
    padding: 10px 5px 10px 30px;
    text-align: center;
    font-size: 16px;
    z-index: 10;
}

#logo {
    position: absolute;
    top: 5px;
    left: 0px;
    width: 354px;
    height: 54px;
    background: transparent url("../images/ui/headlight-route-planner.png") no-repeat 0 0;
}

#attribution {
    position: absolute;
    top: 60px;
    left: 15px;
    font-size: 14px;
}

#attribution a {
    color: #3392f7;
}

#active-database {
    position: absolute;
    top: 10px;
    right: 160px;
    width: 350px;
    height: 25px;
}

#dashboard-username {
    position: absolute;
    top: 70px;
    right: 440px;
}

#pageHeader {
    height: 90px;
    margin: 0;
    position: relative;
    border-bottom: 2px solid black;
}

#pageHeader-right {
    padding: 5px 15px 0 0;
    float: right;
    font-size: 12px;
    font-weight: normal;
    text-align: right;
}

#pageHeader-right select {
    /*color:gray;*/
    font-size: 14px;
    height: 25px;
    width: 275px;
}

#pageHeader-right select option {
    padding: 5px;
    width: 365px;
}

#pageHeader-right select option.suspended {
    background-color: #f76768;
}

#wrapper {
    border: 0;
    margin: 0;
}

#contentarea {
    position: relative;
    margin: 0;
    padding: 0 0 0px;
}

#footer {
    font-size: 11px;
    padding: 10px;
    text-align: center;
    height: 30px;
}

#footer a {
    font-size: 11px;
    margin-right: 5px;
}

#dashboard-right {
    position: relative;
    padding: 0 0 10px;
    margin: 0 0 0 260px;
}

#dashboard-right img {
    border: 0;
}

#dashboard-left {
    position: relative;
    float: left;
    width: 260px;
    padding: 0;
    margin: 0;
    font-size: 12px;
}

#dashboard-right fieldset {
    font-size: 14px;
    padding: 0px 10px 10px 10px;
    border: 1px solid #000;
}

#dashboard-right fieldset legend {
    font-weight: bold;
    padding: 0 3px 0 5px;
    float: none;
    width: auto;
}

#dashboard-table {
    border-collapse: collapse;
    margin: 20px auto 0 auto;
}

#progress {
    vertical-align: middle;
}

#accountInformation {
    color: #666;
    font-weight: bold;
    padding: 5px 0 0 10px;
    border-right: 1px solid #999;
    height: 100%;
}

#accountInformation p {
    font-weight: normal;
    color: #000;
    line-height: 125%;
}

#accountInformation h2 {
    text-align: left;
    font-size: 14px;
}

#accountInformation h3 {
    color: #666;
    font-size: 12px;
    padding: 0;
    text-align: left;
}

#accountInformation ul {
    font-weight: normal;
    margin-left: 0px;
    padding-left: 15px;
    list-style-type: square;
}

#accountInformation li {
    padding-bottom: 5px;
    color: #000;
}

#accountInformation a:link {
    color: #00f;
}

#accountInformation a:visited {
    color: #00f;
}

#accountInformation a:hover {
    color: #000;
    text-decoration: underline;
}

#accountInformation a:active {
    color: #000;
}

#invite_email {
    margin-left: 10px;
    width: 250px;
}

#billing_info img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 10px;
}

#billing h3 {
    font-size: 16px;
    margin: 20px 0 5px 0;
}

#billing p {
    font-size: 14px;
    margin: 0;
}

#placingplantable {
    border-collapse: collapse;
    width: 80%;
    font-size: 16px;
    margin: 20px auto 20px auto;
    border: 1px solid black;
    background-color: white;
}

#placingplantable th {
    text-align: right;
    padding: 10px;
    width: 45%;
}

#last_fleet_manager_sync {
    background-color: #90ee90;
    padding: 5px;
    text-align: center;
    font-weight: bold;
}

h3.importheader {
    background-color: #90ee90;
    padding: 5px;
    margin: 10px;
    text-align: center;
    font-weight: normal;
    font-size: 1.17em;
}

h3.importheader span {
    float: right;
}

h3.importheader-failure {
    background-color: #c00;
    padding: 5px;
    text-align: center;
    color: white;
}

h3.importheader-failure span {
    float: right;
}

.dashboard_status_message {
    background-color: #90ee90;
    padding: 5px;
    margin: 10px;
    text-align: center;
    font-weight: normal;
    font-size: 16px;
}

.dashboard_status_message span {
    float: right;
}

.section-header {
    text-align: center;
    text-transform: capitalize;
    font-style: italic;
    background-color: #ccc;
    font-size: 14px;
    font-weight: bold;
}

#calTypeCell input {
    text-align: center;
}

#calTypeCell input {
    width: 20px;
}

#my_settings input {
    width: 290px;
}

.dashboard-upload-activity {
    border-collapse: collapse;
    background-color: white;
    width: 98%;
}

.dashboard-upload-activity th {
    padding: 3px;
    text-align: center;
    border: 1px solid #555;
    background-color: #ddd;
}

.dashboard-upload-activity td {
    padding: 3px;
    text-align: center;
    border: 1px solid #555;
}

.dashboard-upload-activity a:link,
.dashboard-upload-activity a:visited,
.dashboard-upload-activity a:hover,
.dashboard-upload-activity a:active {
    color: #f00;
}

.dashboard-upload-activity a {
    padding-right: 5px;
    float: right;
}

/* manage users */

#users {
    list-style-type: none;
    padding: 0;
    margin: 0 auto;
}

#users a {
    font-size: 12px;
}

#users a:link,
#users a:visited,
#users a:active {
    color: #00f;
    text-decoration: none;
}

#users a:hover {
    color: #000;
    text-decoration: underline;
}

#users li {
    border: 1px solid #ccc;
    padding: 0px;
    margin-bottom: 5px;
    width: 100%;
}

.user_table_admin {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
}

.user_table_user {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
}

.user_table_user_fleet_manager {
    width: 100%;
    border-collapse: collapse;
    background: #e5ecf3;
    background: red;
}

.user_table_invite {
    width: 100%;
    border-collapse: collapse;
    background: lightgreen;
}

.user_table_expire {
    width: 100%;
    border-collapse: collapse;
    background: #fdd;
    font-style: italic;
}

/* .user_table_admin:hover, .user_table_user:hover, .user_table_invite:hover, .user_table_expire:hover {  background: #A8C7FF; } */
.user_table_admin td {
    padding: 0 5px 2px 3px;
}

.user_table_user td {
    padding: 0 5px 2px 3px;
}

.user_table_user_fleet_manager td {
    padding: 0 5px 2px 3px;
}

.user_table_invite td {
    padding: 0 5px 2px 3px;
}

.user_table_expire td {
    padding: 0 5px 2px 3px;
}

.depot_link a:link,
.depot_link a:visited,
.depot_link a:active,
.depot_link a:hover {
    font-size: 12px;
    color: #f00;
    text-decoration: underline;
}

.dashboard_settings_controls {
    margin-top: 20px;
    text-align: right;
}

#customer_search {
    margin: 0;
    padding: 3px;
}

#customer_search_header {
    border: 2px solid #090;
    margin: 0;
    padding: 5px;
    text-align: center;
    font-weight: bold;
    background-color: #eee;
}

#customer_search_results {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: auto;
    text-align: left;
}

#customer_search_results li {
    border: 1px solid #000;
    margin: 3px;
    padding: 3px;
}

#customer_search_results li:hover {
    background-color: #d8e4b2;
}

#customer_search_results p {
    margin: 0;
    padding: 0;
}

.sr_normal {
    background-color: #ffd;
}

.sr_hover {
    background-color: #d8e4b2;
}

#columns-clearer {
    width: 99%;
    clear: both;
    margin: 0px;
    padding: 0px;
}

/* signup */
.table_dialog {
    width: 100%;
}

.table_dialog input {
    padding: 3px;
    width: 370px;
    margin-bottom: 3px;
}

.table_dialog th {
    padding-top: 0px;
    text-align: right;
    white-space: nowrap;
    width: 160px;
}

.table_dialog td {
    padding-top: 3px;
    padding-left: 10px;
}

.table_dialog select {
    padding: 3px;
    width: 250px;
    margin-bottom: 3px;
}

.table_dialog h5 {
    font-size: 12px;
    color: #000;
    margin: 0;
    padding: 0;
}

#section_testdrive_customer_service {
    text-align: center;
    margin: 50px auto 0 auto;
}

#section_testdrive_fleet_management {
    text-align: center;
    margin: 50px auto 0 auto;
}

.headlightIcon {
    width: 220px;
    margin: 0 auto 0 auto;
}

.beta {
    background-color: #ddd;
}

.headlightIcon a {
    text-align: center;
    padding: 10px;
    display: block;
}

.headlightIcon a:hover,
.headlightIcon a:link,
.headlightIcon a:visited,
.headlightIcon a:active {
    text-decoration: none;
}

.headlightIcon a:hover {
    background-color: #ffcc33;
}

#manage_databridge table {
    text-align: center;
    width: 95%;
    background-color: #fff;
    margin-top: 10px;
    border: 1px solid #999;
    border-collapse: collapse;
    font-size: 12px;
}

#manage_databridge th {
    background-color: #ccc;
    padding: 3px;
}

#manage_databridge td {
    background-color: #fff;
    padding: 3px;
    border-top: 1px solid #999;
}

#manage_databridge fieldset {
    padding: 20px;
}

#token_to_redeem {
    width: 300px;
}

#invoice_div {
    white-space: pre;
    border: 1px solid #ccc;
    font-size: 11px;
    height: 425px;
    overflow: auto;
    background-color: #fff;
    padding: 3px;
}

#invoiceTable {
    border: 1px solid #000;
    border-collapse: collapse;
    width: 580px;
    margin: 30px auto 30px auto;
    font-size: 12px;
}

#invoiceTable th {
    text-align: center;
    border: 2px solid #000;
    font-weight: bold;
    background: #eee;
}

#invoiceTable td {
    padding: 3px;
    border: 1px solid #000;
}

#invoiceTable tr {
    background: #fff;
}

#invoiceTable tr:hover {
    background: #a8c7ff;
}

.Bronze {
    background-color: #8c7853;
}

.BronzeII {
    background-color: #a67d3d;
}

.Silver {
    background-color: #e6e8fa;
}

.Gold {
    background-color: #d9d919;
}

.Developer {
    background-color: #ffffbb;
}

#tableSEPlans {
    width: 100%;
    text-align: center;
    font-size: 16px;
    line-height: 150%;
    border-collapse: collapse;
    border: 2px solid #333;
    background-color: #fff;
}

#tableSEPlans td {
    border: 1px solid #888;
    padding: 3px;
    width: 18%;
}

#tableSEPlans th {
    border: 1px solid #888;
    padding: 3px;
    font-weight: bold;
}

#tableSEPlans tbody th {
    padding-right: 10px;
    text-align: right;
}

#tableSEPlans thead {
    border-bottom: 2px solid #000;
}

#tableSEPlans input {
    width: 20px;
}

/* developer databridge styling
-------------------------------------------------------*/

#manualdatabridgetable {
    background-color: #fff;
    width: 560px;
    margin: 10px auto;
    border: 1px solid #333;
}

#manualdatabridgetable th {
    padding-left: 10px;
    width: 100px;
}

#manualdatabridgetable td {
    text-align: left;
    padding: 3px;
}

#manualdatabridgetable hr {
    padding: 0;
    margin: 0;
}

#manualdatabridgetable #smart-sync-upload-button {
    padding: 15px 0 15px 0;
    text-align: right;
}

#databridge_disable_productfile p {
    margin: 15px;
    text-align: center;
}

#databridge_warning {
    float: right;
    padding-right: 15px;
}

#databridge_cancel {
    padding: 15px;
}

#databridge-activity {
    color: gray;
    font-weight: normal;
    background-color: #ddd;
    border: 1px solid #d3d3d3;
    border-collapse: collapse;
    width: 550px;
    margin: 15px auto;
}

#databridge-activity th {
    width: 100px;
    font-weight: normal;
}

#databridge-activity td {
    color: black;
}

#databridge-activity hr {
    margin: 0 20px 0 20px;
    border-color: #aaa;
}

#dropbox-credentials {
    margin: 15px auto;
    width: 550px;
    border: 1px solid #d3d3d3;
    background-color: #ddd;
    border-collapse: collapse;
}

#dropbox_password {
    letter-spacing: 2px;
}

#calType12 {
    margin: 0px;
    _margin: -3px;
}

.activeplan {
    background-color: #ffffbb;
}

#manage_uploads_controls td {
    border: 1px solid #000;
}

#formCalendar label,
#formProductFields label {
    font-size: 12px;
}

#formCalendar h3,
#formProductFields h3 {
    font-size: 13px;
    font-weight: bold;
    margin: 0;
    padding: 0;
}

.cal_radio_row {
    padding-top: 5px;
}

.cal_radio_row label {
    display: inline-block;
    vertical-align: middle;
    margin-left: 5px;
}

.cal_radio_row input {
    font-size: 10px;
    display: inline-block;
    vertical-align: middle;
    padding: 0;
    margin: 0;
}

#formProductFields .white-section label {
    text-align: right;
    font-size: 12px;
    margin: 5px;
    display: inline-block;
    width: 80px;
}

#formProductFields .white-section input {
    font-size: 12px;
    width: 160px;
}

#formProductFields .white-section .clear {
    clear: both;
}

#tblProductFields p {
    line-height: 125%;
}

/*#formDefaults .white-section label {  text-align:right; font-size:12px;  margin:5px; display:inline-block; width: 125px; }
#formDefaults .white-section input {  font-size:12px;  width:80px;  }
*/
#formDefaults .white-section label {
    margin: 5px;
    display: inline-block;
    width: 150px;
}

#formDefaults .white-section input {
    font-size: 12px;
    width: 80px;
}

#formMisc .white-section label {
    float: left;
    margin: 5px 0px;
}

#formMisc .white-section input {
    margin: 5px 0px;
    width: 25px;
}

#holiday-edit label {
    margin: 5px;
}

#holiday-edit a {
    float: right;
}

.white-section {
    width: auto;
    margin: 10px auto 10px;
    background-color: #fff;
    padding: 10px;
}

#holiday-list {
    list-style-type: none;
    padding: 0;
    margin: 0;
    border: 1px solid #ddd;
}

#holiday-list li {
    padding: 2px;
}

#holiday-list li:hover {
    background-color: #a8c7ff;
}

#holiday-list .even {
    background-color: #ddd;
}

#holiday-list .date {
    float: left;
    width: 130px;
}

#holiday-list .label {
    float: left;
    width: 370px;
}

#holiday-list li:hover .date {
    font-weight: bold;
}

#holiday-list li:hover .label {
    font-weight: bold;
}

#formCalendar .flash_alert,
#formCalendar .flash_notice {
    width: 260px;
    text-align: center;
    padding: 0;
    margin: 0 0 5px 20px;
    font-size: 12px;
    background-image: none;
}

#account-summary {
    border-collapse: collapse;
    width: 95%;
    text-align: center;
}

#account-summary thead th {
    text-align: center;
    font-size: 12px;
    font-weight: bold;
    color: #000;
    border: 1px solid #ddd;
}

#account-summary tbody th {
    text-align: right;
    font-size: 12px;
    font-weight: bold;
    color: #000;
    border: 1px solid #ddd;
}

#account-summary tbody td {
    text-align: right;
    font-size: 12px;
    font-weight: normal;
    color: #000;
    border: 1px solid #ddd;
}

/*  slider styling
-------------------------------------*/
div.slider {
    width: 100px;
    height: 21px;
    background: #ddd;
}

div.slider div.knob {
    background: #000;
    width: 21px;
    height: 21px;
}

div.advanced {
    width: 100px;
    float: left;
    margin: 5px 0 0 5px;
    background: url(../images/ui/slider.png) 0 center repeat-x;
}

div.advanced div.knob {
    background: no-repeat center center;
    cursor: pointer;
}

div#red div.knob {
    background-image: url(../images/ui/sliderknob.png);
}

/*  search contacts styling
-------------------------------------*/
#search-contacts {
    display: flex;
    flex-direction: column;
}

#search-contacts-header {
    text-align: center;
    padding: 5px 2px 5px 2px;
}

#search-contacts-header input {
    width: 90%;
}

#search-contacts-header h3 {
    font-size: 14px;
    font-weight: normal;
}

#search-filter-interactive {
    list-style-type: none;
    padding: 0;
    margin: 0;
    flex: 1;
    overflow-y: auto;
    background-color: #eee;
}

#search-contacts-header-filter {
    margin: 8px 0 0 0;
}

#search-contacts-header-filter a {
    padding: 2px 3px 2px 3px;
    text-decoration: none;
    margin: 2px;
    color: black;
}

#search-contacts-header-filter a:hover {
    background-color: #b5c9dd;
}

#search-contacts-header-filter .sel {
    background-color: #9db8d2;
    font-weight: bold;
}

#search-contacts-header-pagination {
    position: relative;
    margin: 5px 0 0 0;
    height: 25px;
    line-height: 25px;
}

#search-contacts-header-pagination a {
    padding: 2px 4px 2px 4px;
    text-decoration: none;
    margin: 1px;
    color: black;
}

#search-contacts-header-pagination a:hover {
    background-color: #b5c9dd;
}

#search-contacts-header-pagination .sel {
    background-color: lightblue;
    font-weight: bold;
}

#search-contacts-header h3 {
    margin: 0 0 3px 0;
    padding: 0;
}

#search-contacts-footer {
    text-align: center;
    flex-shrink: 0;
}

#search-filter-interactive {
    background-color: #fff;
}

#search-filter-interactive li {
    border-top: 1px solid #ccc;
    padding: 5px;
    cursor: pointer;
}

/* #search-filter-interactive li { position:relative; } */

#search-filter-interactive li p {
    clear: both;
    padding: 0;
    margin: 0;
    font-size: 12px;
    height: 16px;
    line-height: 16px;
    white-space: nowrap;
    overflow: hidden;
}

p.c-lft {
    float: left;
    width: 120px;
    white-space: nowrap;
    overflow: hidden;
}

div.c-rht {
    float: right;
    width: 100px;
    text-align: right;
    overflow: hidden;
}

.c-name {
    font-weight: bold;
}

#dashboard-tabs {
    position: absolute;
    right: 10px;
    bottom: 0;
}

a.return {
    margin: 20px 0 0 20px;
    width: 600px;
    text-decoration: none;
}

.header_grey {
    padding: 0 3px 0 3px;
    font-size: 14px;
    color: blue;
    line-height: 30px;
}

.tooltip {
    background-color: #eee;
    color: #333;
    font-size: 12px;
    border: 1px solid #111;
    padding: 2px 3px 2px 3px;
    white-space: nowrap;
}

a.viewclose {
    margin: 0 20px 0 20px;
    float: right;
}

.section-info {
    padding: 20px 0 15px 0;
    text-align: center;
    color: #555;
    font-weight: bold;
    font-style: italic;
}

#search-filter-interactive li.unpinned {
    border: 2px solid #f76768;
}

#search-filter-interactive li.highlight {
    background-color: #e5ecf3;
}

#multiple-geomatches-list {
    list-style-type: none;
    padding: 0;
    width: 325px;
    margin: 0 auto;
}

#multiple-geomatches-list li {
    padding: 3px;
    margin: 3px;
    border: 1px solid #ccc;
}

#multiple-geomatches-list li a {
    display: block;
    padding: 2px;
    text-decoration: none;
}

#multiple-geomatches-list li a:hover {
    background-color: #a8c7ff;
}

#contactadd a {
    color: blue;
}

#multiple-deliveries-list {
    list-style-type: none;
    width: 260px;
    padding: 0;
    margin: 0 auto;
}

#multiple-deliveries-list li {
    padding: 3px;
    margin: 0px 3px 0px 3px;
    border-top: 1px solid #ccc;
}

.padleft {
    margin-left: 10px;
}

#btnDeliveryCreateClose, #btnDeliveryDeleteClose, #btnDeliveryUpdateClose, #btnSuggestRoutesClose {
    position: absolute;
    top: 3px;
    right: 3px;
    height: 15px;
    width: 15px;
    border: 0;
    cursor: pointer;
}

#depot-edit-close {
    position: absolute;
    top: 3px;
    right: 3px;
}

#depot-edit-close img {
    height: 15px;
    width: 15px;
    border: 0;
}

#product-details {
    margin: auto;
    position: absolute;
    top: 50px;
    width: 75%;
    left: 20%;
    background-color: white;
    border: 5px solid #bbb;
    z-index: 200;
    text-align: left;
}

#product-details-close {
    float: right;
}

.map-pop {
    margin: auto;
    position: absolute;
    top: 50px;
    width: 75%;
    left: 20%;
    background-color: white;
    border: 5px solid #bbb;
    z-index: 200;
    text-align: left;
}

.map-pop h2 {
    margin: 5px 0 5px;
    padding: 5px;
    font-size: 16px;
}

.map-pop table {
    border-collapse: collapse;
    width: 330px;
    margin: 0 auto;
}

.map-pop th {
    width: 80px;
    text-align: right;
    padding: 2px 5px 2px 2px;
}

.map-pop td {
    text-align: left;
}

.map-pop input {
    width: 230px;
}

.map-pop input.tw {
    width: 125px;
}

.map-pop textarea {
    width: 330px;
    height: 100px;
}

.map-pop td.quad input {
    width: 40px;
    text-align: right;
}

.map-pop h3 {
    padding: 15px;
}

.map-pop h3.toggler {
    margin: 3px;
    font-size: 14px;
    padding: 3px 3px 3px 15px;
    text-align: left;
    cursor: pointer;
    background: transparent url(../images/ui/navi-closed.png) no-repeat left center;
}

.map-pop h3.open {
    background: transparent url(../images/ui/navi-open.png) no-repeat left center;
}

div #multiple-deliveries {
    margin: auto;
    width: auto;
}

.delivery-crud {
    margin: auto;
    position: absolute;
    top: 50px;
    width: 400px;
    left: 45%;
    background-color: white;
    border: 5px solid #bbb;
    z-index: 200;
    text-align: left;
}

.location-crud {
    margin: auto;
    position: absolute;
    top: 50px;
    left: 45%;
    background-color: white;
    border: 5px solid #bbb;
    z-index: 200;
    text-align: left;
}

#contact-geocode-edit {
    float: left;
    margin-left: 10px;
}

#contact-geocode-skip {
    float: right;
    margin-right: 10px;
}

.greyitalic {
    text-align: center;
    color: #555;
    font-style: italic;
}

.myCalendarSettings {
    width: 560px;
}

.myCalendarSettings td {
    padding: 5px;
}

.myCalendarSettings th {
    padding: 5px;
}

.myCalendarSettings textarea {
    width: 550px;
}

.myCalendarSettings textarea {
    height: 180px;
}

.myCalendarSettings a {
    font-size: 11px;
    margin: 0 8px 0 8px;
}

.myCalendarSettings p {
    font-size: 12px;
    font-weight: normal;
}

.myCalHdrLft {
    float: left;
    width: 45%;
}

.myCalHdrRht {
    float: left;
    width: 55%;
    text-align: right;
}

#pano p {
    margin: 0;
    padding: 5px;
    font-size: 14px;
}

/* #delivery_notes { border:1px solid #CCC;margin:10px 5px 0 5px;padding:5px;background-color:#EEE; } */

#announcement {
    z-index: 1;
    position: absolute;
    left: 15%;
    top: 75px;
    width: 70%;
    min-height: 40px;
    padding: 10px;
}

#announcement h2 {
    margin: 0 0 5px 0;
}

#announcement p {
    margin: 5px 0 0 0;
    font-weight: normal;
    color: black;
    line-height: 125%;
    font-size: 15px;
}

#announcement a.link {
    color: blue;
    text-decoration: underline;
}

#announcementHide {
    position: absolute;
    right: 10px;
    top: 10px;
    color: #953212;
    text-decoration: underline;
}

#importStep2 ul {
    background-color: #eeeeee;
    display: inline;
    float: left;
    list-style-image: none;
    list-style-type: none;
    margin: 0 0 15px;
    padding: 5px 0;
}

#importStep2 li.importFields {
    color: #000000;
    display: block;
    float: left;
    font-size: 1em;
    padding: 4px 0 0 40px;
    text-align: left;
    width: 100px;
}

#importStep2 li.importSample {
    color: #000000;
    display: block;
    float: left;
    font-size: 1em;
    padding: 4px 0 0 40px;
    text-align: left;
    width: 130px;
}

#import-field-names-table {
    border-collapse: collapse;
}

#import-field-names-table th {
    text-align: left;
    width: 225px;
    font-size: 11px;
    font-weight: normal;
    color: #555;
}

#import-field-names-table td {
    text-align: left;
    padding: 2px;
    font-size: 12px;
    font-weight: normal;
    padding: 2px 0 2px 15px;
}

#import-field-names-table td option {
    font-size: 12px;
    font-weight: normal;
    color: black;
}

#import-field-names-table td select {
    font-size: 12px;
    font-weight: normal;
    color: black;
}

#import-field-names-table th.matched {
    color: black;
    font-weight: bold;
    text-align: right;
    font-size: 14px;
}

#import-field-names-table th.unmatched {
    color: red;
    font-weight: bold;
    text-align: right;
    font-size: 14px;
}

.importoptions {
    border-collapse: collapse;
    width: 100%;
    font-size: 12px;
}

.importoptions th {
    width: 100px;
    padding: 3px;
}

.importoptions td {
    padding: 3px;
}

.import-success {
    font-size: 12px;
}

.import-success h3 {
    background: #e3f9e4 url(../images/ui/alertgood_icon.gif) no-repeat scroll left center;
    margin-top: 20px;
    padding: 5px 0 5px 30px;
    border: 1px solid #3d993d;
    font-weight: bold;
    font-size: 16px;
}

.import-success ul {
    font-size: 14px;
}

.import-success ul li {
    padding: 5px 0 5px 0;
}

.import-processing {
    font-size: 12px;
}

.import-processing h3 {
    padding: 5px 0 5px 30px;
}

.import_data_table {
    background-color: #fff;
    width: 560px;
    margin: 10px auto;
    border: 1px solid #333;
}

.import_data_table th {
    padding-left: 10px;
    width: 100px;
}

.import_data_table td {
    text-align: left;
    padding: 3px;
}

.import_data_table hr {
    padding: 0;
    margin: 0;
}

#publishScenario table {
    border-collapse: collapse;
    font-size: 12px;
    width: 90%;
    margin: 20px auto 10px auto;
}

#publishScenario th {
    text-align: right;
    padding: 5px 10px 5px 10px;
}

#publishScenario td {
    padding: 5px 10px 5px 10px;
}

#notice-2x-client {
    font-size: 15px;
    position: relative;
    margin: 20px auto 10px;
    padding: 10px 5px 5px 5px;
    text-align: center;
    line-height: 130%;
}

#notice-2x-client a {
    font-size: 14px;
    color: blue;
}

#accountInfo {
    font-weight: normal;
}

#accountInfo h3 {
    font-size: 18px;
    color: #444;
    padding: 0;
    margin: 10px 0 5px 0;
    text-align: left;
}

#accountInfo table {
    border-collapse: collapse;
}

#accountInfo table th {
    color: black;
    font-size: 12px;
    font-weight: bold;
    padding: 0 5px 0 0;
    text-align: right;
}

#accountInfo table td {
    color: black;
    font-size: 14px;
    font-weight: normal;
    padding: 4px;
    text-align: left;
}

#accountInfo p {
    color: black;
    font-size: 14px;
    font-weight: normal;
}

#routeDayPathDialog {
    font-size: 12px;
    padding: 3px;
    position: absolute;
    background-color: white;
    border: 5px solid #bbb;
    width: fit-content;
    max-width: 350px;
    z-index: 200;
}

#btnRouteDayPathDialogClose {
    position: absolute;
    top: 3px;
    right: 3px;
}

#routeDayPathDialog input {
    width: auto;
    margin: 5px;
}

#routeDayPathDialog table {
    width: 100%;
    border-collapse: collapse;
}

#routeDayPathDialog td {
    text-align: left;
}

#routeDayPathDialog th {
    width: 80px;
    text-align: right;
    padding: 2px 5px 2px 2px;
}

/*
#routeDayPathDialog td {
    padding: 1px;
}

#routeDayPathDialog tr.routeDayPathRandomize td {
    text-align: center;
    padding: 3px;
} 
*/
.routeDayPathRandomize img {
    border: 0;
    margin: 0 10px 0 0;
}

.routeDayPathRandomize a {
    color: blue;
}

span.currentplan {
    color: red;
    font-style: italic;
    margin-left: 10px;
    font-size: 12px;
}

#formChangePlans table {
    margin: 20px 0 0 10px;
    width: 98%;
}

#formChangePlans td {
    padding: 5px;
}

#formChangePlans td label {
    margin-left: 4px;
    font-size: 16px;
}

div.whitebox {
    border: 1px solid #e0e0e0;
    background-color: white;
    padding: 10px;
}

.offscreen {
    left: -1000px;
    position: absolute;
}

#input_file_unpicker {
    height: 24px;
    line-height: 24px;
}

#input_file_unpicker span {
    height: 24px;
    line-height: 24px;
    padding: 0 10px 0 10px;
}

#tblImportErrors {
    margin-top: 20px;
    width: 95%;
    border-collapse: collapse;
}

#tblImportErrors th {
    padding: 2px;
    background-color: white;
    text-align: center;
    border: 1px solid #ccc;
}

#tblImportErrors td {
    padding: 2px;
    border: 1px solid #ccc;
    background-color: #e8e8e8;
}

div.span-12 {
    float: left;
    min-height: 1px;
    width: 240px;
    line-height: 30px;
    font-size: 14px;
}

div.span-12 a:link,
div.span-12 a:hover,
div.span-12 a:visited,
div.span-12 a:active {
    color: blue;
}

div.span-12 a.inactive:link,
div.span-12 a.inactive:hover,
div.span-12 a.inactive:visited,
div.span-12 a.inactive:active {
    color: #aaa;
}

img.pdflink {
    height: 22px;
    width: 22px;
    margin: 0 8px 0 0;
}

.prepend-top-half {
    padding-top: 9px;
}

.clearb {
    clear: both;
}

.rptcontainer {
    padding: 10px;
}

div.rptcontainer h3 {
    color: #000000;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    line-height: 1.2em;
    margin: 0 0 7px;
    padding: 0;
}

a.inactive {
    pointer-events: none;
    cursor: default;
    color: #aaa;
}

#multiple-deliveries-list li.mdli {
    text-align: left;
    background-color: #ffffff;
    border: 1px solid #cccccc;
    cursor: pointer;
    margin: 5px;
    padding: 5px;
}

#multiple-deliveries-list li.mdli p {
    clear: both;
    font-size: 12px;
    height: 16px;
    line-height: 16px;
    margin: 0;
    overflow: hidden;
    padding: 0;
    white-space: nowrap;
}

#multiple-deliveries-list li.highlight {
    background-color: #e5ecf3;
}

#multiple-deliveries-list a.nonblock {
    display: inline;
}

tr.highlight td {
    background-color: #dddddd;
    font-weight: normal;
}

tr.highlight td.daystat {
    background-color: #f8f8f8;
    font-weight: normal;
}

tr.selected td {
    background-color: #5989d9;
    color: white;
}

#moveDialog {
    width: 175px;
}

#moveDialog table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 10px 0;
}

#moveDialog input {
    width: 65px;
}

#moveDialog th {
    padding: 3px;
    width: auto;
}

#moveDialog td {
    padding: 5px;
}

#seedButtons input {
    margin-left: 20px;
}

th.title {
    text-align: center;
    font-size: 14px;
    background-color: #163260;
    color: white;
}

/*  setup.calendar styling
------------------------------------------------------------------------- */

.links {
    display: block;
    text-align: left;
    font-size: 14px;
    margin: 0 0 5px 0;
    color: blue;
}

#delCalPreview .year {
    border-style: outset;
    border-width: 1px;
    background-color: #cd5c5c;
    text-align: center;
    margin: 10px auto;
}

.month {
    border-collapse: collapse;
    border-style: none;
    background-color: white;
    text-align: center;
    margin: 20px 0 20px 0;
}

.yearname {
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    color: #ffefdb;
}

.monthname {
    text-align: right;
    font-size: 18px;
    font-weight: normal;
    padding: 4px;
    background-color: white;
    color: #160307;
}

.monthname img {
    border: none;
    margin: 0 5px 0 5px;
}

.dayname {
    background-color: #303030;
    text-align: center;
    font-size: 12px;
    padding: 4px;
    font-weight: normal;
    color: #e0f3ff;
    border-style: none;
    border-width: 1px;
}

.weeknumtitle {
    background-color: #8b4513;
    text-align: center;
    font-size: 10px;
    font-weight: bold;
    color: #ffefdb;
    border-style: none;
    border-width: 1px;
}

.weeknum {
    text-align: center;
    font-size: 10px;
    height: 20px;
    width: 20px;
    color: #000099;
    background-color: #eedfcc;
}

.week {
    border-style: none;
    background-color: #cd5c5c;
    text-align: center;
}

.monthweek {
    text-align: center;
    font-size: 10px;
    font-weight: bold;
    color: #cdc9c9;
    border-style: solid;
    border-width: 1px;
}

.yearnavigation {
    font-size: 12px;
}

.datepicker {
    background-color: #cd5c5c;
}

.datepickerform {
    margin: 0px;
}

.monthpicker {
    font-size: 11px;
    background-color: #cd5c5c;
    color: #ffefdb;
}

.yearpicker {
    font-size: 11px;
    background-color: #cd5c5c;
    color: #ffefdb;
}

.pickerbutton {
    background-color: #cd5c5c;
    color: #ffefdb;
}

.nomonthday {
    text-align: center;
    font-size: 10px;
    height: 20px;
    width: 20px;
    color: #aaaaaa;
}

.monthday {
    text-align: center;
    font-size: 22px;
    font-weight: bold;
    color: black;
    height: 50px;
    width: 50px;
    border: 1px solid #ccc;
}

.monthday a {
    color: #ffefdb;
}

.today {
    background-color: #ffffff;
    text-align: center;
    font-size: 22px;
    font-weight: bold;
    color: red;
    height: 50px;
    width: 50px;
    border: 1px solid #ccc;
}

.selectedday {
    text-align: center;
    font-size: 22px;
    font-weight: bold;
    color: black;
    height: 50px;
    width: 50px;
    border: 1px solid #ccc;
}

.sunday {
    background-color: #dddddd;
    text-align: center;
    font-size: 22px;
    font-weight: bold;
    color: black;
    height: 50px;
    width: 50px;
    border: 1px solid #ccc;
}

.sunday a {
    color: #ffefdb;
}

.saturday {
    background-color: #dddddd;
    text-align: center;
    font-size: 22px;
    font-weight: bold;
    color: black;
    height: 50px;
    width: 50px;
    border: 1px solid #ccc;
}

.saturday a {
    color: #ffefdb;
}

.event {
    background-color: #ffff00;
    text-align: center;
    font-size: 22px;
    font-weight: bold;
    color: black;
    height: 50px;
    width: 50px;
    border: 1px solid #ccc;
}

.event a {
    color: #000000;
}

.todayevent {
    background-color: #ffff00;
    text-align: center;
    font-size: 22px;
    font-weight: bold;
    color: black;
    height: 50px;
    width: 50px;
    border: 1px solid #ccc;
}

.todayevent a {
    color: #000000;
}

.selectedevent {
    text-align: center;
    font-size: 11px;
    font-weight: bold;
    border-width: 1px;
    border-style: none;
    color: #000000;
    background-color: #cdcd00;
    height: 18px;
    width: 18px;
}

.selectedevent a {
    background-color: #cdcd00;
    color: #000000;
}

.eventcontent {
    font-size: 12px;
    width: 50px;
    color: red;
}

.yellowbox {
    float: left;
    width: 12px;
    height: 12px;
    background-color: #ffff00;
    border: 1px solid #ccc;
    margin-right: 6px;
}

#delCalPreview table {
    margin-left: 170px;
}

#delCalPreview table#calendarLegend {
    margin: 20px 0;
    position: absolute;
    left: 10px;
    top: 50px;
    text-align: left;
}

#delCalPreview table#calendarLegend th {
    font-size: 20px;
    padding: 7px;
}

#delCalPreview table#calendarLegend td {
    font-size: 14px;
    padding: 5px;
}

#delCalPreview table .eventcontent {
    margin-left: 0px;
    color: #404040;
}

.holiday,
.todayholiday {
    background-color: #ddd;
    border: 1px solid #cccccc;
    color: black;
    font-size: 22px;
    font-weight: bold;
    height: 50px;
    text-align: center;
    width: 50px;
}

.today,
.todayholiday {
    color: red;
}

#route_info_progress {
    margin: 40px auto;
    width: 100px;
    text-align: center;
}

td.mapsymbol {
    width: 25px;
    text-align: center;
    vertical-align: middle;
}

a.blue_link {
    color: blue;
    margin: 0 10px 0 10px;
}

a.depot_link {
    color: red;
    margin: 0 10px 0 10px;
}

a.depot_link:hover {
    color: white;
    background-color: red;
}

a.mapmarker {
    color: blue;
    margin-right: 10px;
}

#setup-depot-table {
    width: 530px;
}

#setup-route-table {
    width: 530px;
}

#setup-route-table a.right {
    float: right;
    margin-right: 10px;
}

#setup-route-table td {
    padding: 5px;
    text-align: left;
    vertical-align: middle;
}

#setup-route-table .marker-image {
    width: 25px;
    text-align: center;
    vertical-align: middle;
}

/* --- styling for Routes tab content --- */
div.routes {
    padding: 20px;
}

.routes {
    font-size: 14px;
}

div.span-12 a.selected {
    color: #333;
    text-decoration: none;
    font-weight: bold;
}

div.routes table {
    border-collapse: collapse;
}

div.routes table th {
    padding: 5px;
    font-weight: bold;
}

div.routes table td {
    padding: 5px;
    font-weight: normal;
}

#ssUserWarning {
    visibility: hidden;
    width: 500px;
    padding: 20px;
    font-family: Helvetica, Arial, sans-serif;
    text-align: left;
    margin-left: -275px;
    top: 15%;
}

#ssUserWarning p.warning {
    color: #5e5e5e;
    font-size: 45px;
    padding: 0 0 20px 0;
    margin: 0;
}

#ssUserWarning p.text {
    color: black;
    font-size: 24px;
    padding: 0 0 25px 0;
    margin: 0;
    text-align: center;
}

#ssUserWarning p.compatible {
    color: black;
    font-size: 14px;
    padding: 0 0 20px 0;
    margin: 0;
}

/* ----------------------------------------------------------------------------*/
/* Product Details table styling */
/* ----------------------------------------------------------------------------*/
table.productDetailsTable {
    border: 1px solid #1c6ea4;
    background-color: #eeeeee;
    width: 100%;
    text-align: left;
    border-collapse: collapse;
}

table.productDetailsTable td,
table.productDetailsTable th {
    border: 1px solid #aaaaaa;
    padding: 3px 2px;
}

table.productDetailsTable tbody td {
    font-size: 13px;
}

table.productDetailsTable tr:nth-child(even) {
    background: #d0e4f5;
}

table.productDetailsTable thead {
    background: #1c6ea4;
    border-bottom: 2px solid #444444;
}

table.productDetailsTable thead th {
    font-size: 15px;
    font-weight: bold;
    color: #ffffff;
    border-left: 2px solid #d0e4f5;
}

table.productDetailsTable thead th:first-child {
    border-left: none;
}

table.productDetailsTable tfoot {
    font-size: 14px;
    font-weight: bold;
    color: #ffffff;
    background: #d0e4f5;
    border-top: 2px solid #444444;
}

table.productDetailsTable tfoot td {
    font-size: 14px;
}

table.productDetailsTable tfoot .links {
    text-align: right;
}

table.productDetailsTable tfoot .links a {
    display: inline-block;
    background: #1c6ea4;
    color: #ffffff;
    padding: 2px 8px;
    border-radius: 5px;
}

/* tabbed menu with light-blue selected tab
------------------------------------------------------------------------*/
.tabbedmenu {
    padding: 0 0 0 20px;
    margin: 20px 0 0 0;
    list-style: none;
    height: 28px;
    display: block;
}

.tabbedmenu li {
    float: left;
}

.tabbedmenu li a {
    display: block;
    float: left;
    background-color: #939dac;
    height: 28px;
    line-height: 28px;
    color: white;
    text-decoration: none;
    font-size: 13px;
    cursor: pointer;
    margin-right: 7px;
    padding: 0 20px 0 20px;
    font-weight: bold;
}

.tabbedmenu li.active a {
    color: black;
    background-color: #e5ecf3;
    text-decoration: none;
}

.tabbedmenu li a:hover {
    background-color: black;
}

.tabbedmenu li.active a:hover {
    color: black;
    background-color: #e5ecf3;
    text-decoration: none;
}

.orange {
    height: 25px;
}

.orange li a {
    height: 25px;
    line-height: 25px;
    padding: 0 15px 0 15px;
    color: white;
    background: #f8931d;
    text-decoration: none;
    margin-left: 3px;
}

.linkedmenu {
    list-style: none;
    display: block;
    margin: 0 0 15px 0;
    padding: 0;
}

.linkedmenu li {
    display: inline;
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.linkedmenu li a {
    margin: 0 5px 0 5px;
}

.linkedmenu li.active a {
    text-decoration: none;
    color: black;
}

#infowindow-content .title {
    font-weight: bold;
}

#infowindow-content {
    display: none;
}

#map #infowindow-content {
    display: inline;
}

.controls {
    margin-top: 16px;
    border: 1px solid transparent;
    border-radius: 2px 0 0 2px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    height: 32px;
    outline: none;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

#pac-input {
    /* Host styles. <gmp-place-autocomplete> renders its own input inside a
       shadow root, so the visual styles are mostly the CSS custom properties
       below. The width/height/shadow live on the host. */
    width: 400px;
    background-color: white;
    color-scheme: light;
    color: #333;

    /* PlaceAutocompleteElement custom properties (shadow-DOM-piercing) */
    --gmp-text-input-background-color: white;
    --gmp-text-input-color: #333;
    --gmp-text-input-placeholder-color: #888;
    --gmp-text-input-font-family: Roboto, sans-serif;
    --gmp-text-input-font-size: 15px;
}

#pac-input:focus-within {
    border-color: #4d90fe;
}

.pac-container {
    font-family: Roboto;
}

#type-selector {
    color: #fff;
    background-color: #4d90fe;
    padding: 5px 11px 0px 11px;
}

#type-selector label {
    font-family: Roboto;
    font-size: 13px;
    font-weight: 300;
}

.dashboard-section {
    position: relative;
    margin: 0 0 0 20px;
    max-width: 600px;
    background: #e5ecf3;
    padding: 20px 10px 12px 10px;
    overflow-y: auto;
    max-height: calc(100vh - 120px);
    overscroll-behavior: contain;
}

.dashboard-section #last_smart_sync_upload #last_fleet_manager_sync {
    background-color: #90ee90;
    padding: 5px;
    text-align: center;
}

#optimize_routes_date {
    width: 90px;
}

#optimize_routes_legend {
    margin-top: 10px;
    height: 60vh;
    overflow-y: scroll;
}

#btnOptimizeRoutes {
    margin-top: 15px;
}

#routeDayPathDialogHeader {
    font-weight: bold;
}
.trash-icon {
    color: red;             /* Make icon red */
    font-size: 1.2rem;      /* Optional: adjust size */
    cursor: pointer;        /* Pointer cursor */
    transition: none;       /* Disable hover transition */
}
.trash-icon:hover {
    color: red;             /* Keep same color on hover */
}