* {
    box-sizing: border-box;
}

html,
body,
form {
    margin: 0;
    padding: 0;
    background: #207EEB;
}

#App_Main {
    min-width: 1350px;
}

#App_Content {
    height: 100vh;
    background: #207EEB;
}

#Hdr_Main {
    background: #FFF;
    min-width: 1515px;
    float: left;
    clear: both;
    width: 100%;
}

#Hdr_Main .home {
    float: left;
    height: 100px;
    width: 260px;
    padding: 20px 0;
    text-align: center;
}

#Hdr_Main .logo {
    object-fit: contain;
    height: 100%;
    margin: auto;
}

#Nav_Main {
    margin: 0 300px 0 260px;
    padding: 0;
}

#Nav_Main li {
    float: left;
    padding: 5px 0 5px 35px;
    margin-right: 50px;
    list-style-type: none;
    background-repeat: no-repeat;
    background-size: 25px;
    font-size: 18px;
    height: 100px;
    line-height: 92px;
    background-position: left center;
}

#Nav_Main li:last-child {
    margin-right: 0;
}

#Nav_Main li#Ni_Overview {
    background-image: URL("/images/skin/overview.png")
}

#Nav_Main li#Ni_Overview.selected {
    background-image: URL("/images/skin/overview_selected.png")
}

#Nav_Main li#Ni_Appointments {
    background-image: URL("/images/skin/appointments.png")
}

#Nav_Main li#Ni_Appointments.selected {
    background-image: URL("/images/skin/appointments_selected.png")
}

#Nav_Main li#Ni_Unscheduled {
    background-image: URL("/images/skin/unscheduled.png");
}

#Nav_Main li#Ni_Unscheduled.selected {
    background-image: URL("/images/skin/unscheduled_selected.png");
}

#Nav_Main li#Ni_PickupLog {
    background-image: URL("/images/skin/list.svg");
    background-size: 25px;
    padding-left: 35px;
}

#Nav_Main li#Ni_PickupLog.selected {
    background-image: URL("/images/skin/list_selected.svg");
}

#Nav_Main li .command a {
    color: #000;
    font-weight: normal
}

#Nav_Main li.selected .command a {
    color: #207EEB;
}

#Dt_Greeting {
    color: #000;
    line-height: 30px;
    width: min-content;
    padding: 35px 35px 0 0;
    float: right;
    position: relative;
}

#Dt_Greeting .username {
    cursor: default;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: right;
    color: #000;
}

#Dt_Greeting .username .viewProfile {
    margin-left: 5px;
    background-image: url("/images/skin/cheveron-down.png");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    width: 16px;
    display: inline-block;
}

#Dt_Greeting .profileDropdown {
    display: none;
    background: #FFF;
    position: absolute;
    z-index: 300;
    width: 100%;
    font-size: 18px;
    line-height: 25px;
    right: 35px;
    border-radius: 10px;
    box-shadow: 0px 10px 25px #6667;
    padding: 5px 0
}

#Dt_Greeting .profileDropdown a {
    display: block;
    padding: 5px 10px;
    font-weight: normal;
    color: #000;
}

#Dt_Greeting .profileDropdown a:hover {
    background-color: #BDC1E0
}

#Dt_Greeting:hover .profileDropdown {
    display: block;
}

#Cnt_Main {
    display: flex;
    float: left;
    width: 100%
}

#Mod_Content {
    flex: 1 1 auto;
    background: #207EEB;
}

#Mod_Sidebar {
    flex: 0 0 260px;
}

#Mod_Sidebar.hidden {
    display: none;
}

#Dp_CalendarDate.hidden {
    display: none;
}

#Dp_CalendarDate.hidden + #Legend {
    margin-top: 90px;
}

/* ===== AUTH PAGES (Sign In, Register, Verify Email) ===== */

/* Page layout */
.auth-page { min-height: 100vh; background: #F6F7F9; font-family: 'Work Sans', 'Open Sans', sans-serif; }
.auth-header { background: #fff; height: 64px; box-shadow: 0 1px 4px rgba(0,0,0,0.25); padding: 8px 25px; display: flex; align-items: center; }
.auth-header img { height: 49px; width: auto; }
.auth-body { display: flex; align-items: center; justify-content: center; min-height: calc(100vh - 64px); padding: 40px; gap: 60px; }
.auth-card { background: #fff; border-radius: 7px; padding: 22px; max-width: 451px; width: 100%; min-height: 400px; flex-shrink: 0; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
.auth-illustration { flex: 1; display: flex; justify-content: center; align-items: center; max-width: 600px; }
.auth-illustration img { max-width: 100%; width: 100%; height: auto; }

/* Typography */
.auth-page .auth-title { font-family: 'Work Sans', sans-serif; font-weight: 600; font-size: 22px; color: #111827; margin: 0 0 4px; line-height: 1.4; }
.auth-page .auth-subtitle { font-family: 'Work Sans', sans-serif; font-weight: 400; font-size: 18px; color: #4B5563; margin: 0 0 16px; line-height: 1.4; }

/* Inputs */
.auth-page .auth-field { margin-bottom: 14px; }
.auth-page .auth-field-row { display: flex; gap: 12px; margin-bottom: 14px; }
.auth-page .auth-field.half { flex: 1; margin-bottom: 0; }
.auth-page .auth-input { display: block; position: relative; }
.auth-page .auth-input input.skin {
    width: 100%; min-width: 0; box-sizing: border-box; height: 51px; padding: 14px 16px 0;
    font-family: 'Work Sans', sans-serif; font-size: 16px; color: #000;
    background: #fff; border: 1px solid #E5E7EB; border-radius: 6px;
    box-shadow: 0 0 1.8px rgba(0,0,0,0.25); outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.auth-page .auth-input input.skin:focus { border-color: #005BA0; box-shadow: 0 0 0 3px rgba(0,91,160,0.15); }
.auth-page .auth-input .placeholderText {
    pointer-events: none; position: absolute; left: 16px; top: 16px;
    font-family: 'Work Sans', sans-serif; font-size: 16px; color: #4B5563;
    transition: 0.2s ease; opacity: 0.7;
}
.auth-page .auth-input input.skin:focus + .placeholderText,
.auth-page .auth-input input.skin:not(:placeholder-shown) + .placeholderText {
    font-size: 12px; top: 4px; left: 18px; opacity: 1; color: #111827;
}
.auth-page .auth-input-disabled input.skin { background: #E5E7EB; color: #4B5563; cursor: not-allowed; }

/* Error state inputs */
.auth-page .auth-input.has-error input.skin { border-color: #c0392b; }

/* Error message */
.auth-page .auth-error {
    color: #c0392b; font-family: 'Work Sans', sans-serif; font-size: 14px;
    margin: 6px 0 10px; line-height: 1.4;
}

/* Password toggle */
.auth-page .password-wrap { position: relative; }
.auth-page .btnTogglePassword {
    position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
    background: none; border: none; cursor: pointer; color: #4B5563;
    font-size: 16px; padding: 0; line-height: 1; z-index: 2;
}
.auth-page .btnTogglePassword:hover { color: #111827; }
.auth-page .password-wrap input.skin { padding-right: 42px; }

/* Remember me + Forgot password row */
.auth-page .auth-row { display: flex; justify-content: space-between; align-items: center; margin: 10px 0 16px; }
.auth-page .auth-checkbox { display: flex; align-items: center; gap: 6px; font-size: 16px; color: #000; font-family: 'Work Sans', sans-serif; }
.auth-page .auth-checkbox input[type="checkbox"] {
    width: 16px; height: 16px; margin: 0; cursor: pointer;
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
    background: #FFFFFF; border: 1.5px solid #E5E7EB; border-radius: 3px;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.auth-page .auth-checkbox input[type="checkbox"]:checked {
    background: #005BA0; border-color: #005BA0;
}
.auth-page .auth-checkbox input[type="checkbox"]:checked::after {
    content: ''; display: block; width: 4px; height: 8px;
    border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
    margin-bottom: 2px;
}
.auth-page .auth-checkbox label { cursor: pointer; font-weight: 400; }
.auth-page .auth-link-right a {
    font-family: 'Work Sans', sans-serif; font-size: 16px; color: #005BA0;
    text-decoration: underline; font-weight: 400;
}

/* Primary button */
.auth-page .auth-btn-primary {
    cursor: pointer; background: #005BA0; color: #fff; border-radius: 4px;
    box-shadow: 0 0 1.2px rgba(0,0,0,0.3); width: 100%; height: 41px;
    display: flex; align-items: center; justify-content: center; margin: 20px auto 0;
    font-family: 'Work Sans', sans-serif; font-size: 16px; font-weight: 400;
    transition: background 0.15s ease, opacity 0.15s ease;
}
.auth-page .auth-btn-primary.auth-btn-loading { pointer-events: none; opacity: 0.7; }
.auth-page .auth-btn-primary:hover { background: #004A85; }
.auth-page .auth-btn-primary input { display: none; }
.auth-page .auth-btn-primary-link {
    display: flex; align-items: center; justify-content: center;
    background: #005BA0; color: #fff; border-radius: 4px;
    box-shadow: 0 0 1.2px rgba(0,0,0,0.3); width: 100%; height: 41px;
    margin: 20px auto 0; font-family: 'Work Sans', sans-serif; font-size: 16px;
    font-weight: 400; text-decoration: none; transition: background 0.15s ease;
}
.auth-page .auth-btn-primary-link:hover { background: #004A85; }
.auth-page .auth-actions { text-align: center; }

/* Footer link (Create account / Sign In / Contact support) */
.auth-page .auth-footer-link {
    text-align: center; margin-top: 16px;
    font-family: 'Work Sans', sans-serif; font-size: 16px; color: #000;
}
.auth-page .auth-footer-link a { color: #005BA0; text-decoration: underline; font-weight: 400; }

/* Auth message (domain migration, etc.) */
.auth-page .auth-message {
    background: #F6F7F9; padding: 10px; border-radius: 10px;
    border: solid 3px #E59B2D; color: #4B5563; font-size: 14px; margin-bottom: 16px;
}
.auth-page .auth-message a { color: #005BA0; }

/* Auth notice (session expired, etc.) */
.auth-page .auth-notice {
    background: #FEF0EE; border-left: 3px solid #c0392b; border-radius: 4px;
    padding: 10px 12px; margin-top: 12px; font-size: 14px; color: #c0392b;
}

/* Auth success (forgot password confirmation) */
.auth-page .auth-success { color: #005BA0; background: #F6F7F9; border-left: 3px solid #005BA0; padding: 10px 12px; border-radius: 4px; font-size: 14px; margin: 6px 0 10px; }

/* Registration type toggle (Shipper / Carrier pill) */
.auth-page .registrationTypePrompt {
    font-family: 'Work Sans', sans-serif; font-size: 15px; font-weight: 500;
    color: #4B5563; margin: 0 0 8px;
}
.auth-page .registrationTypeToggle {
    display: flex; background: #E5E7EB; border-radius: 6px; padding: 4px; gap: 4px;
    margin-bottom: 16px; width: 100%; box-sizing: border-box;
    border: 1px solid transparent; transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.auth-page .registrationTypeToggle.has-error { border-color: #c0392b; box-shadow: 0 0 0 3px rgba(192,57,43,0.12); }
.auth-page .registrationTypePrompt.has-error { color: #c0392b; }
.auth-page .typeOption {
    flex: 1; padding: 8px 28px; cursor: pointer; font-weight: 500;
    font-family: 'Work Sans', sans-serif; font-size: 16px;
    color: #005BA0; background: #FFFFFF; border: 1px solid #CBD5E1; border-radius: 6px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.06);
    user-select: none; transition: background 0.15s, color 0.15s, border-color 0.15s; text-align: center;
}
.auth-page .typeOption.selected { background: #005BA0; border-color: #005BA0; color: #FFFFFF; box-shadow: none; }
.auth-page .typeOption:hover:not(.selected) { background: #F3F4F6; border-color: #005BA0; }

/* Org match success message */
.auth-page .auth-match-success {
    color: #67B000; font-family: 'Work Sans', sans-serif;
    font-size: 14px; margin-top: 4px; font-weight: 500;
}

/* Status pages (pending, success, check email) */
.auth-page .auth-status-page { text-align: center; padding: 10px 0; }
.auth-page .auth-status-page .auth-title { text-align: center; }
.auth-page .auth-status-page .auth-subtitle { text-align: center; max-width: 373px; margin: 8px auto 20px; }
.auth-page .auth-status-illustration { margin: 30px auto; }
.auth-page .auth-status-img { max-width: 200px; height: auto; }

/* Reset password page (keep basic styling) */
.viewResetPassword #Mod_Content { text-align: center; margin-top: 100px; }
.viewResetPassword input { width: 400px; }
.viewResetPassword .cmdResetPw { width: 250px; margin: 20px auto; }
.viewResetPassword .resetSuccess { padding: 40px 20px; text-align: center; }
.viewResetPassword .resetSuccess h3 { font-size: 20px; margin-bottom: 8px; }
.viewResetPassword .resetSuccess p { color: #475569; margin-bottom: 24px; }
.viewResetPassword .resetSuccess .btnSignIn { display: inline-block; padding: 12px 32px; background: #207EEB; color: #fff; text-decoration: none; border-radius: 6px; font-weight: 600; transition: background 0.15s ease; }
.viewResetPassword .resetSuccess .btnSignIn:hover { background: #1a6ad4; }

/* ===== AUTH RESPONSIVE ===== */
@media (max-width: 900px) {
    .auth-illustration { display: none; }
    .auth-body { gap: 0; padding: 40px 24px; }
}

@media (max-width: 600px) {
    .auth-header { padding: 8px 16px; height: 56px; }
    .auth-header img { height: 40px; }
    .auth-body { padding: 20px 16px; min-height: calc(100vh - 56px); }
    .auth-card { padding: 18px 16px; border-radius: 0; box-shadow: none; background: transparent; min-height: auto; }
    .auth-page .auth-title { font-size: 20px; }
    .auth-page .auth-subtitle { font-size: 16px; }
    .auth-page .auth-field-row { flex-direction: column; gap: 0; }
    .auth-page .auth-field.half { margin-bottom: 14px; }
    .auth-page .auth-btn-primary,
    .auth-page .auth-btn-primary-link { width: 100%; }
    .auth-page .typeOption { padding: 8px 12px; font-size: 15px; }
    .auth-page .auth-row { flex-wrap: wrap; gap: 8px; }
}

@media (max-width: 380px) {
    .auth-body { padding: 16px 12px; }
    .auth-card { padding: 14px 12px; }
    .auth-page .auth-title { font-size: 18px; }
    .auth-page .auth-input input.skin { height: 46px; padding: 12px 14px 0; font-size: 15px; }
    .auth-page .auth-input .placeholderText { left: 14px; top: 14px; font-size: 15px; }
    .auth-page .auth-checkbox { font-size: 14px; }
    .auth-page .auth-link-right a { font-size: 14px; }
}

.viewPendingSetup #Mod_Content {
    text-align: center;
    margin-top: 100px
}

.viewPendingSetup .navigation {
    display: none;
}


.viewCms #Mod_Content {
    margin-top: 100px;
    display: flex;
}

.viewDockSlot .dockSlots {
    background: #FFF;
    clear: both;
    border-radius: 0 0 15px 15px;
    padding: 20px;
    overflow: hidden;
}

.viewDockSlot .dockSlot {
    box-sizing: border-box;
    margin: 0;
    width: 20%;
    float: left;
    margin-bottom: 75px
}

.viewDockSlot .dockSlot .detail {
    height: 6vw;
    background-color: #BDC1E0;
    width: 12vw;
    margin: 0 auto;
    line-height: 6vw;
    text-align: center;
    color: #AAAFD0;
    font-weight: bold;
    border-radius: 10px;
    font-size: 1.5vw;
}

.viewDockSlot .dockSlot.open .detail {
    background-color: #207EEB;
    color: #FFF;
}

#Dp_CalendarDate {
    width: 100%;
    font-size: 12px;
    margin: 90px auto 25px;
    padding: 0 20px;
    position: relative;
}

#Dp_CalendarDate .header {
    background-color: #FFF;
    border: 0;
}

#Dp_CalendarDate .board {
    border: 0;
}

#Dp_CalendarDate .board {
    border: 0;
}

#Dp_CalendarDate .cmdNextYear {
    right: 16px;
}

#Dp_CalendarDate .cmdNextMonth {
    right: 50px;
}

#Dp_CalendarDate .week .day {
    width: 14.285%;
    background-color: #FFF;
    border: 0;
}

#Dp_CalendarDate .week .day .number {
    height: 27px;
    line-height: 23px;
    text-align: center;
    overflow: hidden;
    color: #000;
    border: 1px solid transparent;
    width: 100%;
}

#Dp_CalendarDate .week .day.hasAppts .number {
    color: #000;
}

#Dp_CalendarDate .week .day.isClosed .number {
    color: #AAAFD0;
}

#Dp_CalendarDate .week .day.hasAppts .number {
    font-weight: 900;
}

#Dp_CalendarDate .week .day.hasAppts.isClosed .number {
    color: #AAAFD0;
}

#Dp_CalendarDate .week .valid.day {
    cursor: pointer;
    color: #185abc;
    font-weight:;
}

#Dp_CalendarDate .week .valid.day .number:hover {
    background-color: #000;
    border-radius: 15px;
    color: #FFF
}

#Dp_CalendarDate .week .today.day .number {
    color: #E65B50;
}

#Dp_CalendarDate .week .today.day .number:hover {
    background-color: #000;
    color: #FFF
}

#Dp_CalendarDate .week .selected.day .number {
    background-color: #207EEB;
    color: lightblue;
    border-radius: 20px;
}

#Dp_CalendarDate .week .selected.day .number:hover {
    background-color: #207EEB;
    color: #FFF;
    cursor: default;
}

#Dp_CalendarDate .week .selected.isClosed.day .number {
    color: #999;
}

#Dp_CalendarDate .week .selected.isClosed.day .number:hover {
    color: #999;
}

#Dp_CalendarDate .week .today.isClosed.day .number {
}

#Dp_CalendarDate .week .today.isClosed.day .number:hover {
    color: #c58790;
}

#Dp_CalendarDate .week .today.selected .number {
    background-color: #207EEB;
    color: #FFF;
    border-radius: 20px;
}

#Dp_CalendarDate .week .today.selected .number:hover {
    background-color: #000;
    color: #fff
}

#Dp_CalendarDate .week .blocked.today.day .number:hover {
    background-color: #fafbfd;
    border: 1px solid #D5DEE5;
    color: #000
}

#Dp_CalendarDate .week .trailing {
    display: none
}

#Dp_CalendarDate .week .blocked {
    cursor: default;
    text-indent: 0;
}

#Dp_CalendarDate .week .blocked .number {
    text-decoration: line-through;
    background-color: #FFF;
    text-indent: 0;
    color: #000;
    cursor: default
}

#Dp_CalendarDate .week .blocked.day .number:hover {
    text-indent: 0;
    text-decoration: line-through;
    color: #42535d;
    background-color: #263842
}

.calendarPicker .cmdClose {
    width: 11px;
    height: 12px;
    position: absolute;
    top: 5px;
    right: 5px;
    background: url(//dj9vbf0b1bhvo.cloudfront.net/images/skin/command.close.gif?b9a.rh8.cbe.lam) no-repeat 0 0;
    border: 1px solid transparent
}

.calendarPicker .cmdClose:hover {
    border: 1px solid #ccc;
    border-radius: 3px
}

.calendarPicker .header {
    width: auto;
    margin: 0;
    color: #000;
    font-weight: bold;
    height: 52px;
    text-align: center;
    font-size: 14px;
    border-radius: 15px 15px 0 0;
    padding-top: 10px;
    background-color: #FFF;
}

.calendarPicker .header .year {
}

.calendarPicker .header .month {
}

.calendarPicker .header .command {
    top: 27px;
    width: 22px;
    height: 22px;
    display: block;
    text-indent: -9999px;
    position: absolute;
    padding: 0;
    margin: 0
}

.calendarPicker .cmdPreviousYear {
    display: block;
    background: url(/images/skin/calendar_arrows.png) no-repeat 0 0;
    width: 12px;
    height: 10px;
    text-indent: -9999px;
    position: absolute;
    left: 29px;
    top: 32px;
    background-size: cover
}

.calendarPicker .cmdNextYear {
    display: block;
    background: url(/images/skin/calendar_arrows.png) no-repeat -13px 0;
    width: 13px;
    height: 10px;
    text-indent: -9999px;
    position: absolute;
    left: 218px;
    top: 32px;
    background-size: cover
}

.calendarPicker .cmdNextMonth {
    display: block;
    background: url(/images/skin/calendar_arrows.png) no-repeat -20px 0;
    width: 6px;
    height: 10px;
    text-indent: -9999px;
    position: absolute;
    left: 191px;
    top: 32px;
    background-size: cover
}

#Rng_Calendar .cmdNextMonth {
    left: auto;
}

#Rng_Calendar .cmdNextYear {
    left: auto;
}

.calendarPicker .cmdPreviousMonth {
    display: block;
    background: url(/images/skin/calendar_arrows.png) no-repeat 0 0;
    width: 6px;
    height: 10px;
    text-indent: -9999px;
    position: absolute;
    left: 63px;
    top: 32px;
    background-size: cover
}

.calendarPicker .board {
    margin: 0;
    border-right: 1px solid #555555;
}

.calendarPicker .content {
    margin: 0;
    width: 100%;
    height: 100%;
    background: #EAEAEA;
    display: block;
}

.calendarPicker .calendar {
    width: auto;
    height: auto;
    display: block;
    width: 100%;
    background: red;
    height: 100%;
}

#Dp_CalendarDate .footer {
    background: #FFF;
    border-radius: 0 0 15px 15px;
    width: 100%;
    height: 10px;
}

.calendar .week {
    width: 100%;
    height: 30px;
    background: #FFF;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    padding: 0 10px;
}

.calendar .week .day {
    padding: 1px;
    float: left;
    background-color: #fff
}

.calendar .week .day .number {
    padding: 1px;
    width: 25px;
    height: 18px;
    line-height: 18px;
    border: 1px solid #bbb;
    color: #333;
    text-align: right;
    overflow: hidden;
}

.calendar .week .day.hasAppts .number {
    font-weight: bold;
    color: #000;
}

.calendar .week .day.isClosed .number {
    color: #666;
}

.calendar .week .valid.day {
    cursor: pointer;
    color: #45600A
}

.calendar .week .valid.day .number:hover {
    background-color: #fafbfd;
    border: 1px solid #3074C6;
    color: #000
}

.calendar .week .today.day .number {
    border: 1px solid #D5DEE5;
    color: #000
}

.calendar .week .today.day .number:hover {
    background-color: #fafbfd;
    border: 1px solid #D5DEE5;
    color: #000
}

.calendar .week .selected.day .number {
    background-color: #cEdBfE;
    border: 1px solid #D5DEE5;
    color: #333
}

.calendar .week .selected.day .number:hover {
    background-color: #deefff;
    border: 1px solid #D5DEE5;
    color: #333
}

.calendar .week .selected.isClosed.day .number {
    color: #999;
}

.calendar .week .selected.isClosed.day .number:hover {
    color: #999;
}

.calendar .week .today.isClosed.day .number {
    color: #cc8790;
}

.calendar .week .today.isClosed.day .number:hover {
    background-color: #ededed;
    color: #c58790;
}

.calendar .week .compare.selected.day .number {
    background-color: #733F1C;
    border: 1px solid #D5DEE5;
    color: #fff
}

.calendar .week .compare.selected.day .number:hover {
    background-color: #733F1C;
    border: 1px solid #D5DEE5;
    color: #fff
}

.calendar .week .base.compare.selected.day .number {
    background-color: #B3612B;
    border: 1px solid #D5DEE5;
    color: #fff
}

.calendar .week .base.compare.selected.day .number:hover {
    background-color: #B3612B;
    border: 1px solid #D5DEE5;
    color: #fff
}

.calendar .week .blocked.today.day .number:hover {
    background-color: #fafbfd;
    border: 1px solid #D5DEE5;
    color: #000
}

.calendar .week .trailing {
    display: none
}

.calendar .week .blocked {
    cursor: default
}

.calendar .week .blocked.day .number {
    text-decoration: line-through;
    border: 1px solid #ddd;
    background-color: #EDEDED;
    color: #ccc;
    cursor: default
}

.calendar .week .blocked.day .number:hover {
    text-decoration: line-through;
    color: #ccc;
    border: 1px solid #ddd;
    background-color: #EDEDED
}

.mode-month .calendar {
    width: 160px;
}

.mode-month .calendar .month {
    float: left;
    width: 43px;
    display: block;
    padding: 1px;
    float: left;
    background-color: #fff;
    margin: 2px;
    padding: 2px;
    text-align: center;
    cursor: pointer;
    border: 1px solid #fff;
}

.mode-month .calendar .month .name {
    line-height: 18px;
    color: #000;
    text-align: center;
}

.mode-month .calendar .month {
    cursor: pointer;
    color: #45600A
}

.mode-month .calendar .month:hover {
    background-color: #fafbfd;
    border: 1px solid #3074C6;
    color: #000
}

.mode-month .calendar .today.month {
    background-color: #fafbfd;
    border: 1px solid #D5DEE5;
    color: #000
}

.mode-month .calendar .today.month:hover {
    background-color: #fafbfd;
    border: 1px solid #3074C6;
    color: #000
}

.mode-month .calendar .selected.month {
    background-color: #cEdBfE;
    border: 1px solid #D5DEE5;
    color: #333
}

.mode-month .calendar .selected.month:hover {
    background-color: #deefff;
    border: 1px solid #D5DEE5;
    color: #333
}

.mode-month .calendar .blocked.today.month:hover {
    background-color: #fafbfd;
    border: 1px solid #D5DEE5;
    color: #000
}

.mode-month .calendar .blocked.month {
    cursor: default
}

.mode-month .calendar .blocked.month {
    border: 1px solid #ddd;
    background-color: #EDEDED;
    color: #ccc;
    cursor: default
}

.mode-month .calendar .blocked.month:hover {
    color: #ccc;
    border: 1px solid #ddd;
    background-color: #EDEDED
}

#Frozen {
    height: 100%;
    width: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 5 !important;
    background-color: #fff;
    filter: alpha(opacity=25);
    -khtml-opacity: 0.25;
    -moz-opacity: 0.25;
    opacity: 0.25;
}

#Loader {
    z-index: 6 !important;
    width: 240px;
    height: 30px;
    position: absolute;
    top: 50%;
    left: 0%;
    margin: -105px 0px 0px -120px;
}

#Loader .item {
    position: absolute;
    top: 0;
    background-color: #ffffff;
    width: 29px;
    height: 29px;
    -moz-animation-name: loaderItem;
    -moz-animation-duration: 0.8s;
    -moz-animation-iteration-count: infinite;
    -moz-animation-direction: linear;
    -moz-transform: scale(.3);
    -webkit-animation-name: loaderItem;
    -webkit-animation-duration: 0.8s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: linear;
    -webkit-transform: scale(.3);
    -ms-animation-name: loaderItem;
    -ms-animation-duration: 0.8s;
    -ms-animation-iteration-count: infinite;
    -ms-animation-direction: linear;
    -ms-transform: scale(.3);
    -o-animation-name: loaderItem;
    -o-animation-duration: 0.8s;
    -o-animation-iteration-count: infinite;
    -o-animation-direction: linear;
    -o-transform: scale(.3);
    animation-name: loaderItem;
    animation-duration: 0.8s;
    animation-iteration-count: infinite;
    animation-direction: linear;
    transform: scale(.3);
    -moz-box-shadow: 5px 5px 5px 3px #0188CC;
    -webkit-box-shadow: 5px 5px 5px 3px 32A80B9;
    box-shadow: 5px 5px 5px 3px #0188CC;
}

#LoadItem_1 {
    left: 0;
    -moz-animation-delay: 0.32s;
    -webkit-animation-delay: 0.32s;
    -ms-animation-delay: 0.32s;
    -o-animation-delay: 0.32s;
    animation-delay: 0.32s;
}

#LoadItem_2 {
    left: 30px;
    -moz-animation-delay: 0.4s;
    -webkit-animation-delay: 0.4s;
    -ms-animation-delay: 0.4s;
    -o-animation-delay: 0.4s;
    animation-delay: 0.4s;
}

#LoadItem_3 {
    left: 60px;
    -moz-animation-delay: 0.48s;
    -webkit-animation-delay: 0.48s;
    -ms-animation-delay: 0.48s;
    -o-animation-delay: 0.48s;
    animation-delay: 0.48s;
}

#LoadItem_4 {
    left: 90px;
    -moz-animation-delay: 0.56s;
    -webkit-animation-delay: 0.56s;
    -ms-animation-delay: 0.56s;
    -o-animation-delay: 0.56s;
    animation-delay: 0.56s;
}

#LoadItem_5 {
    left: 120px;
    -moz-animation-delay: 0.64s;
    -webkit-animation-delay: 0.64s;
    -ms-animation-delay: 0.64s;
    o-animation-delay: 0.64s;
    nimation-delay: 0.64s;
}

#LoadItem_6 {
    left: 150px;
    -moz-animation-delay: 0.72s;
    -webkit-animation-delay: 0.72s;
    -ms-animation-delay: 0.72s;
    -o-animation-delay: 0.72s;
    animation-delay: 0.72s;
}

#LoadItem_7 {
    left: 180px;
    -moz-animation-delay: 0.8s;
    -webkit-animation-delay: 0.8s;
    -ms-animation-delay: 0.8s;
    -o-animation-delay: 0.8s;
    animation-delay: 0.8s;
}

#LoadItem_8 {
    left: 210px;
    -moz-animation-delay: 0.88s;
    -webkit-animation-delay: 0.88s;
    -ms-animation-delay: 0.88s;
    -o-animation-delay: 0.88s;
    animation-delay: 0.88s;
}

@-moz-keyframes loaderItem {
    0% {
        -moz-transform: scale(1);
        background-color: #ffffff;
    }

    100% {
        -moz-transform: scale(.3) rotate(90deg);
        background-color: #487FC4;
    }
}

@-webkit-keyframes loaderItem {
    0% {
        -webkit-transform: scale(1);
        background-color: #fff;
    }

    100% {
        -webkit-transform: scale(.3) rotate(90deg);
        background-color: #487FC4;
    }
}

@-ms-keyframes loaderItem {
    0% {
        -ms-transform: scale(1);
        background-color: #ffffff;
    }

    100% {
        -ms-transform: scale(.3) rotate(90deg);
        background-color: #487FC4;
    }
}

@-o-keyframes loaderItem {
    0% {
        -o-transform: scale(1);
        background-color: #ffffff;
    }

    100% {
        -o-transform: scale(.3) rotate(90deg);
        background-color: #487FC4;
    }
}

@keyframes loaderItem {
    0% {
        transform: scale(1);
        background-color: #ffffff;
    }

    100% {
        transform: scale(.3) rotate(90deg);
        background-color: #487FC4;
    }
}

#DateRangeLogger .caption {
    display: block;
    color: #fff;
}

#DateRangeLogger .dates .caption {
    display: none;
}

#Rng_Calendar .controls {
    position: relative;
    left: 0;
    top: -10px;
}

.dateRange {
    display: block;
    float: left;
    height: auto;
    width: 320px;
    margin-top: 11px;
    margin-bottom: 11px;
    color: #fff;
}

.dateRange .datetime {
    float: left;
    width: 140px;
    height: auto;
    display: block;
    margin: 0;
}

.datetime input {
    border: 4px solid transparent;
    width: 120px;
}

.datetime.active input {
    border: 4px solid #d0d0ff;
}

#Dp_Calendar .board {
    border: 0;
}

#Dp_Calendar {
    z-index: 900;
    position: absolute;
    background-color: #fff;
    font-size: 11px;
    padding: 20px;
    box-shadow: 5px 5px 10px #263842;
    border-radius: 4px
}

.ie7 #Dp_Calendar {
    border: 1px solid #D5DEE5
}

#Dp_Calendar .cmdClose {
    width: 11px;
    height: 12px;
    position: absolute;
    top: 5px;
    right: 5px;
    background: url(//dj9vbf0b1bhvo.cloudfront.net/images/skin/command.close.gif?b9a.rh8.cbe.larg) no-repeat 0 0;
    border: 1px solid transparent
}

#Dp_Calendar .cmdClose:hover {
    border: 1px solid #ccc;
    border-radius: 3px
}

#Pp_Percent {
    z-index: 900;
    position: absolute;
    background-color: #F7FAFC;
    font-size: 11px;
    padding: 20px;
    box-shadow: 8px 9px 15px #333333;
    border-radius: 4px
}

.ie7 #Pp_Percent {
    border: 1px solid #D5DEE5
}

#Pp_Percent .cmdClose {
    width: 11px;
    height: 12px;
    position: absolute;
    top: 5px;
    right: 5px;
    background: url(//dj9vbf0b1bhvo.cloudfront.net/images/skin/command.close.gif?b9a.rh8.cbe.larg) no-repeat 0 0;
    border: 1px solid transparent
}

#Pp_Percent .cmdClose:hover {
    border: 1px solid #ccc;
    border-radius: 3px
}

.singledate {
    position: relative;
    width: 200px;
    margin: 0;
    padding: 0;
}

.singledate .cmdGetDate {
    position: absolute;
    right: 0;
    bottom: 15px;
    height: 20px;
    width: 26px;
    margin: 4px 0 0 6px;
    text-indent: -9999px;
    background: url(//dj9vbf0b1bhvo.cloudfront.net/images/skin/command.myPrattRecur.sprite.png?b9a.rh8.cbe.larg) no-repeat 0 -182px;
    clear: none
}

.singledate .cmdGetDate:hover {
    background-position: -270px -182px
}

#Tp_Time {
    z-index: 900;
    position: absolute;
    background-color: #fff;
    font-size: 11px;
    padding: 20px;
    box-shadow: 8px 9px 15px #333333;
    border-radius: 4px
}

.ie7 #Pp_Percent {
    border: 1px solid #D5DEE5
}

#Tp_Time .cmdClose {
    width: 11px;
    height: 12px;
    position: absolute;
    top: 5px;
    right: 5px;
    background: url(//dj9vbf0b1bhvo.cloudfront.net/images/skin/command.close.gif?b9a.rh8.cbe.larg) no-repeat 0 0;
    border: 1px solid transparent
}

#Tp_Time .cmdClose:hover {
    border: 1px solid #ccc;
    border-radius: 3px
}

#Items_ListEntry .nochange {
    color: #000;
    font-weight: normal;
    font-size: 10px;
    text-align: right;
}

#Items_ListEntry .pos {
    color: #00aa33;
    font-weight: normal;
    font-size: 10px;
    text-align: right;
}

#Items_ListEntry .neg {
    color: #aa0033;
    font-weight: normal;
    font-size: 10px;
    text-align: right;
}

#Items_ListEntry .alt {
    display: block;
    font-size: 8px;
    color: #000;
}

#Items_ListEntry .type {
    display: block;
    font-size: 8px;
    color: #000;
}

#Items_ListEntry .type {
    width: 55px;
}

#Items_ListEntry .components {
    width: 380px;
}

#Items_ListEntry .components .component {
    width: 100%;
    position: relative;
    top: 0;
    left: 0;
    line-height: 13px;
    font-size: 10px;
    font-weight: bold;
}

#Items_ListEntry .components .component .name {
    float: left;
    width: 120px;
    display: inline-block;
    height: 1px;
}

.cell {
    float: left;
    position: relative;
    top: 0;
    left: 0;
    padding-top: 20px;
}

.row strong {
    display: block;
    position: absolute;
    top: 0px;
    left: 3px;
    padding: 0;
    margin: 0;
    font-weight: bold;
    color: #333;
    font-size: 13px;
    line-height: 14px;
    padding-left: 7px;
    padding-top: 7px;
    color: #444;
    white-space: nowrap;
}

.chart {
    position: relative;
    top: 0;
    left: 0;
    width: auto;
    height: auto;
    padding-top: 7px;
}

.chart .reset {
    display: block;
    position: absolute;
    width: auto;
    height: auto;
    top: -10px;
    right: 0px;
    display: block;
    background-color: #0188CC;
    float: left;
    height: auto;
    font-size: 9px;
    width: 45px;
    text-align: center;
    color: #efe9ee;
    -webkit-border-radius: 15px;
    border-radius: 15px;
    cursor: pointer;
    -moz-box-shadow: 0 1px 2px #ccc;
    -webkit-box-shadow: 0 1px 2px #ccc;
    box-shadow: 0 1px 2px #ccc
}

#Header .logo {
    position: absolute;
    top: 10px;
    left: 10px;
}

#Header {
    background: none repeat scroll 0 0 #263842;
    box-sizing: border-box;
    height: 230px;
    left: 0;
    margin: 0;
    padding: 7px 0 0;
    position: fixed;
    top: 0;
    width: 220px;
    z-index: 1;
}

#Header h2 {
    font-size: 10px;
    font-weight: normal;
    width: 100px;
    left: 75px;
    position: absolute;
    top: 0px;
    line-height: 18px;
    color: #96A6A6;
    font-weight: normal;
    font-family: Verdana;
    letter-spacing: 0px;
}

#Utility {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
}

#Hdr_Content {
    display: none;
}

#RangeControl {
    background: none repeat scroll 0 0 #2FCC71;
    height: 25px;
    width: 70px;
    position: absolute;
    left: 0px;
    bottom: 0;
    -webkit-border-radius: 3px 0 3px 0;
    border-radius: 3px 3px 0 0;
    color: #fff;
    text-align: center;
    cursor: pointer;
    line-height: 25px;
    font-size: 13px;
}

#PlantLogger {
    height: 50px;
    float: right;
    position: relative;
    width: 100%;
}

#PlantLogger select {
    width: 350px;
    position: relative;
    z-index: 2;
    float: right;
    margin: 11px 60px;
}

#PlantLogger select {
    padding: 2px 5px;
    font-size: 15px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: url("/images/skin/select-icon.png") 96% / 15% no-repeat #FFF;
    background-size: 10px;
    border-radius: 15px;
    border: none;
}

#PlantLogger #fCarrier {
    margin-right: 150px;
}

#PlantLogger label {
    position: absolute;
    width: 550px;
    padding: 15px;
    z-index: 1;
    background-color: #000;
    height: 50px;
    border-radius: 15px 15px 0 0;
    color: #fff;
    float: right;
    right: 30px;
    font-weight: bold;
}

#LogStat {
    position: absolute;
    top: 15px;
    left: 5px;
    z-index: 3;
    font-size: 12px;
    color: #FFF;
}

#LogStat .amount {
    font-weight: bold;
}

#DateTimeLogger {
    float: left;
    clear: both;
    color: #333;
    margin-bottom: 10px;
}

#AppointmentLogger {
    width: 100%;
    float: left;
    clear: both;
    color: #333;
    padding-left: 30px;
}

#DateRangeLogger {
    background-color: #ECF0F1;
    border-top: 4px solid #2FCC71;
    color: #fff;
    width: 100%;
    float: left;
    clear: both;
    color: #333;
    -webkit-border-radius: 3px 3px 0 0;
    border-radius: 3px 3px 0 0;
    padding-top: 3px;
}

#DateLogger label {
    padding-left: 5px;
    font-size: 10px;
    font-weight: bold;
    color: #AAAFD0;
    line-height: 9px;
}

#DateLogger .item {
    float: left;
}

#TimeLoggerArrived label {
    float: left;
    padding: 3px;
    padding-left: 10px;
    font-size: 9px;
    font-weight: bold;
    text-transform: uppercase;
    color: #fff;
}

#TimeLoggerArrived .item {
    float: left;
}

#TimeLogger label {
    padding-left: 5px;
    font-size: 10px;
    font-weight: bold;
    color: #AAAFD0;
    line-height: 9px;
    display: block
}

#TimeLogger .item {
    float: left;
    font-size: 12px;
    line-height: 16px;
}

#EntryForm #TimeSlots {
    float: left;
    width: 100%;
    display: none;
}

#EntryForm.stateOverride #TimeSlots {
    display: block;
}

#EntryForm #TimeSlots .group {
    float: left;
    width: 205px !important;
    margin-right: 25px !important;
}

#EntryForm .group.consignee {
    display: none;
}

#EntryForm.stateOverride .group.consignee {
    display: block;
}

#EntryForm.stateOverride #Cmd_LogOverride {
    display: none;
}

.schedulemode-on #EntryForm #Cmd_LogOverride {
    display: none;
}

#TimeSlots .cmdClear {
    background-color: #F2614C;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    display: block;
    margin: 0;
    padding: 0;
    width: auto;
    height: 16px;
    line-height: 16px;
    padding: 1px;
    padding-left: 5px;
    padding-right: 5px;
    float: left;
    font-size: 12px;
    cursor: pointer;
    color: #fff;
    font-weight: bold;
}

#DateLogger .dates {
    display: block;
    width: auto;
    margin: 0;
    float: left;
    margin-right: 10px;
    padding: 5px;
}

#DateLogger .dates .item {
    display: block;
    width: auto;
    line-height: 16px;
    float: left;
    font-size: 12px;
    cursor: pointer;
}

#DateLogger .dates .item.selected {
    background-color: #207EEB !important;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    color: #fff;
    font-weight: 700;
    padding: 5px;
    height: auto;
}

#Cnt_SaveLogEntry .times {
    display: block;
    width: auto;
    margin: 0;
    clear: left;
    height: auto;
    margin-right: 10px;
    margin-bottom: 1px;
}

#Cnt_SaveLogEntry .times .item {
    display: block;
    margin: 0;
    padding: 0;
    width: auto;
    height: 16px;
    line-height: 16px;
    padding: 1px;
    padding-left: 7px;
    padding-right: 7px;
    float: left;
    font-size: 12px;
    margin-left: 0px;
    cursor: pointer;
    margin-bottom: 8px;
    color: #fff;
}

#Cnt_SaveLogEntry .times .item.selected {
    background-color: #0188CC !important;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    color: #fff;
    font-weight: bold;
}

#Cnt_SaveLogEntry .dates {
    display: inline;
    width: auto;
    margin: 0;
    clear: right;
    height: auto;
}

#Cnt_SaveLogEntry .dates .item {
    display: block;
    margin: 0;
    padding: 0;
    width: auto;
    height: 16px;
    line-height: 16px;
    padding: 1px;
    padding-left: 7px;
    padding-right: 7px;
    float: left;
    font-size: 12px;
    margin-left: 0px;
    margin-right: 5px;
    cursor: pointer;
    margin-bottom: 8px;
    color: #fff;
}

#Cnt_SaveLogEntry .dates .item.selected {
    background-color: #0188CC !important;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    color: #fff;
    font-weight: bold;
}

#TimeLoggerArrived {
    width: auto;
    float: left;
}

#TimeLoggerDelivery {
    width: auto;
    float: left;
}

#TimeLoggerComplete {
    width: auto;
    float: left;
}

#TimeLogger .times {
    width: auto;
    padding: 5px;
    float: left;
    height: auto;
    margin-right: 10px;
    cursor: pointer;
}

}

#TimeLogger .times .item {
    display: block;
    margin: 0;
    padding: 0;
    width: auto;
    height: 16px;
    line-height: 16px;
    padding: 1px;
    padding-left: 7px;
    padding-right: 7px;
    float: left;
    font-size: 12px;
    margin-left: 0px;
    cursor: pointer;
    margin-bottom: 8px;
    color: #fff;
}

#TimeLogger .times .item.selected {
    background-color: #207EEB !important;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    color: #fff;
    font-weight: bold;
    padding: 5px;
    height: auto;
}

#TimeLogger {
    /*! width: auto;
*/
    float: left;
    clear: none;
}

#DateLogger {
    width: auto;
    float: left;
    clear: none;
}

#LogBook {
    width: 100%;
    overflow: hidden;
}

#LogBook .manageForm {
    font-size: 11px;
    padding: 0;
    float: left;
    width: 100%;
    position: relative;
    top: 0;
    left: 0;
    clear: both;
    padding: 0 10px;
}

#LogBook .manageForm h3 {
    font-size: 11px;
    font-weight: bold;
    margin: 0;
    padding: 0;
    margin-top: 0;
    display: block;
    float: left;
}

#LogBook .manageForm h4 {
    font-size: 9px;
    font-weight: bold;
    margin: 0;
    padding: 0;
    margin-top: 1px;
    display: block;
    float: left;
}

#LogBook .manageForm h5 {
    font-size: 9px;
    font-weight: normal;
    margin: 0;
    padding: 0;
    margin-top: 1px;
    display: block;
    float: left;
}

#LogBook .manageForm hr {
    display: block;
    width: 100%;
    clear: both;
    margin: 0;
    float: left;
    margin-bottom: 3px;
    margin-top: 3px;
    border: 0;
    position: relative;
    left: -10px;
    border-top: 1px solid #DCEFB0;
}

#LogBook .manageForm .group {
    width: 100%;
    float: left;
    font-size: 11px;
    line-height: 11px;
    padding: 0;
    margin: 0;
    position: relative;
    top: 0;
    left: 0;
}

#LogBook .manageForm .group label {
    font-size: 10px;
    font-weight: bold;
    color: #AAAFD0;
    line-height: 9px;
    display: block;
}

#LogBook .manageForm .percentEntry input {
    font-size: 10px;
    line-height: 10px;
    height: 10px;
    margin: 0;
}

#LogBook .manageForm .percentEntry label {
    width: 100px;
    font-size: 9px;
}

#LogBook .manageForm .percentEntry input {
    width: 20px;
}

#LogBook .manageForm .percentEntry {
    width: 100px;
}

#LogBook .manageForm .percentEntry .allocated {
    background-color: #34495E;
    border: 1px solid #00bbe8;
    color: #fff;
}

#LogBook .manageForm .commands {
    clear: both;
    float: none;
    width: 100%;
}

#LogBook .manageForm .target {
    width: 100%;
    clear: both;
    padding-top: 5px
}

#LogBook .manageForm .target:first-child {
    padding-top: 0;
}

#LogBook .manageForm .target .group {
    width: auto;
    margin-right: 15px;
}

#LogBook .manageForm .target .group select {
    width: 180px;
}

#LogBook .editform .manageForm .target .group select {
    margin-top: 5px;
}

#LogBook .manageForm .target .group label {
    margin: 0;
    padding: 0;
    margin-bottom: 5px;
}

#LogBook .manageForm .target .group input {
    margin-top: 5px;
}

#LogBook .manageForm .totalSqFt label {
    width: 100px;
    margin: 0;
    padding: 0;
}

#LogBook .manageForm .totalSqFt input {
    width: 120px;
    margin-right: 4px;
}

#LogBook .manageForm .allocation {
    padding-left: 100px;
}

#LogBook .manageForm .section {
    position: relative;
    display: block;
    left: 0;
    top: 0;
    float: left;
    width: 100%;
}

#LogBook .manageForm .section h4 {
    position: absolute;
    display: block;
    width: 100px;
    left: -100px;
    top: 0;
}

#Nav_Cms {
    margin: 0;
    padding: 0;
    display: block;
    margin-left: 10px;
}

#Nav_Cms li {
    margin: 0;
    padding: 0;
    display: block;
}

#Nav_Cms .navItem a {
    display: block;
    background-color: #34495E;
    padding: 10px;
    list-style: none;
    color: #fff;
    margin-bottom: 4px;
    -webkit-border-radius: 3px 0 0 3px;
    border-radius: 3px 0 0 3px;
}

#Nav_Cms .selected a {
    background-color: #ECF0F1;
    color: #000;
    font-weight: bold;
}

#Nav_Cms .deactivated a {
    background-color: #999;
    color: #ccc;
    font-weight: bold;
}

#LogBook .manageItemList {
    background-color: #FFF;
    clear: both;
    padding-top: 10px;
    float: left;
    border-radius: 0 0 15px 15px;
    min-height: 407px;
    min-width: 1200px;
}

#LogBook .pnlSummaryForm {
    float: left;
    width: 100%;
    position: relative;
}

#LogBook #Pnl_SaveDaySetup,
#LogBook #Pnl_SaveOverrideSetup {
    position: relative;
    top: 0;
}

#LogBook .editform .pnlSummaryForm .footer {
    width: auto;
    float: right;
    clear: both;
    margin-right: 10px;
    margin-top: 10px;
}

#LogBook .pnlSummaryForm .footer .cmdSave {
    padding: 3px 10px;
    text-align: center;
    color: #f4f4f4;
    border-radius: 5px;
    font-weight: bold;
    font-size: 15px;
    float: left;
    cursor: pointer;
}

#LogBook.allocated .pnlSummaryForm .footer .cmdSave {
    background-color: #207EEB;
}

#LogBook .cmdOverride {
    float: left;
    text-align: center;
    line-height: 20px;
    color: #000;
    font-size: 12px;
    font-weight: bold;
    border-radius: 15px;
    background-color: #BDC1E0;
    cursor: pointer;
    clear: both;
    width: 100%;
}

#Hud_Remaining {
    position: absolute;
    bottom: 5px;
    right: 10px;
    font-weight: bold;
    font-size: 11px;
}

.underallocated #Hud_Remaining {
    color: #00bbe8;
}

.overallocated #Hud_Remaining {
    color: #aa0033;
}

.allocated #Hud_Remaining {
    color: #34495E;
}

#Cnt_ListResultCommands {
    width: 100%;
    float: left;
    height: auto
}

#Hud_Info {
    display: block;
    background: #fff;
    border-bottom: 1px solid #ccc;
    left: 0;
    opacity: 0.98;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 120;
    height: 40px;
    -moz-box-shadow: 0 1px 1px #ccc;
    -webkit-box-shadow: 0 1px 1px #ccc;
    box-shadow: 0 1px 1px #ccc
}

#Hud_Status {
    border: 1px solid #ECECEC;
    font-weight: bold;
    color: #6F6B6B;
    position: fixed;
    top: -1px;
    left: 50%;
    width: 300px;
    background-color: #fff;
    margin-left: -150px;
    padding: 7px 0;
    text-align: center;
    z-index: 3000;
    -webkit-border-radius: 0 0 6px 6px;
    -moz-border-radius: 0 0 6px 6px;
    border-radius: 0 0 6px 6px;
    -moz-box-shadow: 0 2px 3px #AAA;
    -webkit-box-shadow: 0 2px 3px #AAA;
    box-shadow: 0 2px 3px #AAA
}

#Hud_Main {
    z-index: 120;
    display: block;
    top: 0;
    position: fixed;
    left: 50%;
    margin-left: -503px;
    width: 980px
}

.pointer {
    background: url(//dj9vbf0b1bhvo.cloudfront.net/images/skin/arrow.up.png?b9a.rh8.cbe.larg) no-repeat center 0
}

#Hud_Results,
#Cmd_NextResults {
    float: left;
    width: 100%;
    height: 35px;
    text-align: center;
    line-height: 35px;
    color: #FFF;
    font-size: 16px;
    font-weight: bold;
    font-style: normal;
    padding: 0;
    margin: 5px 0 0 0;
    background-color: #00bbe8;
    border: 1px solid #1356A6;
    position: relative;
    left: 0;
    top: 0;
    padding: 0;
    border-radius: 3px
}

#Img_NextResults {
    display: none;
    position: absolute;
    top: 10px;
    left: 395px
}

#Cmd_PreviousResults,
#Cmd_NextResults input,
.loadingAll #Img_NextResults,
.loadingAll #Cmd_NextResults {
    display: none
}

.loadingAll #Hud_Results {
    height: 300px;
    background: url(/images/skin/loading.large.gif) no-repeat center 200px;
    background-color: #FAF8F9;
    border: 0;
    height: 700px;
}

.loading #Img_NextResults {
    display: block;
}

#Cmd_NextResults .text:hover {
    text-decoration: underline;
}

.loading #Cmd_NextResults .text {
    display: none;
}

#Pgr_ListResults {
    display: none;
}

#Pp_Percent .group {
    float: left;
    width: 40px;
}

#Pp_Percent .scale {
    display: block;
    width: 200px;
    margin: 0;
    padding: 5px;
}

#Pp_Percent .scale .item {
    display: block;
    margin: 0;
    padding: 0;
    width: auto;
    height: 16px;
    line-height: 16px;
    font-size: 10px;
    cursor: pointer;
    padding-left: 2px;
    padding-right: 2px;
    text-align: right;
    color: #000;
    width: 30px;
}

#Pp_Percent .scale .item:hover {
    text-decoration: underline;
}

#Pp_Percent .scale .item.selected {
    background-color: #0188CC;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    color: #fff;
    font-weight: bold;
}

#Tp_Time .form {
    margin-top: 10px;
}

#Tp_Time .form .colon {
    padding-left: 5px;
    padding-right: 10px;
    font-weight: bold;
}

#Tp_Time .form input {
    width: 30px;
}

#Tp_Time .form select {
    width: 70px;
}

#Tp_Time .cmdSet {
    float: right;
    height: 20px;
    margin: 0;
    padding: 10px;
    margin-top: 10px;
    padding-top: 2px;
    padding-bottom: 2px;
    text-align: center;
    line-height: 20px;
    color: #f4f4f4;
    font-size: 12px;
    font-weight: bold;
    border-radius: 5px;
    width: 80px;
    background-color: #0188CC;
}

.mWrite #Items_ListEntry .focus .commands .command,
.mWrite #Items_ListEntry .active .commands .command,
#Items_ListEntry .active .commands .cmdDetail,
#Items_ListEntry .active .commands .cmdDetail {
    display: block;
    float: right;
    clear: left;
    height: auto;
    margin: 0;
    margin-top: 3px;
    padding: 2px;
    padding-left: 5px;
    margin-left: 7px;
    padding-right: 5px;
    text-align: center;
    line-height: 14px;
    font-size: 9px;
    font-weight: bold;
    border-radius: 2px;
    width: auto;
    background-color: #ccc;
}

.mWrite #Items_ListEntry .active .commands .command:hover {
    background-color: #00BBE8;
    color: #fff;
}

.mWrite #Items_ListEntry .focus .commands .command,
.mWrite #Items_ListEntry .focus .commands .command:hover {
    text-align: center;
    line-height: 20px;
    color: #000;
    font-size: 12px;
    font-weight: bold;
    border-radius: 15px;
    background-color: #BDC1E0;
    cursor: pointer;
    padding: 0px 10px;
}

.mWrite #Items_ListEntry .focus .commands .cmdDetail {
    display: none;
}

.mWrite #Items_ListEntry .focus .commands .cmdEdit {
    display: block;
}

.mWrite #Items_ListEntry .focus .commands .cmdRemove {
    display: none;
}

.mWrite #Items_ListEntry .focus .commands .cmdUnschedule {
    display: none;
}

.mWrite #Items_ListEntry .removing .commands .cmdEdit {
    display: none;
}

.mWrite #Items_ListEntry .removing .commands .cmdRemove {
    display: block;
}

.mWrite #Items_ListEntry .unscheduling .commands .cmdEdit {
    display: none;
}

.mWrite #Items_ListEntry .unscheduling .commands .cmdUnschedule {
    display: block;
}

.mWrite #Items_ListEntry .editing .commands .cmdNew {
    display: none;
}

.mWrite #Items_ListEntry .creating .commands .cmdEdit {
    display: none;
}

.mWrite #Items_ListEntry .creating .commands .cmdNew {
    display: block;
}

.mWrite #Items_ListEntry .summary .handle {
    display: none;
    width: 20px;
    height: 20px;
    position: absolute;
    background-image: url(/images/skin/icon.move.png);
    left: -30px;
    top: 0;
}

.mWrite #Items_ListEntry .summary .handle:hover {
    cursor: move;
}

.mWrite #Items_ListEntry .active .summary .handle {
    display: block;
    z-index: 2;
}

#UI #Items_ListEntry .entry[key="0"] .summary .handle {
    display: none;
}

.mWrite #Items_ListEntry.modeAgenda .active .summary .handle {
    display: none;
}

.logUnscheduledLoad #Items_ListEntry .active .summary .handle {
    display: none;
}

.mWrite #Items_ListEntry.modeAgenda .focus .commands .cmdNew,
.mWrite #Items_ListEntry.modeAgenda .active .commands .cmdNew {
    display: none;
}

#Items_ListEntry .breakslot {
    width: 100%;
    float: left;
    clear: both;
    border-top: 2px solid #BBB;
    background-color: #DAD8D9;
}

#Items_ListEntry.modeAgenda .breakslot {
    display: none;
}

#UI #Items_ListEntry .breakslot .entries .entry[status="NotScheduled"] .commands {
    display: none;
}

#UI #Items_ListEntry .breakslot .slotdatetime .time {
    color: #777;
}

#Items_ListEntry .entry.focus {
}

#Items_ListEntry .rowdetail.focus {
    background-color: #eae8e9;
}

#Cnt_NoResults {
}

#Cnt_NoResults p {
    padding: 20px;
    font-size: 11px;
}

#Dv_ContactInfo {
    float: left;
    background-color: #FFF;
    width: 100%;
}

#Dv_ContactInfo .help {
    float: left;
    width: 100%;
    margin-bottom: 20px
}

#Dv_ContactInfo .group {
    float: left;
    margin-bottom: 7px
}

#Dv_ContactInfo .group .data {
    float: left;
    height: auto;
    width: 580px
}

#Dv_ContactInfo .group .textbox input {
    width: 150px;
    padding-left: 10px
}

#Dv_ContactInfo .group .checkbox {
    position: relative;
    padding-right: 30px;
    padding-top: 2px;
    display: block;
    width: auto
}

#Dv_ContactInfo .group .checkbox label {
    padding-left: 10px
}

#Dv_ContactInfo .group .checkbox input {
    padding-left: 10px;
    position: relative;
    top: 3px;
    left: 5px
}

#Dv_ContactInfo .group .caption {
    font-weight: bold;
    float: left;
    display: block;
    height: auto;
    text-align: left;
    padding: 5px;
    width: 115px
}

#Dv_ContactInfo .group .textbox {
    padding-right: 30px;
    display: block;
    width: auto
}

#Dv_ContactInfo .group .validated.textbox {
    background: url(//dj9vbf0b1bhvo.cloudfront.net/images/skin/icon.validated.gif?b9a.rh8.cbe.larg) no-repeat right 0
}

#Dv_ContactInfo.invalidate .group .invalid.textbox {
    background: url(//dj9vbf0b1bhvo.cloudfront.net/images/skin/icon.invalid.gif?b9a.rh8.cbe.larg) no-repeat right 0
}

#Mod_MyAccount .hud {
    color: #BD2263
}

#Mod_Manage .hud {
    color: #BD2263
}

#Mod_AccountOptions #Dv_ContactInfo {
    width: 420px;
    margin-left: 20px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px
}

#Mod_Manage #Dv_ContactInfo #Cmd_CloseAccountInfo {
    position: absolute;
    right: 0;
    top: -45px;
    padding-top: 6px;
    height: 30px;
    backgound-image: none !important
}

#Mod_Manage #Dv_ContactInfo #Cmd_CloseAccountInfo a {
    display: block;
    width: 125px;
    height: 30px;
    padding: 0 25px 0 0;
    color: #5a5958;
    font-weight: bold;
    font-size: 13px;
    text-decoration: none;
    text-transform: uppercase;
    line-height: 19px;
    background: url(//dj9vbf0b1bhvo.cloudfront.net/images/skin/icon.cancel.gif?b9a.rh8.cbe.larg) no-repeat scroll right -5px transparent
}

#Mod_Manage #Dv_ContactInfo #Cmd_CloseAccountInfo a:hover {
    text-decoration: underline
}

#Mod_Manage #Dv_ContactInfo .commands {
    margin: 20px 0 0 0;
    padding-left: 129px;
    float: right;
}

#Mod_Manage #Dv_ContactInfo #Cmd_SaveAccountInfo,
#Dv_ContactInfo #Cmd_CancelAccountInfo {
    float: right;
}

#Mod_Manage #Dv_ContactInfo #Cmd_SaveAccountInfo {
    margin-left: 20px;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    border-radius: 5px;
    background-color: #000;
    color: #fff;
    padding: 10px 20px;
}

#Mod_Manage #Dv_ContactInfo #Cmd_SaveAccountInfo:hover {
    background-position: -265px -34px
}

#Mod_Manage #Dv_ContactInfo #Cmd_SaveAccountInfo input,
#Dv_ContactInfo #Cmd_CancelAccountInfo input {
    display: none
}

#Mod_Manage #Dv_ContactInfo .group {
    width: 610px
}

#Mod_AccountOptions #Lv_ContactInfo.dataView {
    padding-top: 20px
}

#Mod_AccountOptions #Dv_PwInfo {
    width: 420px;
    float: left;
    margin: 0 0 0 20px;
}

#Mod_Manage #Cmd_ClosePwInfo a {
    display: block;
    width: 125px;
    height: 30px;
    padding: 0 25px 0 0;
    color: #5a5958;
    font-weight: bold;
    font-size: 13px;
    text-decoration: none;
    text-transform: uppercase;
    line-height: 19px;
    background: url(//dj9vbf0b1bhvo.cloudfront.net/images/skin/icon.cancel.gif?b9a.rh8.cbe.larg) no-repeat scroll right -5px transparent
}

#Mod_Manage #Dv_PwInfo #Cmd_ClosePwInfo {
    float: right;
    display: none;
}

#Mod_Manage #Dv_PwInfo .subcaption {
    float: left;
}

#Mod_AccountOptions #Dv_PwInfo .caption {
    display: block;
    width: 120px;
    text-align: left;
    padding: 0 15px 0 0;
    font-size: 12px;
    color: #6a6666;
    font-weight: bold
}

#Mod_Manage #Dv_PwInfo .requiredTip {
    float: left;
}

#Mod_Manage #Dv_PwInfo .group {
    width: 100%;
    margin: 7px 0 0 0;
    clear: left;
    float: left;
}

#Mod_Manage #Dv_PwInfo .caption,
#Mod_Manage #Dv_PwInfo .commands,
#Mod_Manage #Dv_PwInfo .commands .command {
    float: right;
}

#Mod_Manage #Dv_PwInfo .commands {
    clear: both;
    width: 100%;
    padding: 20px 0
}

#Cmd_SavePassword {
    margin-left: 20px;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    border-radius: 5px;
    background-color: #000;
    color: #fff;
    padding: 10px 20px;
}

#Cmd_SavePassword input {
    display: none;
}

#Cmd_CancelAccountInfo {
    color: #000;
}

#Cmd_CancelAccountInfo a {
    color: #000;
    line-height: 40px;
    font-size: 15px;
    color: #207eeb;
}

#Mod_Manage #Dv_PwInfo #Hud_ValidatePw {
    position: relative;
    top: 0;
    left: 0;
}

#Cnt_Content {
    width: 100%;
    padding: 0 20px;
}

#Mod_Manage .tooltip {
    opacity: 1;
}

select option {
    padding: 3px;
}

#DateRangeLogger {
    position: relative;
    top: 0;
    left: 0;
}

#DateRangeLogger .dates {
    float: left;
    padding-left: 10px;
}

#LogDateRange {
    width: 100%;
    display: block;
    float: left;
}

#DateRange {
    position: relative;
    top: 0;
    left: 0;
}

#Rng_Calendar {
    position: relative;
    top: 0;
    left: 0;
    width: auto;
    display: block;
    float: left;
}

#Rng_Calendar {
    background-color: transparent;
    padding: 4px;
}

#Rng_Calendar .board {
    background-color: transparent;
    margin-right: 10px;
    float: left;
    width: 200px;
    border: none;
}

#Rng_Calendar .board .day {
    width: 14.285%;
}

#Rng_Calendar .board .day .number {
    width: 20px;
    height: 20px;
    top: 0;
    left: 0;
    text-align: center;
    font-size: 12px;
}

#Rng_Calendar .cmdPreviousYear {
    left: 2px;
}

#Rng_Calendar .cmdPreviousMonth {
    left: 28px;
}

#Rng_Calendar .cmdNextYear {
    right: 12px;
}

#Rng_Calendar .cmdNextMonth {
    right: 38px;
}

#Rng_Calendar .boards {
}

#Rng_Calendar .board {
}

#Cmd_ApplyDateRange {
    height: 20px;
    margin: 0;
    padding: 10px;
    padding-top: 2px;
    padding-bottom: 2px;
    float: right;
    margin-left: 20px;
    text-align: center;
    line-height: 20px;
    color: #f4f4f4;
    font-size: 12px;
    font-weight: bold;
    border-radius: 5px;
    width: 80px;
    background-color: #0188CC;
    color: #fff;
    margin: 10px;
    position: absolute;
    right: 0;
    bottom: 5px;
}

#DateRangeLogger {
    padding-bottom: 0;
}

#LogDateRange {
    border-top: 1px dashed #27AE61;
    width: 100%;
    padding-left: 10px;
    margin-top: 5px;
    padding-right: 10px;
    padding-top: 0px;
    background-color: #ECF0F1;
    position: relative;
    left: -10px;
    top: 0;
}

.stateDateRange #DateTimeLogger {
    display: none;
}

.stateDateRange #Pnl_SaveLogEntry {
    display: none;
}

.stateDateRange #LogEditInfo {
    display: none;
}

#Items_ListEntry .rowdetail .components {
    width: 100%;
    float: left;
    display: block;
}

#Items_ListEntry .rowdetail .comments {
    width: 100%;
    float: left;
    display: block;
    clear: both;
}

#Items_ListEntry .rowdetail .detail {
}

#Items_ListEntry .headrow div {
    font-weight: bold;
    color: #405361;
}

#EntryForm {
    display: none;
    position: relative;
    bottom: 0;
    left: 0;
    /* No z-index: it made this a stacking context pinned at 0, which trapped any
       Chosen panel opened inside the edit form underneath the rows (.col is 10,
       .commandContainer is 100). position:relative alone paints the same. */
    top: 0;
    border-radius: 5px;
}

#Items_ListEntry .editing #EntryForm {
    display: block;
    position: relative;
}

#LogEditInfo {
    display: none;
    position: relative;
    color: #333;
    text-align: right;
    height: 50px;
    float: left;
    box-sizing: border-box;
    width: 100%;
    font-size: 10px;
    margin-top: 20px;
}

#LogEditInfo {
    display: block;
}

#LogEditInfo p {
    position: absolute;
    right: 10px;
    top: 10px;
    margin: 0;
    font-weight: 700;
}

#LogEditInfo .cmdCancel {
    position: absolute;
    right: 10px;
    color: #333;
    text-decoration: underline;
    top: 25px;
    cursor: pointer;
}

#LogEditInfo .cmdCancel:hover {
    text-decoration: underline;
}

.logUnscheduledLoad #Cnt_ListResults {
    margin-bottom: 300px;
}

#Scheduler {
    width: 700px;
}

#ScheduleAvailableSlots {
    width: 700px;
    float: left;
    height: auto;
    overflow: hidden;
    overflow-y: auto;
}

#ScheduleAvailableSlots .slot {
    width: 85px;
    float: left;
    background-color: #BDC1E0;
    margin-right: 10px;
    margin-left: 0;
    margin-bottom: 10px;
    cursor: pointer;
    text-align: center;
    font-weight: 500;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    color: #fff;
    font-weight: 700;
    padding: 5px;
    height: auto;
}

#ScheduleAvailableSlots .slot.selected {
    border: 2px solid #00aaaa;
}

#ScheduleAvailableSlots .slot:hover {
    background-color: #207EEB;
}

#ScheduleAvailableSlots .slot .date {
    display: none;
}

#Scheduler.loading #ScheduleAvailableSlots .slot {
    display: none;
}

#Scheduler #Cnt_NoSlots {
    position: absolute;
    top: 0;
    left: 0;
    padding: 10px;
}

#Scheduler.loading #Cnt_NoSlots {
    display: none;
}

#Items_ListEntry {
    width: 100%;
    border-collapse: collapse;
}

#Items_ListEntry .entry {
    float: left;
    width: 100%;
    clear: both;
    padding-left: 15px;
}

#Items_ListEntry .col {
    float: left;
}

#Items_ListEntry .datetime {
    width: 90px;
    padding-right: 20px;
    text-align: right;
}

#Items_ListEntry .datetime .date {
    font-size: 9px;
}

#Items_ListEntry .datetime .time {
    font-size: 12px;
    font-weight: bold;
}

.row {
    margin: 0;
}

#Items_ListEntry {
    width: 100%;
    float: left;
    clear: both;
}

body #Cnt_ListResults[entrycount="0"] #Items_ListEntry {
    margin-bottom: 10px;
}

#Items_ListEntry .headrow {
    width: 100%;
    float: left;
    clear: both;
    position: relative;
    top: -5px;
    left: 40px;
    font-size: 12px
}

#Items_ListEntry .apptslot {
    width: 100%;
    clear: both;
    display: block;
    margin: 0 auto;
    padding: 0 0 35px;
    float: left;
    position: relative;
}

#Items_ListEntry .apptslot.dropzone {
    background-color: #FFFFCC;
}

#Items_ListEntry .apptslot .cmdNew {
    position: absolute;
    bottom: 5px;
    left: 63px;
    font-size: 25px;
    text-indent: -9999px;
    height: 17px;
    width: 17px;
    background: url("/images/skin/icon.addnew.png") no-repeat;
    background-size: contain;
    z-index: 10;
}

.cardLayout #Items_ListEntry .apptslot .cmdNew {
    position: absolute;
    left: 10px;
    top: 20px;
    font-size: 25px;
    text-indent: -9999px;
    height: 17px;
    width: 17px;
    background: url("/images/skin/icon.addnew.png") no-repeat;
    background-size: contain;
    z-index: 10;
}

#Items_ListEntry.modeAgenda .apptslot .cmdNew {
    display: none
}

#Items_ListEntry .apptslot .cmdNew:hover {
    background-image: url("/images/skin/icon.addnew.selected.png")
}

#Items_ListEntry .headrow .slotdatetime {
    text-align: left;
    left: -10px;
    visibility: hidden;
}

#Items_ListEntry .slotdatetime {
    width: auto;
    padding: 0 7px;
    text-align: right;
}

#Items_ListEntry .slotdatetime .time {
    font-size: 16px;
    color: #BDC1E0;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
}

#Items_ListEntry .slotdatetime .time .tz,
#Items_ListEntry .slotdatetime .time .tz2 {
    text-transform: uppercase;
    padding: 0;
    margin: 0;
    font-size: 12px;
    font-weight: bold;
}

#Items_ListEntry .entries {
    position: relative;
    top: 0;
    left: 0;
    margin-left: 70px;
    float: none;
    margin-right: 0px;
    border-top: 1px solid #999;
}

#Items_ListEntry .entry .col.datetime {
    display: none;
}

#Items_ListEntry #ApptSlot_-888_-888 .entry .col.datetime {
    display: block;
    float: right;
}

#Items_ListEntry #ApptSlot_-888_-888 .entry[status="NotScheduled"] .col.datetime {
    display: none;
}

#Items_ListEntry #ApptSlot_999_999 .entry .col.datetime {
    display: block;
    float: right;
}

#Items_ListEntry #ApptSlot_999_999 .entry[status="NotScheduled"] .col.datetime {
    display: none;
}

#Items_ListEntry .apptslot .entry .col.datetime {
    display: block;
    float: right;
}

#Items_ListEntry .apptslot .entry[status="NotScheduled"] .col.datetime {
    display: none;
}

#Items_ListEntry .col.load {
    width: 110px;
    font-weight: bold;
    padding-left: 10px;
}

#Items_ListEntry .col.order {
    width: 100px;
}

#Items_ListEntry .col.consignee {
    width: 150px;
}

#Items_ListEntry .col.shipper {
    width: 200px;
}

#Items_ListEntry .col.carrier {
    width: 200px;
}

#Items_ListEntry .col.pickupStatus {
    width: 130px;
}

#Items_ListEntry .col.deliveryStatus {
    width: 130px;
}

#Items_ListEntry .col.timezone {
    position: absolute;
    top: 0;
    right: 65px;
    text-align: right;
}

#Items_ListEntry .col.commands {
    float: right;
    position: relative;
    top: 0;
    right: 0;
    z-index: 3;
}

#Items_ListEntry.modeDaily .col.commands {
    float: right;
}

#Items_ListEntry .commands {
    text-align: right;
}

#Items_ListEntry .commands .command {
    display: none;
    color: #666;
}

#Items_ListEntry .accessdetail {
    display: none;
    line-height: 14px;
    width: 100%;
    height: auto;
    clear: both;
    float: left;
    box-sizing: border-box;
    border-radius: 5px;
    background: #F4F5FA;
    color: #AAAFD0;
    padding: 5px 10px;
}

#Items_ListEntry .viewAccessUrl .accessdetail {
    display: block;
}

#Items_ListEntry .accessdetail .accessCode {
    margin-left: 2px;
    font-weight: bold;
    font-size: 15px;
    margin-bottom: 5px;
}

#Items_ListEntry .accessdetail input {
    padding: 0 0 0 5px;
    margin: 0;
    font-size: 12px;
    float: left;
    cursor: pointer;
    user-select: all;
    width: 300px;
    height: 20px;
    line-height: 20px;
}

#Items_ListEntry .accessdetail .cmdCopy {
    float: left;
    margin-left: 10px;
    text-align: center;
    line-height: 20px;
    color: #000;
    font-size: 12px;
    font-weight: bold;
    border-radius: 15px;
    background-color: #BDC1E0;
    cursor: pointer;
    padding: 0px 10px;
}

#Items_ListEntry .accessdetail .cmdCopy:hover {
    background-color: #00BBE8;
    color: #fff;
}

#Items_ListEntry.modeAgenda .slotdatetime .time .tz {
    display: none;
}

#Items_ListEntry.modeDaily .slotdatetime .time .tz2 {
    display: none;
}

#Items_ListEntry.modeDaily .slotdatetime .time .tz.tz2,
#Items_ListEntry.modeAgenda .slotdatetime .time .tz.tz2 {
    display: block;
}

.logUnscheduledLoad #Items_ListEntry.modeAgenda .slotdatetime .time .tz2 {
    display: none;
}

#UI #Items_ListEntry .entry[key="0"] .col {
    text-indent: -9999px;
    text-align: left;
    height: 20px;
}

#UI #Items_ListEntry .entry[key="0"] .col.datetime {
    text-indent: 0;
    text-align: right;
}

#UI #Items_ListEntry .entry[key="0"] .col.commands {
    display: none
}

#Items_ListEntry .headrow .slotdatetime .time,
#Items_ListEntry .headrow .load,
#Items_ListEntry .headrow .order {
    white-space: nowrap;
}

#Items_ListEntry .entry .consignee,
#Items_ListEntry .entry .carrier,
#Items_ListEntry .entry .shipper,
#Items_ListEntry .entry .arrived {
    color: #000;
    font-weight: normal;
    font-size: 9px;
    text-align: left;
}

#Items_ListEntry .entry .col {
    font-size: 15px;
    line-height: 20px;
    text-align: left;
    overflow: hidden;
}

#Items_ListEntry .entry .load,
#Items_ListEntry .entry .order {
    white-space: nowrap;
}

#Items_ListEntry .entries .entry {
    box-sizing: border-box;
}

.logUnscheduledLoad #Items_ListEntry .entries .entry {
    border-bottom: solid 1px #D5DEE5;
}

/* Card view already draws a full border, radius and shadow on .summary, so the
   row separator above only adds a stray line underneath each card. */
.cardLayout.logUnscheduledLoad #Items_ListEntry .entries .entry {
    border-bottom: none;
}

#Items_ListEntry.modeDaily .entries {
}

#Items_ListEntry .entries .entry:before {
    content: "\25CF";
    color: #207EEB;
    font-size: 45px;
    top: 0px;
    left: -10px;
    position: absolute;
}

#Items_ListEntry .entries .entry[status="NotScheduled"]:before {
    content: "";
}

#Items_ListEntry .entries .entry[key="0"]:before {
    content: "";
}

.logUnscheduledLoad #Items_ListEntry .entries .entry:before {
    content: "\25CF";
}

#Items_ListEntry .entries .entry[status="Early"]:before {
    color: #85B90F;
}

#Items_ListEntry .entries .entry[status="Late"]:before {
    color: #8229B1;
}

#Items_ListEntry .entries .entry[status="NoShow"]:before {
    color: #BDC1E0;
}

#Items_ListEntry .entries .entry[status="OnTime"]:before {
    color: #207EEB;
}

#Items_ListEntry .entries .entry[status="Unloading"]:before {
    color: #207EEB;
}

#Items_ListEntry .entries .entry[status="Delivered"]:before {
    color: #11C9C7;
}

#Items_ListEntry .entries .entry[status="NotScheduled"]:before {
    color: #EBA73F;
}

/* Hide all entries (cards) inside empty time slots */
.cardLayout #Items_ListEntry .apptslot[schedulecount="0"] .entries .entry .summary,
.cardLayout #Items_ListEntry .breakslot[schedulecount="0"] .entries .entry .summary {
    display: none !important;
}

#Items_ListEntry .entries .entry .summary {
    width: 100%;
    float: left;
    /* Containing block for the row chevron and its .commandContainer menu, both of
       which are absolutely positioned. Without it they resolve against .entries,
       which wraps every row, so every row's menu opened at the top of the list. */
    position: relative;
    box-sizing: border-box;
    border-radius: 4px 4px 4px 4px;
    padding: 2px 3px;
    font-size: 20px;
    margin-bottom: 5px;
}

#Items_ListEntry .cmdComplete {
    display: block;
    clear: both;
    height: auto;
    text-align: center;
    line-height: 12px;
    font-size: 9px;
    font-weight: bold;
    border-radius: 2px;
    width: auto;
    background-color: #ccc;
    color: #666;
    margin: 0;
}

#Items_ListEntry .cmdComplete:hover {
    background-color: #00BBE8;
    color: #fff;
}

#Items_ListEntry .entries .entry .col {
    color: #000;
}

#Items_ListEntry .entries .entry .summary .commands {
    position: absolute;
    top: 7px;
    right: 15px;
    height: 25px;
    width: 25px;
    background: url("/images/skin/cheveron-down.png") no-repeat;
    background-size: contain;
}

#Items_ListEntry .entries .entry .summary .commandContainer {
    display: none;
    top: 0;
    right: 0;
    width: auto;
    overflow: hidden;
    background: #FFF;
    z-index: 15;
    position: absolute;
    border-radius: 0 0 15px 15px;
    padding: 0 10px;
    color: #999;
    font-weight: bold;
    box-shadow: -5px 10px 10px #AAA7;
    z-index: 100;
}


.cardLayout #Items_ListEntry .entries .entry .summary .commandContainer {
    padding: 10px;
}

#Items_ListEntry .entries .entry .summary .commandContainer .command {
    float: left;
    clear: both;
    cursor: pointer;
    text-decoration: none;
    margin: 5px 0;
    font-size: 12px;
    width: 100%;
}

#Items_ListEntry .entries .entry .summary .commandContainer .command:hover {
    color: #207EEB
}


#Items_ListEntry .entries .entry .summary .commands:hover + .commandContainer {
    display: block
}

#Items_ListEntry .entries .entry .summary .commandContainer:hover {
    display: block
}

#Items_ListEntry .entries .entry[status="NotScheduled"] .summary .commands {
    display: none;
}

.logUnscheduledLoad #Items_ListEntry .entries .entry[status="NotScheduled"] .summary .commands {
    display: block
}

#Items_ListEntry .entries .entry {
    width: 100%;
    clear: right;
}

#UI #Items_ListEntry .apptslot .entry .col.datetime {
    width: 100%;
    clear: both;
    float: left;
    background-color: transparent;
    left: -10px;
    padding-left: 10px;
    opacity: 1;
    padding-bottom: 0;
    padding-top: 0;
    position: absolute;
    color: #000;
    height: 30px;
    z-index: -1;
}

#UI #Items_ListEntry.modeAgenda .apptslot .entry .col.datetime {
    color: #333
}

#UI #Items_ListEntry .apptslot .entry .col.datetime .time {
    float: right;
    font-size: 12px;
    font-weight: normal;
    display: block;
    padding-right: 57px;
}

#UI #Items_ListEntry .apptslot .entry .col.datetime .date {
    float: left;
    font-size: 12px;
    font-weight: normal;
    display: none;
    padding-left: 0px;
}

#UI #Items_ListEntry.modeAgenda .apptslot .entry .col.datetime .date {
    display: block;
    position: absolute;
    top: 14px;
    right: 77px;
}

#Items_ListEntry .apptslot .entry[key="0"] .col.datetime {
    display: none;
}

#UI #Items_ListEntry.modeDaily .headrow {
}

#UI #Items_ListEntry.modeDaily .entries .entry[key="0"] .summary {
    background-color: transparent;
}

#UI #Items_ListEntry.modeAgenda .entries .entry:last-child {
    border-bottom: none;
}

#UI #Items_ListEntry.modeAgenda .entries .entry .summary {
    background-color: transparent;
    padding-top: 2px;
    min-height: 33px;
    box-sizing: border-box;
}

#UI #Items_ListEntry.modeAgenda .entries .entry[key="0"] .summary {
    background-color: transparent;
}

#Items_ListEntry.modeAgenda .entries .entry .col {
    color: #000;
    z-index: 10;
    position: relative;
}

#Items_ListEntry.modeDaily .editform {
    position: absolute;
    bottom: -20px;
    left: 0;
}

#Items_ListEntry.modeDaily .editform .commands .command {
    white-space: nowrap;
    margin-bottom: 7px;
}

#Items_ListEntry.modeDaily .entries .entry.editing {
}

#Items_ListEntry.modeDaily .entries .entry.editing .summary {
}

#Items_ListEntry.modeDaily .entries .entry.creating .summary {
    border: 0
}

#Items_ListEntry.modeAgenda .editform {
    position: absolute;
    bottom: -20px;
    left: 0;
}

#Items_ListEntry.modeAgenda .editform .commands .command {
    white-space: nowrap;
    margin-bottom: 7px;
}

#Items_ListEntry.modeAgenda .entries .entry.editing {
    border: 0;
}

#Items_ListEntry.modeAgenda .entries .entry.editing .summary {
    background-color: #FAF8F9;
    border: 0;
}

#Items_ListEntry.modeAgenda .entries .entry.creating .summary {
    border: 0
}

#Items_ListEntry.modeDaily .entries .entry.editing .summary .col .command {
    display: none;
}

#EntryForm {
    background-color: #fff;
    padding: 0;
}

#LogBook .manageForm {
}

#Items_ListEntry .rowdetail {
    display: none;
    text-indent: 0;
    display: none;
}

#Items_ListEntry .expanded.rowdetail {
    display: block;
    line-height: 14px;
    width: 100%;
    height: auto;
    clear: both;
    float: left;
    box-sizing: border-box;
    border-radius: 5px;
    background: #F4F5FA;
    color: #AAAFD0;
    padding: 5px 10px;
}

#Items_ListEntry .rowdetail .detail {
    margin: 0;
    float: left;
    clear: both;
}

#Items_ListEntry .rowdetail .components {
    padding: 0;
    margin: 0;
}

#Items_ListEntry .rowdetail .components .component {
    padding: 0;
    margin: 0;
}

#Items_ListEntry .rowdetail.focus {
    display: none;
}

#Items_ListEntry.modeAgenda .apptslot[schedulecount="0"] {
    display: none;
}

#ApptSlot_-888_-888[schedulecount="0"] {
    display: none;
}

#ApptSlot_999_999[schedulecount="0"] {
    display: none;
}

.logUnscheduledLoad #ApptSlot_-888_-888 {
    display: none;
}

.logUnscheduledLoad #ApptSlot_999_999 {
    display: none;
}

#Calendar {
    background-color: #FFF;
    float: left;
    width: 100%;
    text-align: center;
    padding-top: 30px;
    border-radius: 15px 15px 0 0;
    padding-bottom: 30px;
}

#Calendar .command {
    font-weight: bold;
    padding-left: 20px;
    padding-right: 20px;
}

#Calendar #Cmd_PreviousCalendarDate {
    background: url("/images/skin/arrow_left.png") no-repeat;
    background-size: contain;
    background-position: center;
    height: 25px;
    display: inline-block;
    cursor: pointer;
}

#Calendar #Cmd_NextCalendarDate {
    background: url("/images/skin/arrow_right.png") no-repeat;
    background-size: contain;
    background-position: center;
    display: inline-block;
    height: 25px;
    cursor: pointer;
}

#Calendar .text {
    font-weight: bold;
    padding-left: 20px;
    padding-right: 20px;
    font-size: 35px;
    line-height: 50px
}

.logUnscheduledLoad #Items_ListEntry.modeAgenda {
    margin-top: 20px;
}

.logScheduledLoad #Items_ListEntry.modeAgenda {
    margin-top: 20px;
}

.logUnscheduledLoad #Items_ListEntry.modeAgenda .entries .entry .datetime {
    position: absolute;
    display: block;
    left: -60px;
    background-color: transparent;
}

.logUnscheduledLoad #Items_ListEntry.modeAgenda .entries .entry[status="NotScheduled"] .datetime {
    display: none;
}

.logUnscheduledLoad #Items_ListEntry.modeAgenda .entries .entry .deliveryStatus {
    font-weight: bold;
    color: #0188cc;
}

.logUnscheduledLoad #Items_ListEntry.modeAgenda .entries .entry[status="NotScheduled"] .deliveryStatus {
    font-weight: normal;
    color: #f2614c;
}

.logUnscheduledLoad #Items_ListEntry.modeDaily .entries .entry.editing .summary {
    height: auto;
}

.logUnscheduledLoad #Items_ListEntry.modeAgenda .entries .entry .dates .datetime {
    display: block;
    position: relative;
    left: 0;
    top: 0;
}

#LogBook {
    padding-top: 40px;
    padding-bottom: 100px;
}

.filterGroup {
    display: block;
    width: 100%;
    clear: both;
    float: left;
    height: auto;
    padding-left: 64px;
    position: relative;
    left: 0;
    top: 0;
    margin: 0 auto;
    background-color: #FAF8F9;
}

.filterGroup .heading {
    display: none;
}

#NestingCell {
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    padding-top: 4px;
    position: absolute;
    left: auto;
    right: 50px;
    top: 4px;
}

#NestingCell strong {
    display: none;
}

#NestingCell .nestings {
    display: block;
    width: auto;
    margin: 0;
    padding: 0;
    float: left;
    height: auto;
    margin-right: 40px;
    margin-bottom: 0px;
}

#NestingCell .nestings .nesting {
    display: block;
    margin: 0;
    padding: 0;
    width: auto;
    padding: 1px;
    padding-left: 7px;
    padding-right: 7px;
    float: left;
    font-size: 12px;
    margin-left: 10px;
    cursor: pointer;
    margin-bottom: 0px;
}

/* Old radio button style - overridden by modern segmented control below */
#NestingCell .nestings .nesting:before {
    content: "";
    margin-right: 0;
    color: transparent;
    font-size: 0;
    top: 0;
    position: static;
}

#NestingCell .nestings .nesting.selected {
    font-weight: bold;
}

#NestingCell .nestings .nesting.selected:before {
    content: "";
}

#SetupCell {
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    padding-top: 10px;
    position: absolute;
    left: auto;
    left: 10px;
    top: 10px;
}

#SetupCell strong {
    display: none;
}

#SetupCell .setups {
    display: block;
    width: auto;
    margin: 0;
    padding: 0;
    float: left;
    height: auto;
    margin-right: 40px;
    margin-bottom: 0px;
}

#SetupCell .setups .setup {
    display: block;
    padding: 0;
    width: auto;
    height: 16px;
    line-height: 16px;
    float: left;
    font-size: 12px;
    cursor: pointer;
    background-repeat: no-repeat;
    background-size: contain;
    text-decoration: underline;
    margin-left: 20px;
}

#SetupCell .setups .setup.selected {
    background-color: #00BBE8;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    color: #fff;
    font-weight: bold;
}

.logUnscheduledLoad #SetupCell {
    display: none;
}

.logUnscheduledLoad #NestingCell .nestings .nesting {
    display: none;
}

.logUnscheduledLoad #NestingCell .nestings .selected {
    display: block;
}

#LogBook .manageItemList {
    width: 100%;
}

.logUnscheduledLoad #Legend {
    margin-top: 90px
}

#Legend {
    width: auto;
    background: #FFF;
    padding: 20px;
    font-size: 12px;
    margin: 0 20px;
    border-radius: 15px;
}

#Legend.hidden {
    display: none;
}

#Legend .item {
    text-align: left;
    text-transform: uppercase;
    margin-left: 10px;
    color: #000;
    display: block;
    margin: 5px 0;
    height: 20px;
}

#Legend .item .text {
    white-space: nowrap;
    display: inline-block;
    line-height: 20px;
    position: relative;
    top: -3px;
    font-weight: bold
}

#Legend .item .key {
    width: 15.5px;
    display: inline-block;
    height: 100%;
    border-radius: 15px;
    margin-right: 10px;
    height: 15px
}

#Legend .item[status="Early"] .key {
    background-color: #85B90F;
}

#Legend .item[status="Late"] .key {
    background-color: #8229B1;
}

#Legend .item[status="NoShow"] .key {
    background-color: #BDC1E0;
}

#Legend .item[status="OnTime"] .key {
    background-color: #207EEB;
}

#Legend .item[status="Unloading"] .key {
    background-color: #207EEB;
}

#Legend .item[status="Delivered"] .key {
    background-color: #11C9C7;
}

#Legend .item[status="NotScheduled"] .key {
    background-color: #EBA73F;
}

#Legend .item[status="DockScheduled"] .key {
    background-color: #AAAFD0;
}

#Legend .item[status="DockNotScheduled"] .key {
    background-color: #207EEB;
}

#Legend .item .text {
    color: #000;
}

#Legend .item[status="GoalBad"] .key {
    background-color: #CA364E;
}

#Legend .item[status="GoalClose"] .key {
    background-color: #FFC000;
}

#Legend .item[status="GoalMet"] .key {
    background-color: #51A24A;
}

#Legend .item[status="GoalOver"] .key {
    background-color: #51C24A;
}

#Legend .item[status="GoalRemaining"] .key {
    background-color: #F3F3F3;
}

#Tagline {
    display: none;
}

#Items_ListEntry.modeDaily .editform {
    position: relative;
    top: 0;
    left: 0;
    float: left;
    clear: both;
    width: 100%;
    margin-bottom: 7px;
    display: none;
    padding: 10px;
    position: relative;
}

__#Items_ListEntry.modeDaily .entries .entry.editing .summary {
    display: none;
}

#Items_ListEntry.modeDaily .entries .entry.editing .editform {
    display: block;
}

#Items_ListEntry.modeDaily .entries .entry.editing {
    height: auto;
}

#Items_ListEntry.modeAgenda .editform {
    position: relative;
    top: 0;
    left: 0;
    float: left;
    clear: both;
    width: 100%;
    margin-bottom: 7px;
    display: none;
    padding: 10px;
}

#Items_ListEntry .editform {
    background-color: #F4F5FA
}

__#Items_ListEntry.modeAgenda .entries .entry.editing .summary {
    display: none;
}

#Items_ListEntry.modeAgenda .entries .entry.editing .editform {
    display: block;
}

#Items_ListEntry.modeAgenda .entries .entry.editing {
    height: auto;
}

.logUnscheduledLoad #Items_ListEntry.modeAgenda .entries .entry.editing .summary {
    height: auto;
}

.logUnscheduledLoad #Items_ListEntry.modeAgenda .editform {
    position: relative;
    top: 0;
    left: 0;
    margin-bottom: 10px;
    clear: both;
    float: left;
}

.logUnscheduledLoad #CalendarDate {
    display: none;
}

#LogBook .daySetupForm .target .daysetup .daytarget {
    clear: both;
    float: left;
    left: 10px;
    position: relative;
    top: 0;
    margin: 10px 0;
}

#LogBook .daySetupForm .target .group {
    width: 100%;
    margin-bottom: 20px;
}

#LogBook .daySetupForm .target .group.datafield {
    border: solid #ccc 2px;
    padding: 15px 10px 10px;
    position: relative;
    border-radius: 10px;
}

#LogBook .daySetupForm .target .group.datafield .tip {
    margin: 10px 0 0
}

#LogBook .daySetupForm .target .group.datafield label {
    position: absolute;
    top: -7px;
    background: #F4F5FA;
    color: #000;
    line-height: 15px;
    font-size: 13px;
    height: 20px;
    padding: 0 5px
}

#LogBook .daySetupForm .target .group.confirmEmail #fConsigneeConfirmEmail {
    width: 400px;
    padding: 10px
}

#LogBook .daySetupForm .target .group.datafield select {
    width: 400px;
    padding: 10px
}

#LogBook .daySetupForm .target .daysetup {
    border-top: 1px solid #ccc;
    width: 100%;
    padding-top: 8px;
}

#LogBook .daySetupForm .target .daysetup .component {
    width: 133px;
    float: left;
    clear: right;
    height: 25px;
}

#LogBook .daySetupForm .target .daysetup .day {
    width: 100px;
    text-align: center;
    padding-right: 17px;
    font-size: 13px;
    font-weight: bold;
    line-height: 20px;
}

#LogBook .daySetupForm .target .daysetup .availability {
    position: relative;
    top: 0;
    left: 0;
}

#LogBook .daySetupForm .target .daysetup input {
    display: block;
    top: 3px;
    left: 0;
}

#LogBook .daySetupForm .target .daysetup label {
    display: inline-block;
    position: absolute;
    top: 0;
    left: 23px;
}

#LogBook .daySetupForm .target .daysetup .times {
    width: auto;
}

#LogBook .daySetupForm .target .daysetup .times select {
    float: left;
    width: 130px;
}

#LogBook .daySetupForm .target .daysetup .times .to {
    float: left;
    display: block;
    padding-left: 7px;
    padding-right: 7px;
    text-transform: lowercase;
    margin: 5px 0;
}

#LogBook .daySetupForm .target .daysetup .slotsize {
    width: auto;
}

#LogBook .daySetupForm .target .daysetup .slotsize input {
    float: left;
    position: static;
    width: 30px;
    margin: 0;
}

#LogBook .daySetupForm .target .daysetup .slotsize .to {
    float: left;
    display: block;
    padding-left: 7px;
    padding-right: 7px;
    text-transform: lowercase;
    margin: 5px 0;
}

#LogBook .daySetupForm .target .daysetup {
    color: #333;
}

#LogBook .daySetupForm .target .daysetup.unavailable {
    color: #ccc;
}

#LogBook .daySetupForm .target .daysetup.unavailable .day {
    color: #333;
}

#LogBook .daySetupForm .target .daysetup.unavailable .availability {
    color: #333;
}

#LogBook .daySetupForm .target .daysetup label {
    width: auto;
}

#LogBook .pnlSummaryForm .footer .cmdCancel {
    text-align: center;
    color: #666;
    font-size: 15px;
    text-decoration: underline;
    font-weight: bold;
    float: left;
    margin-right: 25px;
    padding: 3px 10px;
    cursor: pointer;
}

#LogBook .pnlSummaryForm .footer .cmdCancel:hover {
    color: #333;
}

#LogBook .daySetupForm {
    padding-top: 17px;
    background: #F4F5FA;
    padding-bottom: 40px;
    border-radius: 15px;
}

#LogBook #Cnt_SaveOverrideSetup {
    padding-top: -0;
}

#LogBook #Pnl_SaveOverrideSetup .footer .cmdDefaults {
    padding: 2px;
    text-align: center;
    line-height: 20px;
    color: #f4f4f4;
    font-size: 12px;
    font-weight: bold;
    border-radius: 5px;
    background-color: #985994;
    margin-bottom: 10px;
}

#LogBook .pnlSummaryForm [type="radio"]:checked,
#LogBook .pnlSummaryForm [type="radio"]:not(:checked) {
    position: absolute !important;
    left: -9999px !important;
    top: 0;
}

#LogBook .pnlSummaryForm [type="radio"]:checked + label,
#LogBook .pnlSummaryForm [type="radio"]:not(:checked) + label {
    position: relative;
    padding-left: 28px !important;
    cursor: pointer;
    line-height: 20px !important;
    display: inline-block !important;
    color: #666;
}

#LogBook .pnlSummaryForm [type="radio"]:checked + label:before,
#LogBook .pnlSummaryForm [type="radio"]:not(:checked) + label:before {
    content: '';
    position: absolute;
    left: 0;
    top: 3px;
    width: 15px;
    height: 15px;
    border: 1px solid #207EEB;
    border-radius: 100%;
    background: #fff;
}

#LogBook .pnlSummaryForm [type="radio"]:checked + label:after,
#LogBook .pnlSummaryForm [type="radio"]:not(:checked) + label:after {
    content: '';
    width: 16px;
    height: 16px;
    background: #207EEB;
    position: absolute;
    top: 3px;
    left: 0px;
    border-radius: 100%;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

#LogBook .pnlSummaryForm [type="radio"]:not(:checked) + label:after {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
}

#LogBook .pnlSummaryForm [type="radio"]:checked + label:after {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
}

#LogBook .daySetupForm .target .daysetup .cmdAnother {
    width: 20px;
    height: 20px;
    background-image: url(/images/skin/icon.add.gif);
    text-indent: -9999px;
    position: absolute;
    bottom: 21px;
    right: 175px;
    display: none;
    background-size: contain;
}

#LogBook .daySetupForm .target .daysetup .cmdRemove {
    display: block;
    width: 14px;
    height: 13px;
    background-image: url(/images/skin/icon.cancel2.gif);
    text-indent: -9999px;
    position: absolute;
    bottom: 8px;
    left: auto;
    left: -5px;
    background-position: 2px 1px;
}

#LogBook .daySetupForm .target .daysetup:hover .cmdRemove {
    display: block;
}

#LogBook .daySetupForm .target .daysetup:hover .cmdAnother {
    display: block;
}

#Items_ListEntry.modeDaily .entries .entry.moving {
    display: none;
}

#Mod_Entries.loading .headrow {
    display: none;
}

#Mod_Entries.loading .apptslot {
    display: none;
}

#Mod_Entries.loading .breakslot {
    display: none;
}

.logUnscheduledLoad #Mod_Entries.loading .headrow {
    display: block;
}

.logUnscheduledLoad #Mod_Entries.loading #ApptSlot_888_888 {
    display: block;
}

.logUnscheduledLoad #Mod_Entries.loading .breakslot {
    display: none;
}

#Mod_Entries #Cnt_ListResults[entrycount="0"] #Items_ListEntry.modeAgenda .headrow {
    display: none;
}

.viewPendingSetup #Nav_Main .navItem {
    display: none;
}

body #App_Main .module .isMonthMode {
    display: none;
}

body #App_Main .module .isDayMode {
    display: none;
}

body #App_Main .module .isScheduleMode {
    display: none;
}

body #App_Main .module .schedulemode-on .isScheduleMode {
    display: block;
}

body #App_Main .module .timemode-month .isMonthMode {
    display: block;
}

body #App_Main .module .timemode-day .isDayMode {
    display: block;
}

body #App_Main .module .schedulemode-on #TimeLogger {
    display: none;
}

body #App_Main .module .schedulemode-on #Pnl_SaveLogEntry {
    display: none;
}

#Dv_Log {
    float: left;
    width: 100%;
    padding-right: 15px;
}

.logUnscheduledLoad #Dp_CalendarDate {
    display: none;
}

#LogSearch {
    position: relative;
    top: 10px;
    float: right;
    right: 150px;
    z-index: 3;
}

#LogSearch .textbox {
    margin: 0
}

#LogSearch .textbox input {
    width: 300px;
    min-width: 0px;
    height: 25px;
    border-radius: 15px;
    padding: 5px 12px;
    font-size: 15px
}

#Dv_CreateLoad {
    width: fit-content;
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 0 0 10px 10px
}

#Dv_CreateLoad .cmdCreateLoad {
    width: fit-content;
    padding: 10px;
    background: #000;
    color: #FFF;
    font-weight: bold;
    border-radius: 10px;
    cursor: pointer;
}

#Dv_CreateLoad .cmdCreateLoad:hover {
    background: #666;
}

#LogSearch .textbox .placeholderText {
    font-size: 15px;
    top: 4px;
}

#LogSearch .textbox input:focus + .placeholderText,
#LogSearch .textbox input:not(:placeholder-shown) + .placeholderText {
    opacity: 1;
    font-size: 12px;
    top: -17px;
    left: 12px;
}

#LogSearch .textbox input:focus + .placeholderText,
.#LogSearch .textbox input:not(:-ms-input-placeholder) + .placeholderText {
    opacity: 1;
    font-size: 12px;
    top: -17px;
    left: 12px;
}

#Dp_Calendar .cmdPreviousYear {
    top: auto;
    left: 26px;
}

#Dp_Calendar .cmdNextYear {
    top: auto;
    left: auto;
    right: 28px;
}

#Dp_Calendar .cmdNextMonth {
    top: auto;
    left: auto;
    right: 65px;
}

#Dp_Calendar .cmdPreviousMonth {
    top: auto;
    left: 61px;
}

#LogBook .manageForm .target .textarea {
    width: 100%;
    height: auto;
}

#LogBook .manageForm .target .textarea label {
    width: 100%;
}

#LogBook .manageForm .target .textarea textarea {
    width: 100%;
    height: 30px;
    font-size: 12px;
    line-height: 15px;
    margin-top: 5px;
}

#LogBook .pnlSummaryForm.manageForm {
    padding-bottom: 10px;
}


.viewCarrierEntry #Mod_Content {
    margin-top: 100px
}

.viewCarrierEntry input {
    min-width: 300px;
    background-color: #F4F4F4;
    width: 100%;
    padding: 10px;
}

.viewCarrierEntry .cmdSignIn {
    width: 150px;
    margin: 20px auto;
}

.viewCarrierEntry .cmdSendPassword {
    width: 200px;
    margin: 20px auto;
}

.viewCarrierEntry #Opt_New {
    margin-top: 20px;
}

.viewCarrierEntry #Pv_Info {
    background-color: #FFF;
    width: 700px;
    margin: 0 auto;
}

.viewCarrierEntry #Pv_Info .section {
    margin-bottom: 20px;
    width: 100%;
    background-color: #fff;
    padding: 20px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    float: left;
}

.viewCarrierEntry #Pv_Info .section h3 {
    margin-top: 0;
    font-size: 30px;
}

.viewCarrierEntry #Pv_Info .section .group {
    display: block;
    box-sizing: border-box;
    font-size: 13px;
    line-height: 15px;
    text-align: left;
    width: auto;
    margin: 20px 0;
}

.viewCarrierEntry #Pv_Info .section .group.dropdown select {
    height: 40px;
    border-radius: 0;
    background-color: #F4F4F4;
}

.viewCarrierEntry #Pv_Info .section .group.dropdown .placeholderText {
    opacity: 1;
    font-size: 15px;
    top: -20px;
    left: 0px;
}

.viewCarrierEntry #Pv_Info[data-state="newLoad"] .grpLoadNumber {
    display: none !important;
}

.viewCarrierEntry #Pv_Info[data-state="newLoad"] .grpLink {
    display: none !important;
}

.viewCarrierEntry #Pv_Info[data-state="newLoad"] .grpEmail {
    display: none !important;
}

.viewCarrierEntry #Pv_Info[data-state="newLoad"] #Cmd_ModifyShipperLoad {
    display: none !important;
}

.viewCarrierEntry #Pv_Info[data-state="newLoad"] #Cmd_RemoveShipperLoad {
    display: none !important;
}

.viewCarrierEntry #Pv_Info[data-state="newLoad"] .notice {
    display: none !important;
}

.viewCarrierEntry #Pv_Info[data-state="unscheduled"] #Cmd_CreateShipperLoad {
    display: none !important;
}

.viewCarrierEntry #Pv_Info[data-state="unscheduled"] .notice {
    display: none !important;
}

.viewCarrierEntry #Pv_Info[data-state="scheduled"] #Cmd_ModifyShipperLoad {
    display: none !important;
}

.viewCarrierEntry #Pv_Info[data-state="scheduled"] #Cmd_RemoveShipperLoad {
    display: none !important;
}

.viewCarrierEntry #Pv_Info[data-state="scheduled"] #Cmd_CreateShipperLoad {
    display: none !important;
}

.viewCarrierEntry #Pv_Info .copyLink,
.viewCarrierEntry #Pv_Info .scheudleLink {
    float: left;
    cursor: pointer;
    background: #ccc;
    padding: 5px;
    border-radius: 5px;
    margin-top: 5px;
    font-weight: bold;
    color: #000;
    margin-right: 10px;
}

.viewCarrierEntry #Pv_Info .scheudleLink {
    background: #91dd91;
}

.viewCarrierEntry #Pv_Info .cmdEmailLink {
    float: left;
    cursor: pointer;
    background: #ccc;
    padding: 5px;
    border-radius: 5px;
    margin-top: 5px;
    font-weight: bold;
}

.viewCarrierEntry #Pv_Info .section .group .caption {
    font-weight: bold;
    width: 150px;
    display: inline-block;
}

.viewCarrierEntry #Pv_Info .section .group .data {
    font-weight: normal;
    width: auto;
    display: inline-block;
}

.viewCarrierEntry #Pv_Info .section .group select {
    padding: 2px 5px;
    font-size: 15px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: url("/images/skin/select-icon.png") 96% / 15% no-repeat #FFF;
    background-size: 10px;
    border-radius: 15px;
    border: none;
    width: 100%;
    min-width: 300px;
    border: solid thin #000
}

.viewCarrierEntry #Pv_Info .section .group.trailerType {
    display: none;
}

.viewCarrierEntry #Pv_Info .section .group.paperType {
    display: none;
}

.viewCarrierEntry #Pv_Info .section .group.trailerType #fTrailerType {
    width: 100%;
    padding: 10px 5px;
}

.viewCarrierEntry #Pv_Info .section[data-loadType="Recycling"] .group.trailerType {
    display: block;
}

.viewCarrierEntry #Pv_Info .section[data-loadType="Recycling"] .group.paperType {
    display: block;
}

.viewCarrierEntry #Pv_Info .section .group .data.interactive-placeholder {
    width: 100%
}

.viewCarrierEntry #Pv_Info .section .group .data label {
    display: inline;
}

.viewCarrierEntry #Pv_Info .section p {
    display: block;
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    float: left;
    font-size: 13px;
    line-height: 16px;
}

.viewCarrierEntry #Pv_Info .hud {
    color: #F00
}

.viewCarrierEntry #Pv_Info .section #P_NoSlots {
    color: #990000;
    font-size: 14px;
    line-height: 20px;
}

.viewCarrierEntry #Pv_Info .section .instructions {
    font-size: 16px;
    line-height: 20px;
    font-weight: normal;
    display: block;
}

.viewCarrierEntry #Pv_Info .section .table,
.viewCarrierEntry #Pv_Info .section .form {
    margin-bottom: 20px;
    float: left;
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    font-size: 13px;
    line-height: 15px;
}

.viewCarrierEntry #Pv_Info .section .table input {
    width: 50px;
}

.viewCarrierEntry #Pv_Info .section .table {
    width: auto;
}

.viewCarrierEntry #Pv_Info .section .table .tr {
    margin-bottom: 10px;
}

.viewCarrierEntry #Pv_Info .section .table .th {
    font-weight: bold;
}

.viewCarrierEntry #Pv_Info .section .table .th,
.viewCarrierEntry #Pv_Info .section .table .td {
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 10px;
    margin-bottom: 5px;
}

.viewCarrierEntry #Pv_Info #Mod_SingleScheduler {
}

.viewCarrierEntry #Items_SingleScheduler {
    display: none;
}

.viewCarrierEntry #Pv_Info .deliverySection {
    position: relative;
    top: 0;
    left: 0;
}

.viewCarrierEntry .deliverySection #Steps_SingleScheduler {
    margin-top: 40px;
}

.viewCarrierEntry #Steps_SingleScheduler,
.viewCarrierEntry .commands,
.viewCarrierEntry .command {
    display: block;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.viewCarrierEntry #Cmd_SingleNewLoad {
    width: 100%;
    height: 50px;
    line-height: 50px;
    font-size: 18px;
    float: left;
    clear: both;
    background-color: #000;
    color: #fff;
    margin-bottom: 20px;
    text-align: center;
    text-transform: uppercase;
    font-weight: bold;
}

.viewCarrierEntry #Cmd_CreateShipperLoad,
.viewCarrierEntry #Cmd_ModifyShipperLoad,
.viewCarrierEntry #Cmd_RemoveShipperLoad {
    width: 100%;
    height: 50px;
    line-height: 50px;
    font-size: 18px;
    float: left;
    clear: both;
    background-color: #000;
    color: #fff;
    margin-bottom: 20px;
    text-align: center;
    text-transform: uppercase;
    font-weight: bold;
}

.viewCarrierEntry #Cmd_ModifyShipperLoad.disabled {
    border: 1px solid #999999;
    background-color: #cccccc;
    color: #666666;
    cursor: not-allowed;
}

.viewCarrierEntry #Cmd_RemoveShipperLoad {
    background-color: #990000;
}

.locked-value {
    display: inline-block;
    padding: 6px 10px;
    font-weight: 600;
    color: #374151;
}

.viewCarrierEntry #Pv_Info[data-state="locate"] #Cmd_SingleNewLoad {
    display: none;
}

.viewCarrierEntry .notice {
    width: 100%;
    font-size: 14px;
    padding: 10px;
    float: left;
    clear: both;
    background-color: #cccc00;
    color: #000;
    margin-bottom: 20px;
    text-align: center;
    text-transform: uppercase;
    font-weight: bold;
}

.viewCarrierEntry .group .tip {
    color: #666;
    display: block;
    margin-left: 150px;
    margin-top: 5px;
}

.viewCarrierEntry #Pv_Info[data-state="newLoad"] .group .tip {
    display: none;
}

.viewCarrierEntry #Pv_Info[state="new"] #Cmd_SingleNewLoad {
    display: none;
}

.viewCarrierEntry #Pv_Info[data-state="locate"] #Cmd_CreateShipperLoad {
    display: none;
}

.viewCarrierEntry #Pv_Info[state="new"] #Cmd_CreateShipperLoad {
    display: none;
}

.viewCarrierEntry #Steps_SingleScheduler {
    float: left;
    clear: both;
    width: 100%;
}

.viewCarrierEntry .commands {
    text-align: center;
    margin: 20px auto;
    width: auto;
}

.viewCarrierEntry .deliverySection[state="edit"] .loadCommands {
    display: none;
}

.viewCarrierEntry #Steps_SingleScheduler .cmdCancel {
    float: right;
    text-decoration: underline;
    font-size: 13px;
    line-height: 50px;
    color: #555;
    margin-right: 20px;
}

.viewCarrierEntry #Steps_SingleScheduler .cmdSave {
    float: right;
    background-color: #000;
    color: #fff;
    margin-bottom: 0px;
    text-align: center;
    text-transform: uppercase;
    font-weight: bold;
    height: 50px;
    line-height: 50px;
    font-size: 18px;
    padding-left: 20px;
    padding-right: 20px;
}

.viewCarrierEntry #Steps_SingleScheduler[form-ready="no"] .cmdSave {
    background-color: #999;
    cursor: pointer;
}

.viewCarrierEntry .deliverySection .cmdCancelLoad {
    float: right;
    text-decoration: underline;
    font-size: 13px;
    line-height: 50px;
    color: #555;
    margin-right: 20px;
}

.viewCarrierEntry .deliverySection .cmdModifyLoad {
    float: right;
    background-color: #0188CC;
    color: #fff;
    margin-bottom: 0px;
    text-align: center;
    text-transform: uppercase;
    font-weight: bold;
    height: 50px;
    line-height: 50px;
    font-size: 18px;
    padding-left: 20px;
    padding-right: 20px;
}

.viewCarrierEntry .invalidate .invalid {
    border: 1px solid #cc0000;
    float: left;
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 10px;
    margin-bottom: 20px;
}

.viewCarrierEntry #Nav_Main {
    display: none;
}

.viewCarrierEntry.viewShipperEntry #Nav_Main {
    display: block;
}

.viewCarrierEntry.viewShipperUser #Nav_Main,
.viewCarrierEntry.viewCarrierUser #Nav_Main {
    display: block;
}

.viewCarrierEntry #Pv_Info[data-state="locate"] .section {
    display: none;
}

.viewCarrierEntry #Pv_Info[data-state="locate"] #Mod_InvalidPo,
.viewCarrierEntry #Pv_Info[data-state="locate"] #Dv_FindSinglePo,
.viewCarrierEntry #Pv_Info[data-state="locate"] #Dv_CreatePo {
    display: block;
}

.viewCarrierEntry #Pv_Info[init-state="locate"] #Dv_FindSinglePo .cmdCancel {
    display: none;
}

.viewCarrierEntry #Pv_Info .cmdCancel {
    text-decoration: none;
    font-size: 15px;
    color: #207EEB;
    margin-right: 20px;
    display: inline-block;
    vertical-align: middle;
}

.viewCarrierEntry #Pv_Info .cmdFind {
    width: auto;
    display: inline-block;
    font-size: 20px;
    padding: 15px 30px;
}

.viewCarrierEntry .actions {
    /*! clear: both;
*/
    /*! float: left;
*/
    /*! width: 100%;
*/
    margin-bottom: 5px;
}

.viewCarrierEntry .actions #Cmd_ChangeSinglePo {
    float: right;
    padding: 10px;
    text-align: center;
    color: #fff;
    text-decoration: underline;
    font-size: 13px;
    line-height: 16px;
}

.viewCarrierEntry .actions #Cmd_Cancel {
    float: right;
    padding: 10px;
    text-align: center;
    color: #fff;
    text-decoration: underline;
    font-size: 13px;
    line-height: 16px;
}

.viewCarrierEntry #Pv_Info[data-state="locate"] .actions {
    display: none;
}

#Hdr_MyAccount {
    display: none;
}

#Cnt_MyAccount {
    background: #FFF;
    padding: 10px;
    overflow: hidden;
    border-radius: 20px;
    margin-top: 40px
}

#Cnt_MyAccount h2 {
    font-size: 25px;
    text-transform: uppercase
}

#Cnt_MyAccount #Cnt_Manage .subcaption {
    border-bottom: solid 1px #000;
    padding-block: 20px;
    margin-bottom: 0
}

#Cnt_MyAccount #Act_User .command a {
    color: #000
}

#Cnt_MyAccount .commandBar {
    float: left;
    padding: 20px 20px 0 0
}

#Cnt_MyAccount .commandBar .command {
    margin-bottom: 20px;
}

#Cnt_MyAccount #Mod_AccountOptions {
    float: left;
    border-left: solid 1px #000;
}

#Cnt_MyAccount input {
    background-color: #f4f4f5;
}

#Cnt_MyAccount .placeholderText {
    font-size: 15px
}

#Pnl_SaveDaySetup .footer {
    float: right;
    position: absolute;
    bottom: 10px;
    right: 10px;
}

#Pnl_SaveOverrideSetup .footer {
    float: right;
    position: absolute;
    bottom: 10px;
    right: 10px;
}

#CmdExportLoads {
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    padding-top: 4px;
    position: absolute;
    left: auto;
    right: 30px;
    top: 10px;
}

#CmdExportLoads .export {
    color: #207EEB;
    margin-left: 10px;
    cursor: pointer;
    float: right;
}

.exportOptions {
    display: none;
    background: #FFF;
    padding: 10px 30px;
    border: solid 1px #000;
    border-radius: 5px;
    box-shadow: 5px 5px 5px #888;
    width: 100%;
    margin-top: 25px;
    z-index: 20;
    position: relative;
}

.exportOptions .instructions {
    font-size: 10px;
    width: 300px;
    margin-bottom: 10px;
    margin-top: 20px
}

.exportOptions .close {
    position: absolute;
    right: 10px;
    top: 10px;
    cursor: pointer
}

.exportOptions .options {
    display: flex;
    width: 100%;
    justify-content: space-between
}

.exportOptions.active {
    display: block;
}

.exportOptions .openExport {
    cursor: pointer;
}

/* =========================MODERN CARD LAYOUT STYLES========================= */
/* Calendar and filter groups */
/* Items list - remove table-like behavior */
.cardLayout #Items_ListEntry {
    width: 100%;
    display: block;
}

/* Hide the old header row */
.cardLayout #Items_ListEntry .headrow {
    display: none;
}

/* Individual entry cards */
.cardLayout .entry {
    width: 100%;
    float: none;
    display: block;
    margin-bottom: 6px;
    background: transparent;
    border: none;
    box-shadow: none;
    border-radius: 8px;
    transition: all 0.3s ease;
    position: relative;
}

.cardLayout .entry:last-child {
    margin-bottom: 0;
}

/* Summary section - card layout */
.cardLayout .entry .summary {
    width: 100% !important;
    padding: 12px 14px !important;
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px 14px;
    background: #fff !important;
    border: 1px solid rgba(15, 23, 42, 0.12) !important;
    border-left: 4px solid #667eea !important;
    border-radius: 10px;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.06);
    position: relative;
    margin-right: 12px;
    margin-top: 5px;
    margin-bottom: 0 !important;
}

/* Hover effect on the summary */
.cardLayout .entry:hover .summary {
    border-color: rgba(102, 126, 234, 0.45) !important;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.12);
}

/* Hide the bullet point */
.cardLayout .entry:before {
    display: none !important;
}

/* Status-based border colors on the summary */
.cardLayout .entry[status="OnTime"] .summary {
    border-left-color: #207EEB !important;
}

.cardLayout .entry[status="Early"] .summary {
    border-left-color: #85B90F !important;
}

.cardLayout .entry[status="Late"] .summary {
    border-left-color: #8229B1 !important;
}

.cardLayout .entry[status="NoShow"] .summary {
    border-left-color: #BDC1E0 !important;
}

.cardLayout .entry[status="Delivered"] .summary {
    border-left-color: #11C9C7 !important;
}

.cardLayout .entry[status="NotScheduled"] .summary {
    border-left-color: #EBA73F !important;
}

/* All columns become flexible grid items */
.cardLayout .entry .col {
    float: none !important;
    width: auto !important;
    padding: 0 !important;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Add labels before each field */
.cardLayout .entry .col:before {
    content: '';
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #6b7280;
    opacity: 0.8;
    line-height: 1;
    margin-bottom: 1px;
}

/* Add labels before each field */
.cardLayout .entry .col.commands:before {
    width: 20px;
}

.cardLayout .entry .col.load:before {
    content: "Load #";
}

.cardLayout .entry .col.order:before {
    content: "Order #";
}

.cardLayout .entry .col.shipper:before {
    content: "Shipper";
}

.cardLayout .entry .col.carrier:before {
    content: "Carrier";
}

.cardLayout .entry .col.paperType:before {
    content: "Paper Type";
}

.cardLayout .entry .col.consignee:before {
    content: "Consignee";
}

.cardLayout .entry .col.pickupStatus:before {
    content: "Pickup";
    display: block !important;
}

.cardLayout .entry .col.deliveryStatus:before {
    content: "Delivery";
    display: block !important;
}

/* Field values */
.cardLayout .entry .col {
    font-size: 14px !important;
    line-height: 1.25 !important;
    color: #1f2937 !important;
    font-weight: 500;
}

/* Make load and order numbers prominent */
.cardLayout .entry .col.load,
.cardLayout .entry .col.order {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #667eea !important;
}

/* Status badges */
.cardLayout .entry .col.status {
    padding: 5px 10px !important;
    border-radius: 6px;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-align: center;
    width: fit-content !important;
    white-space: nowrap;
}

/* Only hide labels for the generic status column, not pickup/delivery */
.cardLayout .entry .col.status:not(.pickupStatus):not(.deliveryStatus):before {
    display: none !important;
}

/* Status colors */
.cardLayout .entry .col.status0 {
    background: #FEF3C7;
    color: #92400E;
}

.cardLayout .entry .col.status20 {
    background: #DBEAFE;
    color: #1E40AF;
}

.cardLayout .entry .col.status100 {
    background: #e5f6df;
    color: #1E40AF;
}

/* Hide datetime in summary (it's in the slot header) */
.cardLayout .entry .col.datetime {
    display: none !important;
}

/* Commands positioning */
.cardLayout .entry .col.commands {
    position: absolute !important;
    top: 10px;
    right: 10px;
    /* The cell is empty, so width:auto collapsed it to 0 and the chevron
       background never painted. Needs the same 25px the table view uses. */
    width: 25px !important;
}

.cardLayout .entry .summary .commands {
    width: 24px;
    height: 24px;
    background: #f3f4f6;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
}

.cardLayout .entry .summary .commands:hover {
    background: #667eea;
}

.cardLayout .entry .summary .commands:hover + .commandContainer {
    display: block !important;
}

.cardLayout .entry .summary .commandContainer {
    display: none !important;
    position: absolute;
    top: 50px;
    right: 16px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    padding: 8px 0;
    z-index: 100;
}

.cardLayout .entry .summary .commandContainer:hover {
    display: block !important;
}

.cardLayout .entry .summary .commandContainer .command {
    /* No extra padding or min-width on the panel: with seven commands that
       made each row 38px and the menu 336px tall, which overflowed the card
       and covered the rows underneath. Match the table view instead. */
    cursor: pointer;
    transition: background 0.2s;
}

.cardLayout .entry .summary .commandContainer .command:hover {
    background: #f3f4f6;
    color: #667eea !important;
}

/* Detail section */
.cardLayout .rowdetail {
    background: #f9fafb !important;
    padding: 12px 14px !important;
    margin-top: 0 !important;
    border-radius: 0 0 8px 8px;
}

.cardLayout .rowdetail.expanded {
    display: block !important;
}

.cardLayout .rowdetail .components {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 8px 12px;
    margin-bottom: 12px;
}

.cardLayout .rowdetail .component {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cardLayout .rowdetail .component .name {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    color: #6b7280;
    letter-spacing: 0.5px;
}

.cardLayout .rowdetail .component .when {
    font-size: 14px;
    font-weight: 500;
    color: #1f2937;
}

/* Access detail */
.cardLayout .accessdetail {
    background: #eff6ff !important;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    padding: 12px 14px !important;
    margin-top: 10px !important;
}

.cardLayout .accessdetail input {
    width: 100% !important;
    max-width: 400px;
    padding: 8px 12px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 13px;
}

.cardLayout .accessdetail .cmdCopy {
    margin-left: 12px;
    padding: 8px 16px;
    background: #667eea !important;
    color: white !important;
    border-radius: 6px;
    font-size: 13px;
}

/* Improved visual hierarchy for key fields */
.cardLayout .entry .summary {
    grid-template-areas:
        "load order commands"
        "shipper carrier paperType"
        "consignee pickup delivery";
}

.cardLayout .entry .col.load {
    grid-area: load;
}

.cardLayout .entry .col.order {
    grid-area: order;
}

.cardLayout .entry .col.commands {
    grid-area: commands;
}

.cardLayout .entry .col.shipper {
    grid-area: shipper;
}

.cardLayout .entry .col.carrier {
    grid-area: carrier;
}

.cardLayout .entry .col.paperType {
    grid-area: paperType;
}

.cardLayout .entry .col.consignee {
    grid-area: consignee;
}

.cardLayout .entry .col.pickupStatus {
    grid-area: pickup;
}

.cardLayout .entry .col.deliveryStatus {
    grid-area: delivery;
}

/* Handle status */
.cardLayout .entry .handle {
    display: none !important;
}

/* Keep the handle clickable by keeping it INSIDE the card */
.cardLayout .mWrite #Items_ListEntry .entry {
    overflow: visible !important;
}

/* Give room for the handle so it does not overlap your first column */
.cardLayout .mWrite #Items_ListEntry .entry .summary {
    padding-left: 44px !important;
}

/* Place handle inside the card instead of left:-30px */
.cardLayout .mWrite #Items_ListEntry .entry .summary .handle {
    display: block !important;
    position: absolute !important;
    left: 10px;
    top: 10px;
    width: 24px;
    height: 24px;
    background-image: url(/images/skin/icon.move.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 14px 14px;
    background-color: #f3f4f6;
    border: 1px solid rgba(0, 0, 0, 0.10);
    border-radius: 6px;
    cursor: move;
    z-index: 20;
}

/* Optional: only show handle when hovering the card (still clickable) */
.cardLayout .mWrite #Items_ListEntry .entry .summary .handle {
    opacity: 0;
    pointer-events: none;
}

.cardLayout .mWrite #Items_ListEntry .entry:hover .summary .handle,
.cardLayout .mWrite #Items_ListEntry .entry.active .summary .handle {
    opacity: 1;
    pointer-events: auto;
}

/* Right-side breathing room for cards */
.cardLayout .entry .summary {
    margin-right: 12px;
}

/* Entry padding */
.cardLayout #Items_ListEntry .entries .entry {
    padding: 0 20px;
}

/* cmdNew - align left under the time header */
.cardLayout .apptslot {
    position: relative !important;
}

.cardLayout .apptslot .cmdNew:hover {
    transform: translateX(0) translateY(-2px);
    box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4);
}

/* Responsive adjustments */
@media (max-width: 1024px) {
    .cardLayout .entry .summary {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
    }
}

@media (max-width: 768px) {
    .cardLayout #LogBook {
        padding: 12px !important;
    }

    .cardLayout .entry .summary {
        grid-template-columns: 1fr !important;
        padding: 16px !important;
        margin-right: 6px !important;
        grid-template-areas:
            "load"
            "order"
            "shipper"
            "carrier"
            "consignee"
            "pickup"
            "delivery"
            "commands" !important;
    }

    .cardLayout .entry .col.commands {
        position: static !important;
        margin-top: 12px;
    }

    .cardLayout .apptslot .slotdatetime {
        position: relative !important;
    }

    .cardLayout .rowdetail .components {
        grid-template-columns: 1fr !important;
    }

    .cardLayout .apptslot .cmdNew {
        left: 10px !important;
    }
}

/* Empty states */
.cardLayout .apptslot[schedulecount="0"] .entries {
    padding: 24px;
    text-align: center;
    color: #9ca3af;
    font-style: italic;
}

.cardLayout #Calendar #NewEntry {
    display: none;
}


/* Modern Segmented Control Styling for View Toggles */

/* Container for Agenda/Day toggle */
#NestingCell .nestings {
    display: inline-flex;
    background: #fff;
    border: 2px solid #207EEB;
    border-radius: 8px;
    padding: 2px;
    gap: 2px;
    margin: 0;
    float: left;
    height: auto;
    margin-right: 10px;
    margin-bottom: 0px;
}

#NestingCell .nestings .nesting {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 0;
    padding: 6px 14px;
    width: auto;
    float: none;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    margin-bottom: 0px;
    margin-left: 0;
    background: transparent;
    color: #207EEB;
    border-radius: 6px;
    transition: all 0.2s ease;
    position: relative;
}

#NestingCell .nestings .nesting:hover {
    background: rgba(32, 126, 235, 0.05);
}

#NestingCell .nestings .nesting.selected {
    background: #207EEB;
    color: #fff;
    font-weight: 600;
}

/* Icons for Agenda/Day using pseudo-elements */
#NestingCell .nestings .nesting:before {
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin: 0;
    position: static;
    top: auto;
}

/* Agenda icon - calendar/list view */
#Nest_Agenda:before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23207EEB'%3E%3Cpath d='M19 3h-1V1h-2v2H8V1H6v2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V9h14v10zM7 11h2v2H7v-2zm4 0h2v2h-2v-2zm4 0h2v2h-2v-2z'/%3E%3C/svg%3E");
}

#Nest_Agenda.selected:before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M19 3h-1V1h-2v2H8V1H6v2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V9h14v10zM7 11h2v2H7v-2zm4 0h2v2h-2v-2zm4 0h2v2h-2v-2z'/%3E%3C/svg%3E");
}

/* Day icon - single day view */
#Nest_Day:before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23207EEB'%3E%3Cpath d='M19 3h-1V1h-2v2H8V1H6v2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V9h14v10z'/%3E%3Cpath d='M9 11h6v6H9z'/%3E%3C/svg%3E");
}

#Nest_Day.selected:before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M19 3h-1V1h-2v2H8V1H6v2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H5V9h14v10z'/%3E%3Cpath d='M9 11h6v6H9z'/%3E%3C/svg%3E");
}

/* Container for Normal/Compact toggle */
#ViewModeToggle {
    display: inline-flex;
    background: #fff;
    border: 2px solid #207EEB;
    border-radius: 8px;
    padding: 2px;
    gap: 2px;
    margin-right: 10px;
}

#ViewModeToggle .viewMode {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 14px;
    background: transparent;
    color: #207EEB;
    border: none;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    margin: 0;
}

#ViewModeToggle .viewMode:hover {
    background: rgba(32, 126, 235, 0.05);
}

#ViewModeToggle .viewMode.active {
    background: #207EEB;
    color: #fff;
    font-weight: 600;
}

/* Icons for Normal/Compact using pseudo-elements */
#ViewModeToggle .viewMode:before {
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin: 0;
    position: static;
    top: auto;
}

/* Normal view icon - card/grid layout */
#Cmd_NormalView:before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23207EEB'%3E%3Cpath d='M4 4h7v7H4V4zm9 0h7v7h-7V4zM4 13h7v7H4v-7zm9 0h7v7h-7v-7z'/%3E%3C/svg%3E");
}

#Cmd_NormalView.active:before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M4 4h7v7H4V4zm9 0h7v7h-7V4zM4 13h7v7H4v-7zm9 0h7v7h-7v-7z'/%3E%3C/svg%3E");
}

/* Compact view icon - list/rows layout */
#Cmd_CompactView:before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23207EEB'%3E%3Cpath d='M3 4h18v2H3V4zm0 7h18v2H3v-2zm0 7h18v2H3v-2z'/%3E%3C/svg%3E");
}

#Cmd_CompactView.active:before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M3 4h18v2H3V4zm0 7h18v2H3v-2zm0 7h18v2H3v-2z'/%3E%3C/svg%3E");
}

/* Legacy single toggle button - keep for backwards compatibility */
#Cmd_ToggleCompact {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
    position: relative;
    overflow: hidden;
}

#Cmd_ToggleCompact:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

#Cmd_ToggleCompact:active {
    transform: translateY(0);
}

#Cmd_ToggleCompact:before {
    content: "";
    display: inline-block;
    width: 18px;
    height: 18px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

body.cardLayout #Cmd_ToggleCompact:before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M3 4h18v2H3V4zm0 7h18v2H3v-2zm0 7h18v2H3v-2z'/%3E%3C/svg%3E");
}

body.compact #Cmd_ToggleCompact:before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M4 4h7v7H4V4zm9 0h7v7h-7V4zM4 13h7v7H4v-7zm9 0h7v7h-7v-7z'/%3E%3C/svg%3E");
}

body.compact #Cmd_ToggleCompact {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    box-shadow: 0 2px 8px rgba(245, 87, 108, 0.3);
}

body.compact #Cmd_ToggleCompact:hover {
    box-shadow: 0 4px 12px rgba(245, 87, 108, 0.4);
}

#Cmd_ToggleCompact:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

#Cmd_ToggleCompact:active:after {
    width: 200px;
    height: 200px;
}

.col.paperType {
    display: none;
}

.cardLayout .col.paperType {
    display: flex;
}

/* User List Paging */
#Pnl_UserPaging {
    float: left;
    width: 100%;
    margin-top: 15px;
    text-align: center;
}

#Cmd_NextUsers {
    display: inline-block;
    width: 100%;
    max-width: 300px;
    height: 35px;
    text-align: center;
    line-height: 35px;
    color: #FFF;
    font-size: 16px;
    font-weight: bold;
    padding: 0;
    margin: 10px auto;
    background-color: #00bbe8;
    border: 1px solid #1356A6;
    border-radius: 3px;
    cursor: pointer;
}

#Cmd_NextUsers:hover {
    background-color: #0095b8;
}

.userCountDisplay {
    display: block;
    color: #666;
    font-size: 13px;
    padding: 8px 0;
    text-align: right;
}

#Pgr_UserCount {
    display: block;
    color: #666;
    font-size: 13px;
    margin-top: 10px;
}

/* External users (ShipperUser/CarrierUser): hide drag handle on calendar entries */
.viewShipperUser .entry .handle,
.viewCarrierUser .entry .handle { display: none; }


/* ==========================================================================
   CONFIRM MODAL — replaces browser confirm() dialogs
   ========================================================================== */

#Overlay_Confirm {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: confirmFadeIn .2s ease forwards;
}
@keyframes confirmFadeIn {
    to { background: rgba(0, 0, 0, 0.4); }
}

.confirm-modal {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.15), 0 4px 12px rgba(0,0,0,0.08);
    width: 100%;
    max-width: 460px;
    overflow: hidden;
    transform: scale(0.95) translateY(8px);
    opacity: 0;
    animation: confirmSlideIn .2s ease forwards;
}
@keyframes confirmSlideIn {
    to { transform: scale(1) translateY(0); opacity: 1; }
}

.confirm-header {
    padding: 20px 24px 0 24px;
}
.confirm-header h3 {
    font-size: 18px;
    font-weight: 600;
    color: #1A202C;
    margin: 0;
}

.confirm-body {
    padding: 16px 24px;
    font-size: 14px;
    color: #475569;
    line-height: 1.6;
}

.confirm-warning {
    background: #FEF3C7;
    border: 1px solid #FCD34D;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 13px;
    color: #92400E;
    line-height: 1.5;
    margin-top: 12px;
}

.confirm-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 24px 20px 24px;
}

.confirm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 500;
    border-radius: 8px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background .15s, border-color .15s;
    user-select: none;
}

.confirm-btn-cancel {
    background: #fff;
    color: #475569;
    border-color: #D1D5DB;
}
.confirm-btn-cancel:hover {
    background: #F9FAFB;
    border-color: #9CA3AF;
}

.confirm-btn-primary {
    background: #4C6EF5;
    color: #fff;
    border-color: #4C6EF5;
}
.confirm-btn-primary:hover {
    background: #4059D9;
    border-color: #4059D9;
}

.confirm-btn-danger {
    background: #fff;
    color: #DC2626;
    border-color: #FCA5A5;
}
.confirm-btn-danger:hover {
    background: #FEF2F2;
    border-color: #F87171;
}

/* ==========================================================================
   CHOSEN DROPDOWNS
   Chosen hides the original select and renders its own markup, so the app's
   select styling has to be restated here. Two languages: the CMS form control
   (border, 8px radius) and the nav pill inside #PlantLogger (white on blue,
   15px radius). Both square off the corners where the panel meets the control
   so the open state reads as one card.
   ========================================================================== */

.chosen-container {
    font-size: 14px;
    font-family: inherit;
    vertical-align: top;
}

.chosen-container-single .chosen-single {
    height: auto;
    font-weight: normal;
    padding: 9px 34px 9px 14px;
    border: 1px solid #D1D5DB;
    border-radius: 8px;
    background: #fff;
    box-shadow: none;
    color: #334155;
    line-height: 20px;
}

.chosen-container-active .chosen-single {
    border-color: #4C6EF5;
    box-shadow: 0 0 0 3px rgba(76, 110, 245, 0.1);
}

.chosen-container-active.chosen-with-drop .chosen-single {
    border-radius: 8px 8px 0 0;
    background: #fff;
    box-shadow: none;
}

.chosen-container-single .chosen-single span {
    margin-right: 0;
}

/* Reuse the chevron the native selects use, so a closed Chosen box is
   indistinguishable from every other dropdown in the app. */
.chosen-container-single .chosen-single div {
    width: 34px;
    height: 100%;
}

.chosen-container-single .chosen-single div b {
    background: url("/images/skin/select-icon.png") no-repeat center;
    background-size: 10px;
}

.chosen-container-active.chosen-with-drop .chosen-single div b {
    background-position: center;
}

.chosen-container .chosen-drop {
    min-width: 340px;
    border: 1px solid #4C6EF5;
    border-top: 0;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 10px 24px rgba(17, 24, 39, 0.18);
    overflow: hidden;
}

.chosen-container-single .chosen-search {
    padding: 10px;
}

.chosen-container-single .chosen-search input[type="text"] {
    padding: 8px 28px 8px 12px;
    border: 1px solid #D1D5DB;
    border-radius: 8px;
    background-position: right 10px center;
    font-family: inherit;
    font-size: 14px;
    color: #334155;
}

.chosen-container-single .chosen-search input[type="text"]:focus {
    border-color: #4C6EF5;
    box-shadow: 0 0 0 3px rgba(76, 110, 245, 0.1);
}

.chosen-container .chosen-results {
    margin: 0;
    padding: 0 0 6px;
    max-height: 320px;
    color: #334155;
}

.chosen-container .chosen-results li {
    padding: 9px 14px;
    line-height: 18px;
}

.chosen-container .chosen-results li.highlighted {
    background: #207EEB;
    background-image: none;
    color: #fff;
}

.chosen-container .chosen-results li.no-results {
    background: #fff;
    color: #6B7280;
}

/* Appointment form: these three pickers sit beside native selects that carry no
   styling at all (#LogBook .manageForm .target .group select), so the CMS form
   metrics above render them noticeably chunkier than their neighbours. Restate
   the browser-default select geometry here only - the CMS screens style their
   own selects to match the 9px/14px rules and must keep them. */
.apptForm .target .group .chosen-container {
    font-size: 13px;
}

.apptForm .target .group .chosen-container-single .chosen-single {
    padding: 2px 30px 2px 6px;
    line-height: 18px;
}

.apptForm .target .group .chosen-container-single .chosen-single div {
    width: 30px;
}

.apptForm .target .group .chosen-container-single .chosen-search {
    padding: 6px;
}

.apptForm .target .group .chosen-container-single .chosen-search input[type="text"] {
    padding: 4px 24px 4px 8px;
    font-size: 13px;
}

.apptForm .target .group .chosen-container .chosen-results li {
    padding: 2px 6px;
    font-size: 13px;
    line-height: 16px;
}

/* Chosen stamps an inline width on its container, taken from the select's
   offsetWidth. This form is hidden when the widget initialises, so that reads 0
   and behavior/application.js falls through to its '100%' fallback - and 100% of
   an auto-width group shrink-wraps to whatever text happens to be selected, which
   is why the two pickers never agree. Give the groups the field width and the
   inline 100% resolves to it. The text inputs are pinned to the same number so
   the row lines up regardless of the browser's default input width. */
#LogBook .apptForm .target .group.shipper,
#LogBook .apptForm .target .group.carrier,
#LogBook .apptForm .target .group.consignee,
#LogBook .apptForm .target .group.loadNumber,
#LogBook .apptForm .target .group.orderNumber {
    width: 180px;
}

#LogBook .apptForm .target .group.loadNumber input,
#LogBook .apptForm .target .group.orderNumber input {
    width: 180px;
    box-sizing: border-box;
}

/* The text inputs carry margin-top: 5px on top of the label's 5px bottom margin;
   the Chosen container inherited neither, so it sat tight against its label. */
.apptForm .target .group .chosen-container {
    margin-top: 5px;
}

/* Nav pill: the plant/carrier selector floating on the blue band. Geometry
   mirrors the #PlantLogger select rules above it. */
#PlantLogger .chosen-container {
    width: 350px;
    position: relative;
    z-index: 2;
    float: right;
    margin: 11px 60px;
    font-size: 15px;
}

/* Needs its own rule: #PlantLogger .chosen-container sets z-index 2 above, and
   that id beats the shared .chosen-with-drop lift on specificity. */
#PlantLogger .chosen-container.chosen-with-drop {
    z-index: 500;
}

#PlantLogger #fCarrier_chosen {
    margin-right: 150px;
}

#PlantLogger .chosen-container-single .chosen-single {
    padding: 2px 30px 2px 12px;
    height: 28px;
    line-height: 24px;
    border: none;
    border-radius: 15px;
    box-shadow: none;
    color: #111827;
    font-size: 15px;
}

#PlantLogger .chosen-container-active .chosen-single {
    border: none;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.45);
}

#PlantLogger .chosen-container-active.chosen-with-drop .chosen-single {
    border-radius: 15px 15px 0 0;
    box-shadow: none;
}

#PlantLogger .chosen-container-single .chosen-single div {
    width: 30px;
}

#PlantLogger .chosen-container .chosen-drop {
    border: none;
    border-radius: 0 0 15px 15px;
    box-shadow: 0 10px 24px rgba(17, 24, 39, 0.3);
}

/* Panel geometry matches the appointment-form pickers - the shared 9px/14px rows
   above only fit eight plants before scrolling, and schedulers pick from this
   list all day. One step up in font size from the 13px used there, because this
   control carries the plant name and its street address on one line. */
#PlantLogger .chosen-container-single .chosen-search {
    padding: 6px;
}

#PlantLogger .chosen-container-single .chosen-search input[type="text"] {
    padding: 5px 24px 5px 8px;
    font-size: 14px;
}

#PlantLogger .chosen-container .chosen-results li {
    padding: 3px 8px;
    font-size: 14px;
    line-height: 18px;
}

/* Plant entries are "Name - street address" and were wrapping to two lines inside
   the 350px pill. Let the panel size to its widest entry instead: nowrap rows plus
   a shrink-to-fit drop. It is anchored to the pill's right edge so the extra width
   grows inward across the page rather than off the right of the window, and the
   max-width keeps a stray long address from spanning the whole screen. */
#PlantLogger .chosen-container .chosen-drop {
    width: auto;
    min-width: 100%;
    max-width: 640px;
}

#PlantLogger .chosen-container.chosen-with-drop .chosen-drop {
    left: auto;
    right: 0;
}

#PlantLogger .chosen-container .chosen-results li {
    white-space: nowrap;
}

/* Taller than the shared 320px: the pill sits at the top of the page, so the panel
   has the room, and 22px rows put roughly twenty plants in view before scrolling. */
#PlantLogger .chosen-container .chosen-results {
    max-height: 480px;
}


/* ---------------------------------------------------------------------------
   Public landing page (Default.aspx, anonymous visitors only).
   Rides on .auth-page for the shared shell (background, font) and adds the
   marketing-only layout below. Tokens match the auth screens: #005BA0 primary,
   #111827 headings, #4B5563 body copy.
   --------------------------------------------------------------------------- */
.home-page { }
.home-page.auth-page { min-height: 100vh; }

.home-header { justify-content: space-between; }
.home-header-actions { display: flex; align-items: center; gap: 20px; }
.home-nav-link {
    font-family: 'Work Sans', sans-serif; font-size: 16px; font-weight: 400;
    color: #005BA0; text-decoration: none;
}
.home-nav-link:hover { text-decoration: underline; }
.home-nav-btn {
    display: inline-flex; align-items: center; justify-content: center;
    background: #005BA0; color: #fff; border-radius: 4px; height: 41px;
    padding: 0 20px; font-family: 'Work Sans', sans-serif; font-size: 16px;
    font-weight: 400; text-decoration: none; transition: background 0.15s ease;
}
.home-nav-btn:hover { background: #004A85; color: #fff; }

/* Hero */
.home-hero {
    display: flex; align-items: center; justify-content: center; gap: 60px;
    padding: 64px 40px; max-width: 1240px; margin: 0 auto;
}
.home-hero-copy { flex: 1; max-width: 560px; }
.home-hero-title {
    font-family: 'Work Sans', sans-serif; font-weight: 600; font-size: 40px;
    line-height: 1.2; color: #111827; margin: 0 0 16px;
}
.home-hero-subtitle {
    font-family: 'Work Sans', sans-serif; font-weight: 400; font-size: 18px;
    line-height: 1.55; color: #4B5563; margin: 0 0 28px;
}
.home-hero-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.home-btn-primary,
.home-btn-secondary {
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 4px; height: 45px; padding: 0 28px;
    font-family: 'Work Sans', sans-serif; font-size: 16px; font-weight: 400;
    text-decoration: none; transition: background 0.15s ease, border-color 0.15s ease;
}
.home-btn-primary {
    background: #005BA0; color: #fff; box-shadow: 0 0 1.2px rgba(0,0,0,0.3);
}
.home-btn-primary:hover { background: #004A85; color: #fff; }
.home-btn-secondary {
    background: #fff; color: #005BA0; border: 1px solid #D1D5DB;
}
.home-btn-secondary:hover { border-color: #005BA0; color: #005BA0; }
.home-hero-note {
    font-family: 'Work Sans', sans-serif; font-size: 15px; color: #6B7280;
    margin: 20px 0 0;
}
.home-hero-art { flex: 1; max-width: 560px; display: flex; justify-content: center; align-items: center; }
.home-hero-art img { width: 100%; max-width: 100%; height: auto; }

/* Content sections */
.home-section { padding: 56px 40px; max-width: 1240px; margin: 0 auto; }
.home-section-alt { background: #fff; max-width: none; }
.home-section-alt > .home-cards,
.home-section-alt > .home-section-title { max-width: 1240px; margin-left: auto; margin-right: auto; }
.home-section-title {
    font-family: 'Work Sans', sans-serif; font-weight: 600; font-size: 28px;
    color: #111827; margin: 0 0 28px; text-align: center;
}
.home-cards { display: flex; gap: 24px; align-items: stretch; flex-wrap: wrap; }
.home-card {
    flex: 1; min-width: 260px; background: #fff; border-radius: 7px; padding: 24px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.home-section-alt .home-card { background: #F6F7F9; box-shadow: none; }
.home-card-title {
    font-family: 'Work Sans', sans-serif; font-weight: 600; font-size: 19px;
    color: #111827; margin: 0 0 10px;
}
.home-card p {
    font-family: 'Work Sans', sans-serif; font-weight: 400; font-size: 16px;
    line-height: 1.55; color: #4B5563; margin: 0;
}

/* Footer */
.home-footer {
    padding: 40px; text-align: center; border-top: 1px solid #E5E7EB;
    font-family: 'Work Sans', sans-serif;
}
.home-footer-cta { font-size: 17px; color: #111827; margin: 0 0 14px; }
.home-footer-cta a { color: #005BA0; text-decoration: underline; }
.home-footer-links { font-size: 15px; margin: 0 0 10px; }
.home-footer-links a { color: #005BA0; text-decoration: underline; }
.home-footer-sep { color: #9CA3AF; margin: 0 8px; }
.home-footer-copy { font-size: 14px; color: #6B7280; margin: 0; }

@media (max-width: 900px) {
    .home-hero { flex-direction: column; gap: 32px; padding: 40px 24px; text-align: center; }
    .home-hero-copy { max-width: 100%; }
    .home-hero-actions { justify-content: center; }
    .home-hero-title { font-size: 32px; }
    .home-hero-art { max-width: 460px; }
    .home-section { padding: 40px 24px; }
}

@media (max-width: 600px) {
    .home-header-actions { gap: 12px; }
    .home-nav-link { font-size: 15px; }
    .home-nav-btn { height: 38px; padding: 0 14px; font-size: 15px; }
    .home-hero { padding: 32px 16px; }
    .home-hero-title { font-size: 27px; }
    .home-hero-subtitle { font-size: 16px; }
    .home-btn-primary,
    .home-btn-secondary { width: 100%; }
    .home-section { padding: 32px 16px; }
    .home-section-title { font-size: 23px; }
    .home-cards { flex-direction: column; gap: 16px; }
    .home-card { min-width: 0; }
    .home-footer { padding: 28px 16px; }
}


/* ---------------------------------------------------------------------------
   Public document pages (PrivacyPolicy, TermsOfUse, and the FAQ once rewritten).
   Shares the .auth-page shell and the .home-* header/footer with the landing
   page so the whole public site reads as one site. Any new public prose page
   should use .doc-page and inherit this - do not restyle per page.
   --------------------------------------------------------------------------- */
.doc-page .doc-body { padding: 56px 40px; }
.doc-page .doc-sheet {
    max-width: 820px; margin: 0 auto; background: #fff; border-radius: 7px;
    padding: 48px 56px; box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.doc-page .doc-title {
    font-family: 'Work Sans', sans-serif; font-weight: 600; font-size: 34px;
    line-height: 1.25; color: #111827; margin: 0 0 8px;
}
.doc-page .doc-meta {
    font-family: 'Work Sans', sans-serif; font-size: 15px; color: #6B7280;
    margin: 0 0 8px; padding-bottom: 24px; border-bottom: 1px solid #E5E7EB;
}
.doc-page .doc-lead {
    font-family: 'Work Sans', sans-serif; font-size: 18px; line-height: 1.6;
    color: #4B5563; margin: 24px 0 0;
}

/* Prose. Scoped to .doc-prose so the app's .richTextView rules stay untouched. */
.doc-page .doc-prose { font-family: 'Work Sans', sans-serif; color: #374151; }
.doc-page .doc-prose h2 {
    font-weight: 600; font-size: 22px; color: #111827;
    margin: 36px 0 12px; padding-top: 4px;
}
.doc-page .doc-prose h3 {
    font-weight: 600; font-size: 18px; color: #111827; margin: 24px 0 8px;
}
.doc-page .doc-prose p { font-size: 16px; line-height: 1.65; margin: 0 0 14px; }
.doc-page .doc-prose ul { margin: 0 0 16px; padding-left: 22px; }
.doc-page .doc-prose li { font-size: 16px; line-height: 1.65; margin-bottom: 7px; }
.doc-page .doc-prose a { color: #005BA0; text-decoration: underline; }
.doc-page .doc-prose strong { font-weight: 600; color: #111827; }
.doc-page .doc-prose address { font-style: normal; line-height: 1.65; font-size: 16px; }

/* Callout for the one thing a reader must not miss. */
.doc-page .doc-note {
    background: #F0F6FB; border-left: 3px solid #005BA0; border-radius: 4px;
    padding: 16px 18px; margin: 0 0 18px;
}
.doc-page .doc-note p { margin: 0; font-size: 15px; line-height: 1.6; color: #374151; }

/* Per-surface disclosure table (web app vs mobile app). */
.doc-page .doc-table-wrap { overflow-x: auto; margin: 0 0 20px; }
.doc-page .doc-table {
    width: 100%; border-collapse: collapse; font-family: 'Work Sans', sans-serif;
    font-size: 15px; min-width: 520px;
}
.doc-page .doc-table th,
.doc-page .doc-table td {
    text-align: left; padding: 11px 14px; border-bottom: 1px solid #E5E7EB;
    vertical-align: top; line-height: 1.55;
}
.doc-page .doc-table th {
    font-weight: 600; color: #111827; background: #F6F7F9;
    border-bottom: 1px solid #D1D5DB;
}
.doc-page .doc-table td { color: #374151; }
.doc-page .doc-table tr:last-child td { border-bottom: none; }

/* In-page contents list, for the longer documents. */
.doc-page .doc-toc { margin: 28px 0 8px; }
.doc-page .doc-toc-title {
    font-family: 'Work Sans', sans-serif; font-weight: 600; font-size: 14px;
    text-transform: uppercase; letter-spacing: 0.04em; color: #6B7280; margin: 0 0 10px;
}
.doc-page .doc-toc ol { margin: 0; padding-left: 20px; }
.doc-page .doc-toc li { font-size: 15px; line-height: 1.9; }
.doc-page .doc-toc a { color: #005BA0; text-decoration: none; }
.doc-page .doc-toc a:hover { text-decoration: underline; }

@media (max-width: 900px) {
    .doc-page .doc-body { padding: 32px 24px; }
    .doc-page .doc-sheet { padding: 34px 30px; }
    .doc-page .doc-title { font-size: 28px; }
}

@media (max-width: 600px) {
    .doc-page .doc-body { padding: 0; }
    .doc-page .doc-sheet {
        padding: 26px 18px; border-radius: 0; box-shadow: none;
        max-width: none;
    }
    .doc-page .doc-title { font-size: 24px; }
    .doc-page .doc-lead { font-size: 16px; }
    .doc-page .doc-prose h2 { font-size: 20px; margin-top: 30px; }
    .doc-page .doc-prose h3 { font-size: 17px; }
    .doc-page .doc-prose p,
    .doc-page .doc-prose li { font-size: 15px; }
}