/* Reset CSS - Eric 2.0 */
a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var, video {
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    vertical-align: baseline
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block
}

body {
    line-height: 1
}

ol, ul {
    list-style: none
}

blockquote, q {
    quotes: none
}

.field-disabled {
    opacity: 0.65
}

blockquote:after, blockquote:before, q:after, q:before {
    content: '';
    content: none
}

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

/* Global Font Styling */
body, p, span, h1, h2, h3, h4, h5, ul, li, a {
    -moz-osx-font-smoothing: grayscale !important;
    -webkit-font-smoothing: antialiased !important;
    font-family: "Roboto", "Helvetica Neue", Arial, sans-serif;
    font-weight: 400 !important;
}

a:not(.disable-animation) {
    -o-transition: all .4s;
    -ms-transition: all .4s;
    -moz-transition: all .4s;
    -webkit-transition: all .4s;
    transition: all .4s;
}

.help-faq-header .mat-content {
    overflow: visible;
    font-size: 24px;
}

@media (hover: none) {
    #help-faq-container .mat-expansion-panel:not(.mat-expanded):not([aria-disabled=true]) .mat-expansion-panel-header:hover {
        background: unset;
    }
}

.license-actions span {
    font-weight: bold !important;
}

.license-actions {
    justify-content: flex-end;

}

a, a:hover, a:active, a:focus, a:visited {
    outline: 0;
    text-decoration: none;
    cursor: pointer;
}

.faq-panel--title .mat-expansion-panel-header-title {
    color: #1f56b1 !important;
}

.large {
    font-size: 21px;
}

.medium {
    font-size: 18px;
}

.medium-small {
    font-size: 15px;
}

.small {
    font-size: 12px !important;
}

.deep-grey {
    color: #495b6f;
}

.mid-grey {
    color: #485d70;
}

.light-grey {
    color: #bababa;
}

.cool-grey {
    color: #788595;
}

.deep-blue {
    color: #7198e6;
}

.mid-blue {
    color: #7198e6;
}

.light-blue {
    color: #c9dbff;
}

.nav-blue {
    color: #1f56b1 !important;
}

.deep-green {
    color: #92c46d;
}

.mid-green {
    color: #a7d189;
}

.light-green {
    color: #bedca8;
}

.deep-orange {
    color: #e6a53c;
}

.mid-orange {
    color: #f2bc65;
}

.light-orange {
    color: #ffd590;
}

.deep-red {
    color: #e65f5f;
}

.mid-red {
    color: #f28989;
}

.light-red {
    color: #ffb6b6;
}

.deep-red-imp {
    color: #e65f5f !important;
}

.deep-cyan {
    color: #297d7d;
}

.mid-cyan {
    color: #539798;
}

.light-cyan {
    color: #7fb1b2;
}

.bright-cyan {
    color: #38adbb;
}

.white {
    color: white;
}

::selection {
    background: #7198e6 !important;
}

::-moz-selection {
    background: #7198e6 !important;
}

/* Sticky Footer & Header Template */
html {
    position: relative;
    min-height: 100%
}

body {
    margin-bottom: 35px;
}

.footer {
    z-index: 10;
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 91px;
    background-color: #edeef0;
    padding-top: 14px;
    border-top: 5px solid white;
}

.footer a, .footer i {
    color: #606b79
}

.footer i {
    font-size: 28pt;
    margin-bottom: 6px;
    display: block
}

.footer a {
    font-size: 12pt !important
}

.footer-nav-item:hover {
    background-color: #f9f9f9;
    margin-top: -14px;
    padding-top: 14px;
    height: 84px;
}

.footer a:hover > .footer-nav-item i {
    color: #9bb8f2 !important;
}

.footer a:hover > .footer-nav-item span {
    color: #1f56b1 !important;
}

.selected .footer-nav-item i {
    color: #9bb8f2 !important;
}

.selected .footer-nav-item span {
    color: #1f56b1 !important;
}

.selected .footer-nav-item {
    background-color: #f9f9f9;
    margin-top: -14px;
    padding-top: 14px;
    height: 84px;
}

::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

::-webkit-scrollbar-track {
    background-color: #f7f9ff
}

::-webkit-scrollbar-thumb {
    background: rgba(132, 166, 255, .3)
}

@media only screen and (max-width: 510px) {
    .footer span {
        display: none;
    }

    .footer i {
        margin-top: 8px;
        font-size: 34pt;
    }

    .footer-dash:hover, .footer-location:hover, .footer-device:hover, .footer-drive:hover, .selected .footer-dash, .selected .footer-location, .selected .footer-device, .selected .footer-drive {
        background-color: transparent;
    }
}

.file-dropdown-menu {
    height: fit-content;
}

.cdk-overlay-container {
    z-index: 10002 !important;
}

/* Top Navbar Styling */
.navbar-brand img {
    height: 110%;
}

.login-alert .alert {
    margin: 20px 0 20px 0 !important;
}

.navbar-header button {
    border: none;
    background: transparent !important;
}

.myNav #downIcon {
    font-size: 32px !important;
    color: white;
}

.navbar-toggle {
    padding: 0 !important;
}

.navbar-brand {
    padding: 10px 15px !important;
}

.navbar-default .dropdown-toggle {
    font-size: 15px;
    color: white !important;
}

.navbar-default .dropdown-toggle:hover {
    color: white !important;
}

.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus {
    background-color: #4673d1;
}

.navbar-default {
    background: #1f56b1 !important;
    border: none !important;
}

.dropdown-menu li a {
    color: #1f56b1 !important;
    line-height: 2.5 !important;
    cursor: pointer;
}

.dropdown-menu li a:hover {
    color: #1f56b1 !important;
    background-color: #dee8f7 !important;
}

.lto-nav-menu:hover {
    cursor: pointer;
}

.navbar-fixed-bottom .navbar-collapse, .navbar-fixed-top .navbar-collapse {
    max-height: 100% !important;
}

@media only screen and (max-width: 767px) {
    .navbar-brand img {
        height: 86%;
    }

    .lang-line {
        display: none;
    }

    .login-alert .alert {
        margin: 20px 0 20px 0;
    }

    .navbar-nav .open .dropdown-menu {
        text-align: center
    }

    .navbar, .navbar-collapse {
        border: none !important;
        box-shadow: none !important;
        overflow-y: hidden !important;
        overflow-x: hidden !important;
        border-radius: 0;
        margin: 0 !important
    }

    #top-nav {
        max-height: 100%;
        overflow: auto !important;
    }

    .navbar {
        text-align: center !important
    }

    .navbar .container {
        padding-left: 0 !important;
        padding-right: 0 !important
    }

    .navbar-brand img {
        padding-left: 15px
    }

    .navbar-header button {
        padding-right: 15px !important
    }

    .lto-nav-menu {
        display: block;
        float: none
    }

    .dropdown-menu {
        padding: 0 !important;
        border-color: #dee8f7
    }

    .dropdown-submenu:hover, .dropdown-toggle:hover {
        background-color: #4673d1 !important
    }

    .dropdown-menu li a {
        color: #1f56b1 !important;
        background-color: #fff !important
    }

    .dropdown-menu li a:hover {
        background-color: #dee8f7 !important
    }
}

/* Notification Dropdown */
.myNav .active-notification, .myNav .active-notification:active {
    color: white !important;
    background-color: #e65f5f !important;
}

.myNav .active-notification:hover, .myNav .active-notification:focus {
    background-color: #f28989 !important;
}

.myNav .notif-menu .notif-dropdown-menu {
    padding: 20px 15px 15px 15px !important;
    min-width: 400px;
    background: white !important;
}

.myNav .notif-list {
    border-bottom: 1px solid #ddd;
    margin-bottom: 10px;
    padding-bottom: 10px;
    font-size: 10pt;
    min-width: 400px;
}

.myNav .notif-list .notif-type {
    color: #e65f5f !important;
    vertical-align: super;
}

.myNav .notif-list .notif-desc a {
    color: #788595 !important;
    vertical-align: super;
}

.myNav .notif-list .notif-desc a:hover {
    color: #38adbb !important;
}

.myNav .notif-list i {
    color: #e65f5f !important;
    font-size: 22pt;
}

.myNav .notif-all {
    padding-bottom: 5px;
}

.myNav .notif-all a {
    color: #1f56b1 !important;
}

.myNav .notif-all a:hover {
    color: #0098aa !important;
}

.myNav .notif-list:hover > i {
    color: #0098aa !important;
}

@media only screen and (max-width: 767px) {
    .myNav .notif-menu .notif-dropdown-menu {
        margin-bottom: 10px;
        min-width: 0;
    }

    .myNav .notif-list {
        padding-bottom: 15px;
    }
}

/* LTO Alerts */
.alert-success {
    color: #59942d;
    border: 1px solid #92c46d;
    margin-bottom: 0 !important;
}

.alert-success i {
    color: #59942d;
}

.alert-success a, .alert-success a:active, .alert-success a:visited {
    color: #59942d;
    font-weight: bold !important;
}

.alert-success a:hover, .alert-success a:focus {
    color: #a7d189;
    cursor: pointer;
}

.alert-info {
    color: #1f56b1;
    border: 1px solid #1f56b1;
}

.alert-info i {
    color: #1f56b1;
}

.alert-info a, .alert-info a:active, .alert-info a:visited {
    color: #1f56b1;
    font-weight: bold !important;
}

.alert-info a:hover, .alert-info a:focus {
    color: #7198e6;
    cursor: pointer;
}

.alert-warning {
    color: #e6a53c;
    border: 1px solid #e6a53c;
}

.alert-warning i {
    color: #e6a53c;
}

.alert-warning a, .alert-warning a:active, .alert-warning a:visited {
    color: #e6a53c;
    font-weight: bold !important;
}

.alert-warning a:hover, .alert-warning a:focus {
    color: #f2bc65;
    cursor: pointer;
}

.alert-danger {
    color: #e65f5f;
    border: 1px solid #e65f5f;
}

.alert-danger i {
    color: #e65f5f;
}

.alert-danger a, .alert-danger a:active, .alert-danger a:visited {
    color: #e65f5f;
    font-weight: bold !important;
}

.alert-danger a:hover, .alert-danger a:focus {
    color: #f28989;
    cursor: pointer;
}

/* Form Styling */
.check-label {
    text-transform: capitalize !important;
}

.cca-switch {
    display: inline;
}

.cca-switch input[type=checkbox] {
    height: 0;
    width: 0;
    visibility: hidden
}

.cca-switch label {
    bottom: -4px;
    cursor: pointer;
    text-indent: -9999px;
    width: 40px;
    height: 20px;
    background: #bababa;
    border-radius: 100px;
    position: relative;
    margin: 0 0 20px 0 !important;
}

.cca-switch label:after {
    content: '';
    position: absolute;
    top: 5px;
    left: 5px;
    width: 10px;
    height: 10px;
    background: #fff;
    border-radius: 90px;
    transition: 0.1s
}

.cca-switch input:checked + label {
    background: #92c46d
}

.cca-switch input:checked + label:after {
    left: calc(100% - 5px);
    transform: translateX(-100%)
}

.cca-switch label:active:after {
    width: 15px
}

.form-control {
    font-family: 'Roboto Condensed', sans-serif;
    box-shadow: none;
    font-size: 16px !important;
    color: #788595 !important;
    padding: 9px;
    height: 40px;
}

.form-control:focus {
    background-color: #f9fcff;
    color: #1f56b1 !important;
    box-shadow: none;
    border-color: #76adea;
}

.form-control, .k-input-solid, .input-group-addon {
    border-color: #9e9e9e;
}

.form-control:hover, .k-input-solid:hover, .input-group-addon:hover {
    border-color: #212121;
}

.field-validation-error {
    font-size: 14px;
    font-style: italic;
    margin-top: 10px;
}

input:disabled .btn, input:disabled .btn:hover, input:disabled .btn:active, input:disabled .btn:focus, .btn[disabled] {
    background-color: #c4c9ce !important;
}

.btn, .btn:focus, .btn:active.btn:hover {
    outline: none !important;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 17px;
    color: white !important;
    display: inline !important;
}

.green-btn {
    background-color: #92c46d;
}

.green-btn:hover {
    background-color: #a7d189;
}

.green-btn:active {
    background-color: #5a9641;
}

.grey-btn {
    background-color: #d8d8d8;
    color: #1c344e;
}

.grey-btn:hover {
    background-color: #ececec;
}

.grey-btn:active {
    background-color: #acacac;
}

.orange-btn {
    background-color: #f2bc65;
}

.orange-btn:hover {
    background-color: #ffd590;
}

.orange-btn:active {
    background-color: #e6a53c;
}

.blue-btn {
    background-color: #7198e6;
}

.blue-btn:hover {
    background-color: #abc7ff;
}

.blue-btn:focus {
    background-color: #487bcf;
}

.blue-btn:active {
    background-color: #7198e6;
}

.nav-blue-btn {
    background-color: #1f56b1;
}

.nav-blue-btn:hover {
    background-color: #487bcf;
}

.nav-blue-btn:active {
    background-color: #0e377c;
}

.red-btn {
    background-color: #f28989;
}

.red-btn:hover {
    background-color: #ffb6b6;
}

.red-btn:active {
    background-color: #e65f5f;
}

/* Login */
.lang-line {
    font-family: 'Cormorant Garamond', serif;
    font-size: 18px;
    margin: 30px 0 52px 0;
}

.login-alert .alert {
    vertical-align: baseline;
    padding: 12px;
    background-color: white !important;
    display: inline-block;
}

#creataccount:hover, #forgotpass:hover {
    cursor: pointer;
}

.login-box {
    border: 1px solid #d5dbe3;
    border-radius: 5px;
    padding: 15px;
    display: inline-block;
    min-width: 196px;
    width: 350px;
}

.login-box .mid-orange:hover {
    color: #ffd590;
}

.login-box label, .password-box label {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 22px;
    text-transform: uppercase;
    margin: 20px 0 5px 0;
}

.login-box .btn {
    width: 100% !important;
    text-transform: uppercase;
    font-size: 18px;
    font-family: 'Roboto Condensed', sans-serif;
    color: white;
    padding: 8px;
    margin: 20px 0 0 0;
}

.error-message, .login-box .mid-red {
    font-size: 14px;
    font-style: italic;
}

.login-message {
    margin-top: -80px;
    margin-bottom: 40px;
}

.login-message .message-container {
    margin-top: 0 !important;
}

.login-message a {
    color: #f2bc65;
    font-weight: 600 !important;
}

.version {
    margin-right: 4px;
    color: #bababa;
    font-style: italic;
    font-size: 12px;
}

.login-alert .alert-success, .login-alert .alert-danger, .login-alert .alert-info, .login-alert .alert-warning {
    width: auto;
}

.verification-alert .input-control {
    min-height: 50px;
}

@media only screen and (max-width: 767px) {
    .login-box {
        margin-top: 40px;
    }
}

@media only screen and (min-width: 421px) {
    .login-box {
        width: 350px;
    }
}

@media only screen and (max-width: 420px) {
    .login-box {
        width: 100% !important;
    }
}

/* Create Account */
.signup-box {
    border: 1px solid #d5dbe3;
    border-radius: 5px;
    padding: 15px;
    margin-top: 0px;
    margin-bottom: 5px;
}

.signup-box h1 {
    font-size: 22px;
    margin-bottom: 20px;
}

.signup-box .field-line {
    margin-bottom: 20px;
}

.signup-box label {
    margin-bottom: 3px !important;
}

.signup-box .img-responsive {
    max-width: 90px !important;
    display: inline-block !important;
    margin-bottom: 15px;
}

.signup-box a {
    font-weight: bold !important;
}

.signup-box .light-grey {
    font-style: italic;
}

.go-back:hover {
    color: #ffb6b6 !important;
}

.verification-alert .alert {
    margin-top: 65px;
}

.verification-alert .deep-orange a {
    font-weight: bold !important;
}

@media (max-width: 767px) {
    .signup-box .green-btn {
        margin-top: 20px;
    }
}

/* First Sign In Modal */
.team-pick {
    border: 1px solid #d5dbe3;
    border-radius: 5px;
    min-height: 524px;
    position: inherit;
    padding: 15px;
}

.team-pick i {
    font-size: 20pt;
    margin-right: 5px;
    width: 25px;
    color: #bababa;
}

.team-pick span {
    display: inline-block;
    vertical-align: super;
    line-height: 5;
    color: #bababa;
    font-size: 9pt
}

.team-pick h2 {
    color: #bababa;
}

.team-pick .btn {
    background-color: #bababa;
    width: 90%;
}

.selected-team .free-account span {
    color: #9bb8f2;
}

.selected-team .free-account h2 {
    color: #7198e6;
}

.selected-team .free-account {
    border: 1px solid #9bb8f2 !important;
}

.selected-team .free-account hr {
    border-top: 1px solid #9bb8f2 !important;
}

.selected-team .free-account .account-select {
    background-color: #c9dbff;
    border-radius: 0 0 5px 5px;
    width: 100%;
    position: absolute;
    left: 0;
    padding: 10px;
    text-align: center;
    bottom: 0;
}

.selected-team .free-account .blue-btn {
    background-color: #9bb8f2 !important;
}

.selected-team .free-account .blue-btn:hover {
    background-color: #abc7ff !important;
}

.selected-team .demo-account span {
    color: #9bb8f2;
}

.selected-team .demo-account h2 {
    color: #7198e6;
}

.selected-team .demo-account {
    border: 1px solid #9bb8f2 !important;
}

.selected-team .demo-account hr {
    border-top: 1px solid #9bb8f2 !important;
}

.selected-team .demo-account .account-select {
    background-color: #c9dbff;
    border-radius: 0 0 5px 5px;
    width: 100%;
    position: absolute;
    left: 0;
    padding: 10px;
    text-align: center;
    bottom: 0;
}

.selected-team .demo-account .blue-btn {
    background-color: #9bb8f2 !important;
}

.selected-team .demo-account .blue-btn:hover {
    background-color: #abc7ff !important;
}

.selected-team .small-team span, .selected-team .small-team h2 {
    color: #92c46d;
}

.selected-team .small-team {
    border: 1px solid #92c46d !important;
}

.selected-team .small-team hr {
    border-top: 1px solid #92c46d !important;
}

.selected-team .small-team .account-select {
    background-color: #e0ffc9;
    border-radius: 0 0 5px 5px;
    width: 100%;
    position: absolute;
    left: 0;
    padding: 10px;
    text-align: center;
    bottom: 0;
}

.selected-team .small-team .green-btn {
    background-color: #92c46d !important;
}

.selected-team .small-team .green-btn:hover {
    background-color: #a7d189 !important;
}

.selected-team .medium-team span, .selected-team .medium-team h2 {
    color: #92c46d;
}

.selected-team .medium-team {
    border: 1px solid #92c46d !important;
}

.selected-team .medium-team hr {
    border-top: 1px solid #92c46d !important;
}

.selected-team .medium-team .account-select {
    background-color: #e0ffc9;
    border-radius: 0 0 5px 5px;
    width: 100%;
    position: absolute;
    left: 0;
    padding: 10px;
    text-align: center;
    bottom: 0;
}

.selected-team .medium-team .green-btn {
    background-color: #92c46d !important;
}

.selected-team .medium-team .green-btn:hover {
    background-color: #a7d189 !important;
}

.selected-team .large-team span, .selected-team .large-team h2 {
    color: #e6a53c;
}

.selected-team .large-team {
    border: 1px solid #e6a53c !important;
}

.selected-team .large-team hr {
    border-top: 1px solid #e6a53c !important;
}

.selected-team .large-team .account-select {
    background-color: #ffecce;
    border-radius: 0 0 5px 5px;
    width: 100%;
    position: absolute;
    left: 0;
    padding: 10px;
    text-align: center;
    bottom: 0;
}

.selected-team .large-team .orange-btn {
    background-color: #e6a53c !important;
}

.selected-team .large-team .orange-btn:hover {
    background-color: #ffd590 !important;
}

.selected-team .enterprise span, .selected-team .enterprise h2 {
    color: #1f56b1;
}

.selected-team .enterprise {
    border: 1px solid #1f56b1 !important;
}

.selected-team .enterprise hr {
    border-top: 1px solid #1f56b1 !important;
}

.selected-team .enterprise .account-select {
    background-color: #cfe1ff;
    border-radius: 0 0 5px 5px;
    width: 100%;
    position: absolute;
    left: 0;
    padding: 10px;
    text-align: center;
    bottom: 0;
}

.selected-team .enterprise .nav-blue-btn {
    background-color: #1f56b1 !important;
}

.selected-team .enterprise .nav-blue-btn:hover {
    background-color: #7198e6 !important;
}

@media (max-width: 1200px) {

    .team-pick {
        margin-bottom: 50px;
    }
}

/* LTO Modal */
.k-block,
.k-content,
.k-editor,
.k-notification,
.k-scheduler-agendaview tr.k-state-hover .k-scheduler-datecolumn,
.k-spreadsheet-filter-menu .k-spreadsheet-value-treeview-wrapper,
.k-widget,
.k-window {
    border-radius: 0px 0px 8px 8px !important;
}

.k-dialog {
    min-width: 300px;
}

    @media (max-width: 768px) {
        .k-dialog{
            width:100% !important; /* need important since other styles above are more specific*/
        }
    }

.k-window{
    max-width: 98vw;
    max-height: 98%;
}

.k-window.k-dialog.ng-trigger-dialogSlideInAppear {
    width: 95%;
    height: auto;
}

.k-window-content {
    padding: 0;
    overflow-x: hidden;
    overflow-y: auto;
}
    .k-window-content:last-child {
        padding-bottom:0;
    }
    .k-window-content:first-child {
        padding-top: 0;
    }
    @media (max-height: 720px) {
        .k-window-content {
            overflow-y: scroll !important;
        }
    }
    @media (max-width: 768px) {
        /* Hide scrollbar on small devices*/
        .k-window-content::-webkit-scrollbar { /*for Chrome, Safari and Opera*/
            display: none;
        }
        .k-window-content { /*  IE, Edge add Firefox */
            -ms-overflow-style: none;
            scrollbar-width: none; /* Firefox */
        }
    }

div[disablebackgroundscroll] {
    overscroll-behavior-y: none;
}

.lto-modal-header {
    background-color: #84a6ff;
    color: white;
    font-size: 13pt;
    padding-left: 15px;
    height:41px;
}
    .lto-modal-header nav{
       z-index: 1; /* otherwise modal content pokes through it */
    }

    .lto-modal-header h1 {
        padding-right: 40px;
        white-space: nowrap;
    }

    /* Need to auto-size the nav bar headers so the help icon fits next to the header text */
    .lto-modal-header .title-container {
        display: flex;
        flex-direction: row;
        align-items: center;
    }

@media (max-width: 767px) { /* size < bootstrap small*/
    .lto-modal-header{
        padding-left:0;
        padding-right:16px; /* keep X on screen */
    }

    .lto-modal-header h1 {
        max-width:60vw; /* stop header from overlapping X */
        text-overflow:ellipsis;
        overflow:hidden;
    }
}

    .lto-modal-header i {
        font-size: 27pt;
        padding: 5px;
        -o-transition: all .4s;
        -ms-transition: all .4s;
        -moz-transition: all .4s;
        -webkit-transition: all .4s;
        transition: all .4s;
        /* hate hacking these absolute positions like this.... but the css is such a mess :( */
        top: 0;
        right: 20px;
        position:absolute;

    }

        .lto-modal-header i:hover {
            cursor: pointer;
            color: #1f56b1;
        }

    .lto-modal-header h3 {
        line-height: 1.6;
        padding-top: 10px;
        padding-bottom: 10px;
        padding-left: 0px;
        padding-right: 10px;
        font-size: 12pt;
    }

    .lto-modal-header .nav-tabs {
        border: 0;
    }

    .lto-modal-header .nav-tabs > li > a {
        border-radius: 0;
        border: 0;
        color: white;
    }

    .lto-modal-header .nav-tabs > li {
        margin-left: -2px;
    }

    .lto-modal-header .nav-tabs > li > a:hover,
    .lto-modal-header .nav-tabs > li > a:focus,
    .lto-modal-header .nav-tabs > li > a:active {
        border: 0;
        background: rgba(255, 255, 255, 0.7);
        color: #1f56b1;
    }

    .lto-modal-header .nav-tabs > li.active > a {
        background: rgba(255, 255, 255, 0.4);
        color: #1f56b1;
    }

    .lto-modal-header .nav-tabs > li.active > a:hover,
    .lto-modal-header .nav-tabs > li.active > a:focus,
    .lto-modal-header .nav-tabs > li.active > a:active {
        background: rgba(255, 255, 255, 0.7);
    }

.lto-modal-body {
    padding: 30px;
}

.lto-modal-footer {
    bottom: 0;
    width: 100%;
    padding: 0 30px 15px 30px;
}

#register .lto-modal-body .info-box {
    border: 1px solid #9bb8f2;
    border-radius: 3px;
    padding: 5px;
    color: #7198e6;
    margin-top: 15px;
}

#register .lto-modal-body .info-box span {
    font-size: 9pt;
}

#register .lto-modal-body .info-box i {
    font-size: 15pt;
    vertical-align: sub;
    margin-bottom: 3px;
}

#fileedit .k-dialog {
    width: 50%;
}

.lto-modal-body:not(.clear-kendo-label) label:not(.mat-checkbox-layout):not(.mat-form-field-label):not(.mdc-floating-label), .renew-code-dialog label, #shipmentSettingsContent label:not(.mat-form-field-label):not(.mdc-floating-label) {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 15px;
    margin: 10px 0 3px 0;
}

.lto-modal-body .btn, #shipmentSettingsContent .btn {
    vertical-align: baseline !important;
    line-height: 1.5;
    font-size: 12pt;
    color: white;
    font-weight: 300 !important;
}

.lto-modal-body .btn:hover, .lto-modal-body .btn:focus, .lto-modal-body .btn:active {
    font-size: 12pt !important;
}

.lto-modal-body .modal-title {
    margin-bottom: 20px;
}

.lto-modal-body .detail-panel {
    border: 1px solid #84a6ff;
    border-radius: 3px;
    padding: 15px;
    margin-bottom: 20px;
    min-height: 355px;
}

.lto-modal-body .modal-table-info {
    color: #1f56b1;
}

.lto-modal-body:not(.device-config-modal) .table tr td {
    border-bottom: 1px solid #ddd;
    border-top: 0;
    padding: 8px;
}

.lto-modal-body .deep-red:hover {
    color: #ffb6b6;
}

.lto-modal-body .btn {
    border-radius: 2px !important;
}

.modal-alert-window {
    z-index: 999;
    position: fixed;
    right: 0;
    margin: 0 auto;
    left: 0;
}

.modal-alert-window .alert {
    padding: 5px 10px;
}

.modal-alert-window button {
    top: 5px !important;
    right: 5px !important;
}

.modal-alert-window i {
    font-size: 21pt;
}

.modal-alert-window p {
    display: inline-block;
    vertical-align: super;
    margin-left: 10px;
}

@media (min-width: 992.5px) {
    .modal-alert-window {
        top: 55px;
        width: 50%;
    }
}

@media (max-width: 992px) {
    .modal-alert-window {
        top: 7px;
        width: 90%;
    }
}

/* Dashboard */
@media (max-height: 710px) {
    .dashboard {
        margin-bottom: 80px;
    }
}

@media (max-width: 992px) {
    .dashboard {
        margin-bottom: 80px;
    }
}

.recent-files .table {
    margin-bottom: 0px;
    margin-top: -1px;
}

.router-page {
    margin-bottom: 100px;
}

.dash-add-loc-btn {
    margin-top: -4px;
}

.dashboard .recent-files .table td {
    padding: 0 6px 4px 6px;
    vertical-align: middle;
}

.dashboard .dash-device-table .table td {
    padding: 7px 6px 7px 6px;
}

.dashboard .table > thead > tr > th {
    border-bottom: 1px solid #ddd;
}

.dashboard .dropdown-menu {
    left: -138px;
    top: 20px;
}

.dashboard .recent-files .btn-inspect {
    padding: 1px 4px;
    background-color: transparent;
}

.dashboard .recent-files .btn-inspect i {
    font-size: 19pt;
    color: #92c46d;
    vertical-align: text-top;
}

.dashboard .recent-files .btn-inspect i:hover {
    color: #7198e6;
}

.dashboard .recent-files .btn-inspect i:active {
    color: #1f56b1;
}

.btn-group.open .dropdown-toggle {
    box-shadow: none !important;
}

.dashboard .last-reading {
    font-size: 9pt;
}

.router-page-title {
    margin-bottom: 20px;
    border-bottom: 1px solid #c9dbff;
    font-size: 22px;
    font-weight: 300 !important;
    padding-bottom: 5px;
}

.dashboard h3 {
    margin-bottom: 10px;
    display: inline-block;
    font-size: 11pt;
}

.dashboard .new-btn, .dashboard .new-btn:visited {
    border: 1px solid #92c46d;
    border-radius: 3px;
    padding: 15px;
    color: #92c46d;
    font-size: 14px;
    background: white;
    margin-top: 50px;
}

.dashboard .new-btn:hover, .dashboard .new-btn:active, .dashboard .new-btn:focus {
    border: none;
    background: #92c46d;
    color: white;
}

.dashboard .no-items {
    font-style: italic;
    color: #788595;
    font-size: 13px;
    margin-top: 60px;
    display: inline-block;
}

.dashboard .reg-btn, .dashboard .reg-btn:visited {
    float: right;
    border: 1px solid #92c46d;
    border-radius: 2px;
    padding: 6px;
    color: #92c46d;
    font-size: 12px;
    background: white;
}

.dashboard .reg-btn:hover, .dashboard .reg-btn:active, .dashboard .reg-btn:focus {
    border: none;
    background: #92c46d;
    color: white;
}

.dash-device-table {
    overflow: hidden;
    margin: -1px;
}

.dash-file-table {
    height: 462px;
    overflow: hidden;
    margin: -1px;
}

.dashboard .table-bordered > tbody > tr > td, .dashboard .table-bordered > thead > tr > th {
    vertical-align: sub !important;
    border: none;
}

.dashboard .table-bordered > tbody > tr > td, .dashboard .table-bordered > thead > tr > th {
    border-top: 1px solid #ddd !important;
}

.dashboard .table-striped > thead > tr > th {
    font-size: 9pt;
    color: #1f56b1;
    padding: 3px 6px;
    font-weight: bold;
}

.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: #f5f8ff;
}

.dashboard .table-striped > tbody > tr:hover {
    background-color: #d0e0ff !important;
}

.dash-file-SN, .dash-file-via, .dash-file-desc, .dash-file-devSN, .dash-file-date {
    font-family: 'Roboto Condensed', sans-serif !important;
    font-size: 10pt;
    vertical-align: middle;
}

@keyframes fade {
    0% {
        opacity: 0.85;
    }
    100% {
        opacity: 1;
    }
}

.most-recent-position-marker {
    box-shadow: rgb(80, 80, 80) 8px 8px 10px !important;
    animation: fade 0.7s infinite alternate;
}

.dash-device-desc {
    font-family: 'Roboto Condensed', sans-serif !important;
    font-size: 10pt;
}

.dash-file-date {
    font-size: 9pt;
    font-style: italic;
    width: 130px;
}

.dash-file-SN {
    color: #1f56b1;
    width: 110px;
}

.dash-file-SN:hover {
    color: #7198e6;
    cursor: pointer;
}

.view-all {
    font-size: 9pt;
    font-weight: 400 !important;
    color: #92c46d;
}

.view-all:hover {
    color: #a7d189;
}

.lto-panel {
    border: 1px solid #cbcfd4;
    border-radius: 3px;
    padding: 30px;
    margin-bottom: 18px;
    min-height: 206px;
}

.lto-panel-nopad {
    border: 1px solid #cbcfd4;
    border-radius: 3px;
    padding: 0px;
    margin-bottom: 20px;
    min-height: 185px;
}

.lto-panel-noborder {
    border: none;
    border-radius: 3px;
    padding: 0px;
    margin-bottom: 20px;
    margin-top: 5px;
}

.location-panel {
    border: 1px solid #cbcfd4;
    border-radius: 3px;
    padding: 12px;
}

.location-panel h2 {
    font-size: 28px;
    font-family: 'Roboto Condensed', sans-serif !important;
    font-weight: 300 !important;
    margin-bottom: 15px;
}

.location-panel .row {
    margin-bottom: 15px;
}

.location-name, .location-desc, .dash-temp, .dash-temp-value, .dash-temp-value, .btn-inspect {
    font-family: 'Roboto Condensed', sans-serif !important;
}

.dash-temp-value {
    font-weight: 300 !important;
}

.location-name {
    font-size: 20pt;
}

.location-desc {
    font-size: 14pt;
}

.dash-temp {
    font-size: 14pt;
    color: #485d70;
    margin-right: 5px;
}

.dash-temp-value {
    font-size: 18pt;
}

.btn-inspect {
    font-size: 10pt;
    color: white;
    font-weight: 300 !important;
    padding: 8px 20px 9px 20px;
    border-radius: 2px;
    border: none;
}

.btn-inspect:hover, .btn-inspect:active, .btn-inspect:focus {
    color: white !important;
    cursor: pointer !important;
}

.btn-unpin {
    color: white;
    background-color: #d4d4d4;
    padding: 5px;
    border-radius: 2px;
    font-size: 11px;
    border: none;
}

.btn-unpin:hover {
    background-color: #c2c2c2;
}

.btn-unpin:focus, .btn-unpin:active {
    outline: none;
}

.dash-status-mon, .dash-status-high, .dash-status-low {
    font-size: 14pt;
}

.pe-7s-info, .pe-7s-attention, .pe-7s-close-circle {
    font-size: 12pt;
}

.dash-status-mon, .pe-7s-info {
    color: #7198e6;
}

.dash-status-high, .pe-7s-attention, .dash-status-low, .pe-7s-close-circle {
    color: #e65f5f;
}

.panel-row-2 {
    border-bottom: 1px solid #788595;
    margin: 0;
}

.panel-row-3 {
    margin-bottom: 0 !important;
}

.dash-temp-div {
    padding-top: 15px;
    padding-right: 0;
    padding-left: 0;
}

.chart-summary {
    width: 90% !important;
    height: 50px;
}

.location-dash-chart:hover {
    cursor: pointer;
    opacity: 0.5;
}

.account-stats-container {
    border-bottom: 1px solid #c9dbff;
    padding-bottom: 5px;
    margin-bottom: 20px;
}

.dash-account-stats {
    z-index: 1 !important;
    margin-left: 25px;
}

.dash-account-stats p, .dash-account-stats i {
    display: inline;
    vertical-align: middle;
}

.dash-account-stats i {
    font-size: 15pt;
}

.stats-float {
    display: inline-flex;
}

.stat-number {
    flex-grow: 1;
    text-align: right;
    font-size: 10pt;
    padding-top: 10px;
}

.stat-name {
    font-size: 9pt;
}

@media (max-width: 767px) {
    .stat-name {
        display: none;
    }

    .account-stats-container h1 {
        font-size: 20px;
    }
}

.spin-button-container {
    position: relative;
    display: inline-block;
}

.spin-button-container button[is-loading=true] {
    color: #c4c9ce !important;
}

.button-spinner {
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    cursor: not-allowed;
}
@keyframes lds-ring {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

#allowOneTimeSupport .mat-checkbox-layout {
    white-space: normal !important;
}

#allowOneTimeSupport .mat-checkbox-label {
    line-height: 1.4 !important;
}

@media (max-width: 1150px) {
    .view-all {
        display: none;
    }
}

@media (max-width: 992px) {
    .view-all {
        display: inline-block;
    }
}

@media (max-width: 500px) {
    .view-all {
        /*display: none;*/
    }

    .dashboard h3 {
        font-size: 12px;
    }
}

@media (max-width: 365px) {
    .dashboard .reg-btn {
        /*display: none;*/
    }
}

@media (max-width: 325px) {
    .dashboard .new-btn {
        padding: 5px;
        font-size: 12px;
    }

    .lto-panel {
        padding: 15px;
    }
}

@media (max-width: 1200px) {
    .chart-summary {
        width: 100% !important;
    }
}

@media (max-width: 768px) {
    .dash-status-mon, .dash-status-high, .dash-status-low {
        text-align: right;
    }

    .dash-status-mon, .dash-status-high, .dash-status-low {
        float: right !important;
        margin-bottom: 10px !important;
    }
}

/* Location Areas */
#areaModal .modal-header {
    padding: 20px 20px 10px 20px;
}

#areaModal .modal-title {
    line-height: 0;
}

#areaModal .modal-header .close {
    margin-top: -12px;
}

#areaModal .modal-body {
    overflow-y: scroll;
    margin-bottom: 20px;
    max-height: 60vh;
    min-height: 40vh;
}

.area-readonly {
    width: 215px;
    display: inline-block;
    overflow-y: hidden;
}

@media (min-width: 1241px) {
    #areaModal .modal-dialog {
        width: 55%;
        height: auto;
    }
}

@media (max-width: 1240px) {
    #areaModal .modal-dialog {
        width: 70%;
        height: auto;
    }
}

@media (max-width: 768px) {
    #areaModal .modal-dialog {
        width: 95%;
        height: auto;
    }
}

/* MISC */
.error-text {
    font-style: italic;
    margin-top: 10px;
}

.has-error .form-control, .has-error .form-control:focus {
    box-shadow: none;
    border-color: #76adea;
}

.add-new {
    font-size: 16pt !important;
    margin-left: 10px;
}

.submit-row, .edit-btn-row {
    margin-bottom: 25px;
}

.submit-row form {
    display: inline;
}

.lto-control {
    max-width: 350px;
    display: inline-block;
}

.input-control {
    min-height: 103px;
}

.signup-control {
    min-height: 104px;
}

.timezone-info {
    float: right;
    font-size: 12px;
    color: grey;
}

/* Notification Modal */
.notification-table {
    min-height: 265px;
}

.notification-table .acknowledge {
    color: #ec9406 !important;
}

.notification-table .acknowledge:hover {
    color: #e6a53c !important;
}

.notification-table thead th {
    color: #1f56b1;
    font-size: 12pt;
    background-color: transparent !important;
    border: none !important;
}

.notification-table tbody td {
    color: #758595 !important;
}

#submitticket .k-dialog {
    width: 50%;
}

.form-select {
    width: 100%;
}

.notification-table .k-state-selected {
    background-color: #e65f5f;
}

.notification-table .k-state-selected:hover {
    background-color: #f28989;
}

.notification-table .k-grid tr.k-alt {
    background-color: #f6f6f6 !important;
}

.notification-table .k-grid tr:hover {
    background-color: #fff3f3 !important;
}

.notification-table .k-grid thead tr:hover {
    background-color: transparent !important;
}

.notification-table .k-widget, .notification-table .k-filter-row > th, .notification-table .k-grid-content-locked, .notification-table .k-grid-footer, .notification-table .k-grid-footer-locked, .notification-table .k-grid-footer-wrap, .notification-table .k-grid-header, .notification-table .k-grid-header-locked, .notification-table .k-grid-header-wrap, .notification-table .k-grid td, .notification-table .k-grouping-header, .notification-table .k-grouping-header .k-group-indicator, .notification-table .k-header {
    background-color: transparent !important;
    border: none !important;
    border-color: rgba(0, 0, 0, 0) !important;
}

.notification-table .k-grid-content {
    overflow-y: auto !important;
    border: 1px solid #cacaca;
}

/* Profile Modal */
#profile .k-window.k-dialog {
    width: 95%;
    height: auto;
}

#profile .lto-modal-body .table .bright-cyan {
    min-width: 123px;
}

#profile .user-account-edit label {
    font-size: 18px;
    margin: 0px 0 5px 0;
}

#profile .lto-modal-body .table .cool-grey span {
    font-size: 11pt !important;
}

#profile .lto-modal-body .table strong {
    font-weight: bold;
    font-size: 11pt !important;
}

#profile .lto-modal-body .detail-panel {
    min-height: 404px;
}

#profile .lto-modal-footer {
    padding: 0 15px;
}

#profile .lto-pw {
    margin-bottom: 15px;
}

.table-scroll {
    max-height: 500px;
    overflow: auto;
}

.account-details span, .account-details .bright-cyan {
    font-size: 12pt;
}

@media (max-width: 991px) {
    #profile .k-dialog .edituserbtn {
        margin-top: 20px
    }
}

/* Activation Code Table */
.expired-code {
    opacity: 0.5;
}

.code-red {
    color: #e80909;
}

span.expires-soon-info {
    padding-left: 2em;
}

/* Team Modal */
#admin .k-dialog .orange-btn, #admin .k-dialog .orange-btn:hover, #admin .k-dialog .orange-btn:active, #admin .k-dialog .orange-btn:focus {
    padding: 1px 9px;
    border-radius: 2px;
    margin-bottom: 15px;
    font-size: 10pt !important;
    line-height: 1.4;
}

#admin .k-dialog {
    width: 85%;
    min-height: 90%;
}

#admin .alert-success {
    margin-top: 10px;
}

#admin table a {
    color: #e6a53c;
}

#admin table a:hover {
    color: #ca7d00;
}

.team-btns {
    bottom: 35px;
    position: absolute;
    right: 15px;
}

#emailId, #roleId {
    font-size: 13pt !important;
}

.detail-panel .team-btns {
    margin-top: 10px;
}

.detail-panel .team-btns a {
    font-size: 10pt;
    font-style: italic;
    margin-right: 10px;
}

.team-info {
    margin-top: 80px;
}

.team-info strong {
    font-weight: bold;
}

.user-email-inv p {
    display: inline;
}

.user-email-inv a {
    color: red;
    font-size: 8pt;
    font-style: italic;
}

@media (max-width: 991px) {
    .inv-user-btn {
        margin-top: 10px;
    }
}

@media (max-width: 767px) {
    #roleId {
        margin-top: 10px;
    }
}

.modal-delete-title {
    font-size: 20px;
    color: #ef2d17;
}

/* Join Team */
#jointeam .k-dialog {
    min-width: 4096px;
    text-align: center;
    border-radius: 0px;
    border-top: #0098aa 3px solid;
    border-bottom: #0098aa 3px solid;
}

#jointeam .k-dialog .btn {
    margin-left: 20px;
    padding: 2px 10px;
    line-height: 1.4;
}

@media (max-width: 555px) {
    #jointeam .k-dialog span {
        font-size: 14px !important;
    }

    #jointeam .k-dialog .btn {
        margin-left: 0px !important;
    }
}

/* Shipment Modal*/
#shipmentcreate .k-dialog .lto-modal-body, #shipmentview .k-dialog .lto-modal-body {
    padding: 0px !important;
}

.k-dialog:not(:has(.clear-kendo-label)) label:not(.mdc-floating-label), #shipmentview .k-dialog label:not(.mat-form-field-label):not(.mdc-floating-label) {
    margin-top: 10px;
}

#shipmentcreate .select-editable #shipmentOrigin {
    /*top: 37.5px;*/
}

#shipmentcreate .select-editable #shipmentDestination {
    /*top: 125.5px;*/
}

#shipmentview .select-editable #shipmentOrigin {
    /*top: 30px;*/
}

#shipmentview .select-editable #shipmentDestination {
    /*top: 100px;*/
}

.confirm-popover .popover {
    top: 0 !important;
    left: 0 !important;
}

shipment-view .confirm-popover {
    right: 328px;
}

/* Shipment Profiles Modal */
#shipmentprofiles .k-window.k-dialog {
    width: 95%;
    height: auto;
}

/* Shipment Create Modal */
#shipmentcreate .k-dialog {
    width: 90%;
    height: 90%;
}

/* Shipment Wizard Modal */
#shipmentwizard .k-dialog {
    width: 90%;
    max-width: 720px;
}

.shipment-logger-grid tbody tr {
    cursor: pointer;
}

.shipment-logger-grid tbody tr:hover,
.shipment-logger-grid tbody .k-state-selected {
    background-color: #e6ecff !important;
    font-weight: bold;
}

/* Bulk Shipment Modal */
#bulkshipments .k-window.k-dialog {
    width: 70%;
    height: auto;
}

.group-select .btn {
    color: #656565 !important;
    background-color: #f8f9fa;
    border-color: #f8f9fa;
    font-size: 16px !important;
    font-weight: 400 !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
    line-height: 24px;
}

/* Troubleshooting Records */
.troubleshoot-table {
    border: 1px solid #dddddd !important;
    border-radius: 3px;
    margin-top: 30px;
    min-height: 355px;
    max-height: 482px;
    overflow-y: scroll;
}

.troubleshoot-table table {
    margin-bottom: -1px !important;
}

.troubleshoot-table th {
    font-size: 12pt;
    border-bottom: 1px solid #ddd !important;
}

.troubleshoot-table td {
    color: #1f56b1;
}

.troubleshoot-table a {
    color: #7198e6;
}

.troubleshoot-table a:hover {
    color: #7198e6;
}

.troubleshoot-table .table-striped > tbody > tr:nth-of-type(odd) {
    background-color: #fafafa;
}

.troubleshoot-table .deep-red {
    color: #e65f5f;
}

.troubleshoot-table .deep-red:hover {
    color: #f28989;
}

.environment-label, .record-label, .record-output, .record-header, .record-box, .record-box-entry, .record-sub-header, .record-temp, .record-error {
    font-family: 'Roboto Condensed', sans-serif !important;
}

.create-ts-table {
    border: 1px solid #dddddd !important;
    border-radius: 3px;
    padding: 10px;
    min-height: 355px;
    margin-bottom: 10px;
}

.create-ts-table .environment-label {
    color: #788595;
    font-size: 16pt;
    margin-right: 20px;
}

.create-ts-table .record-label {
    color: #1f56b1;
    font-size: 14pt;
}

.create-ts-table .record-output {
    color: #7198e6;
    font-size: 14pt;
}

.create-ts-table .record-header {
    color: #788595;
    font-size: 12pt;
}

.create-ts-table .record-output {
    color: #1f56b1;
    font-size: 12pt;
}

.create-ts-table .record-box {
    border: 1px solid #dddddd !important;
    border-radius: 3px;
    padding: 5px 10px;
    max-width: 170px;
    display: inline-block;
    margin-bottom: 10px;
    background: #f3f3f3;
}

.create-ts-table .record-box-entry {
    color: #656565;
    font-size: 14pt;
}

.create-ts-table .record-sub-header {
    color: #788595;
    font-style: italic;
    font-size: 11pt;
}

.create-ts-table .record-temp {
    color: #1f56b1;
    font-size: 14pt;
}

.create-ts-table .record-error {
    color: #f28989;
    font-size: 12pt;
}

.create-ts-table .mid-red {
    line-height: 1.5;
    margin-top: -15px;
    display: inline-block;
    font-size: 9pt;
}

.create-ts-table textarea {
    margin-bottom: 0px;
    margin-top: 3px;
}

.create-ts-table #roomtemp {
    max-width: 142px;
}

.create-ts-table input[type=radio] {
    margin: 20px 0;
}

.create-ts-table .form-control {
    border-color: #76adea !important;
}

#switchReportPrimary, #switchReportSecondary, #switchConnEmergency {
    display: inline-block;
}

@media (max-width: 1250px) {
    .create-ts-table h2 {
        font-size: 18px;
    }
}

@media (max-width: 650px) {
    .troubleshoot-table th {
        font-size: 10pt;
    }

    .troubleshoot-table {
        font-size: 8pt;
    }
}

/* Report Tab */
#locationutility .lto-modal, #location .lto-modal, #locationtemp .lto-modal {
    height: 100%;
}

.devices .table-bordered > tbody > tr > td, .devices .table-bordered > thead > tr > th {
    vertical-align: sub !important;
    border: none;
}

.devices .table-bordered > tbody > tr > td, .devices .table-bordered > thead > tr > th {
    border-top: 1px solid #ddd !important;
}

.device-table {
    min-height: 265px;
}

.device-table .device-edit-link {
    color: #1f56b1 !important;
}

.device-table .device-edit-link:hover {
    color: #7198e6 !important;
}

.device-table thead th {
    color: #7198e6;
    font-size: 12pt;
    background-color: transparent !important;
    border: none !important;
}

.device-table tbody td {
    color: #758595 !important;
}

.device-table .k-i-sort-asc-sm, .device-table .k-i-sort-desc-sm {
    color: #70A5ED
}

.device-table .k-state-selected {
    background-color: #e65f5f;
}

.device-table .k-state-selected:hover {
    background-color: #f28989;
}

.device-table .k-grid tr.k-alt {
    background-color: #f6f6f6 !important;
}

.device-table .k-grid tr:hover {
    background-color: #edf3ff !important;
}

.device-table .k-grid thead tr:hover {
    background-color: transparent !important;
}

.devices .k-widget, .devices .k-filter-row > th, .devices .k-grid-content-locked, .devices .k-grid-footer, .devices .k-grid-footer-locked, .devices .k-grid-footer-wrap, .devices .k-grid-header, .devices .k-grid-header-locked, .devices .k-grid-header-wrap, .devices .k-grid td, .devices .k-grouping-header, .devices .k-grouping-header .k-group-indicator, .devices .k-header {
    background-color: transparent !important;
    border: none !important;
    border-color: rgba(0, 0, 0, 0) !important;
}

.device-table .k-grid-content {
    overflow-y: auto !important;
    border: 1px solid #cacaca;
}

#register .k-dialog .lto-control, #deviceedit .k-dialog .lto-control {
    max-width: 100% !important;
}

#deviceedit a {
    font-style: italic;
}

@media (min-width: 1201px) {
    #register .k-dialog, #deviceedit .k-dialog {
        width: 50%;
    }
}

@media (max-width: 1200px) {
    #register .k-dialog, #deviceedit .k-dialog {
        width: 60%;
    }
}

@media (max-width: 470px) {
    #register .k-dialog, #deviceedit .k-dialog {
        width: 98%;
        min-width: 250px;
    }
}

/* Reseller Portal */
#resellercodes .k-dialog {
    width: 60%;
}

#uploadProfileModal .k-dialog {
    width: 50%;
}

.upload-file-snackbar {
    margin-bottom: 90px !important;
}

/* LogTag Drive */
.logtag-drive {
    margin-top: 15px;
}

.logtag-drive .file-limit {
    font-size: 10pt;
    float: right;
    line-height: 3;
}

.logtag-drive .file-limit strong {
    font-weight: bold;
}

.logtag-drive .table-bordered > tbody > tr > td, .logtag-drive .table-bordered > thead > tr > th {
    vertical-align: sub !important;
    border: none;
}

.logtag-drive .table-bordered > tbody > tr > td, .logtag-drive .table-bordered > thead > tr > th {
    border-top: 1px solid #ddd !important;
}

.file-table {
    min-height: 265px;
}

.file-table thead th {
    color: #7198e6;
    font-size: 12pt;
    background-color: transparent !important;
    border: none !important;
}

.file-table tbody td {
    color: #758595 !important;
}

.file-table .k-grid tr.k-alt {
    background-color: #f6f6f6 !important;
}

.file-table .k-grid tr:hover {
    background-color: #edf3ff !important;
}

.file-table .k-grid thead tr:hover {
    background-color: transparent !important;
}

.file-table .k-grid-content {
    overflow-y: auto !important;
    border: 1px solid #cacaca;
}

.logtag-drive .k-widget, .logtag-drive .k-filter-row > th, .logtag-drive .k-grid-content-locked, .logtag-drive .k-grid-footer, .logtag-drive .k-grid-footer-locked, .logtag-drive .k-grid-footer-wrap, .logtag-drive .k-grid-header, .logtag-drive .k-grid-header-locked, .logtag-drive .k-grid-header-wrap, .logtag-drive .k-grid td, .logtag-drive .k-grouping-header, .logtag-drive .k-grouping-header .k-group-indicator, .logtag-drive .k-header {
    background-color: transparent !important;
    border: none !important;
    border-color: rgba(0, 0, 0, 0) !important;
}

.file-table .file-name {
    color: #1f56b1 !important;
}

.file-table .file-name:hover {
    color: #7198e6 !important;
}

.shipment-device-table i {
    color: #1f56b1 !important;
    font-size: 18pt;
    line-height: 1.2;
    font-weight: bold;
}

.file-table i {
    color: #1f56b1 !important;
    font-size: 18pt;
    line-height: 1.2;
    font-weight: bold;
}

.shipment-device-table i:hover {
    color: #7198e6 !important;
}

.file-table i:hover {
    color: #7198e6 !important;
}

.logtag-drive .k-i-sort-asc-sm, .logtag-drive .k-i-sort-desc-sm {
    color: #70A5ED
}

.logtag-drive .k-grid-toolbar {
    display: none;
}

.logtag-drive .dropdown-menu {
    top: -10px;
    left: -172px;
}

.shipment-device-table .dropdown-submenu .dropdown-menu {
    top: -40px !important;
    left: -159px !important;
}

.shipment-device-table .dropdown-submenu .dropdown-menu {
    top: -40px !important;
    left: -159px !important;
}

.logtag-drive .dropdown-submenu .dropdown-menu {
    top: -40px !important;
    left: -159px !important;
}

.logtag-drive .file-name:hover {
    cursor: pointer;
}

.shipment-device-table .dropdown-submenu .dropdown-menu {
    left: -100% !important;
    top: -10px;
}

.logtag-drive .dropdown-submenu .dropdown-menu {
    left: -100% !important;
    top: -10px;
}

.logtag-drive .k-grid td,
.k-grid th {
    overflow: initial !important;
}

.shipment-device-table .k-grid-table td,
.k-grid th {
    overflow: hidden !important;
}

.shipment-device-table .dropdown-submenu[_ngcontent-c2] > a[_ngcontent-c2]:after {
    margin-top: 12px !important;
}

.logtag-drive .dropdown-submenu[_ngcontent-c2] > a[_ngcontent-c2]:after {
    margin-top: 12px !important;
}

.logtag-drive .selected span, .logtag-drive.selected strong {
    color: #9bb8f2 !important;
}

.logtag-drive .selected {
    background-color: #edf2ff;
}

.k-grid-edit-command:not(.mat-menu-item) {
    text-align: left;
    background: transparent;
    color: #000000;
    border: none;
}

.k-grid-edit-command:not(.mat-menu-item):hover {
    background-color: transparent !important;
}

.k-button.k-state-focused.mat-menu-item, .k-button.mat-menu-item:focus {
    box-shadow: none !important;
}

.k-grid-remove-command {
    text-align: left;
    background: white;
    border: none;
}

.k-grid-remove-command:hover {
    background-color: #dee8f7 !important;
}

.logtag-drive .k-grid .k-grid-container {
    min-height: 400px;
}

.table-filter-icon {
    font-size: 22px;
}

.table-filter-input {
    border-top: 0;
    border-right: 0;
    border-left: 0;
    box-shadow: none;
    outline: none;
    font-family: 'Roboto Condensed', sans-serif;
    color: #788595 !important;
    font-size: 22px;
    width: 22rem;
}

.table-filter-input::-webkit-input-placeholder {
    font-style: italic;
    font-family: 'Roboto Condensed', sans-serif;
    color: #788595 !important;
    font-size: 22px;
}

@media (max-width: 650px) {

    .file-table .dropdown-toggle:hover {
        background-color: transparent !important;
    }
}

/* Edit File Modal */
#fileedit .k-dialog .lto-control {
    max-width: 500px;
}

#fileedit a {
    font-style: italic;
}

#fileedit #FileTagsId {
    width: 90% !important;
    display: inline-block !important;
}

#fileedit i {
    font-size: 26pt;
    vertical-align: top;
    line-height: 1.15;
}

#fileedit #NewTag {
    margin-top: 15px;
}

#fileedit #TagId {
    width: 200px;
    display: inline-block !important;
}

@media (max-width: 1200px) {
    #fileedit .k-dialog {
        width: 60%;
    }
}

@media (min-width: 825px) {
    #fileedit #FileTagsId {
        width: 90% !important;
    }
}

@media (max-width: 824px) {
    #fileedit #FileTagsId {
        width: 80% !important;
    }
}

@media (max-width: 470px) {
    #fileedit .k-dialog {
        width: 98%;
        min-width: 250px;
    }
}

@media (min-height: 992px) {
    #fileedit .k-dialog {
        height: 540px !important;
    }
}

@media (max-height: 920px) {
    #fileedit .k-dialog {
        height: 60% !important;
    }
}

@media (max-height: 800px) {
    #fileedit .k-dialog {
        height: 75% !important;
    }
}

@media (max-height: 600px) {
    #fileedit .k-dialog {
        height: 98% !important;
    }
}

@media (max-height: 450px) {
    #fileedit .k-dialog {
        height: 98% !important;
    }
}

/* File Share */
#fileshare .k-dialog .lto-control {
    max-width: 500px;
}

#fileshare span {
    word-wrap: break-word;
    font-size: 8pt;
}

#fileshare .lto-panel {
    padding: 15px;
}

#fileshare .k-dialog .btn {
    border-radius: 2px !important;
    display: block !important;
    margin: 0 auto;
    margin-bottom: 5px;
}

#fileshare .k-dialog {
    width: 80%;
    height: 600px !important;
}

#fileshare .lto-panel {
    min-height: 10px !important;
    margin: 10px 0;
}

#fileshare h1 {
    display: inline;
}

@media (min-width: 1201px) {
    #fileshare .k-dialog {
        width: 36%;
    }
}

@media (max-width: 1200px) {
    #fileshare .k-dialog {
        width: 60%;
    }
}

@media (max-width: 470px) {
    #fileshare .k-dialog {
        width: 98%;
        min-width: 250px;
    }
}

@media (min-height: 992px) {
    #fileshare .k-dialog {
        height: 600px !important;
    }
}

@media (max-height: 991px) {
    #fileshare .k-dialog {
        height: 65% !important;
    }
}

@media (max-height: 920px) {
    #fileshare .k-dialog {
        height: 65% !important;
    }
}

@media (max-height: 800px) {
    #fileshare .k-dialog {
        height: 85% !important;
    }
}

@media (max-height: 600px) {
    #fileshare .k-dialog {
        height: 98% !important;
    }
}

@media (max-height: 450px) {
    #fileshare .k-dialog {
        height: 98% !important;
    }
}

/* Location List */
.locations .location-name, .locations .location-desc, .locations .location-status, .locations .location-status2, .locations .location-device, .locations .location-sernum, .locations .location-lastreading, .locations .btn-inspect {
    font-family: 'Roboto Condensed', sans-serif !important;
}

.log-monitor {
    border: 1px solid #c3dea9;
    background-color: #f4f9e2;
}

.log-warning {
    border: 1px solid #e1a7c0;
    background-color: #ffdfe0;
}

.log-inspection {
    border: 1px solid #e1b19a;
    background-color: #feeac7;
}

.log-pending {
    border: 1px solid #c1c1c1;
    background-color: #f9f9f9;
}

.locations .unpin-loc {
    z-index: 9;
}

.locations .location-panel .pe-7s-check, .locations .location-panel .pe-7s-attention, .locations .location-panel .pe-7s-close-circle {
    font-size: 36pt;
}

.locations .location-panel .row {
    margin-bottom: 0 !important;
}

.locations .location-desc, .locations .location-device, .locations .location-sernum, .locations .location-lastreading {
    font-size: 10pt !important;
}

.locations .location-name {
    font-size: 16pt !important;
}

.locations .location-status, .locations .location-status2 {
    font-size: 13pt !important;
}

.locations .dash-temp-value {
    line-height: 2;
}

.locations {
    line-height: 1.6;
}

.locations .btn-inspect {
    line-height: 3.5;
}

.locations .add-new {
    font-size: 12pt !important;
    margin-left: 10px;
    line-height: 0 !important;
}

.locations .grey-btn {
    color: #788595;
}

.locations .location-overflow {
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    margin-top: 5px;
}

.locations .recylcing-bin-icon {
    font-size: 22pt;
    vertical-align: middle;
}

.locations .location-panel .btn-inspect.red-btn, .locations .location-panel .btn-inspect.green-btn, .locations .location-panel .btn-inspect.orange-btn, .locations .location-panel .btn-inspect.grey-btn, .check-box-control {
    min-height: 116px;
}

.location-detail {
    min-height: 415px !important;
}

.location-archive-text {
    text-align: center;
    font-size: 26px;
}

.locations .location-panel .btn-inspect.unpinned {
    padding-left: 8px !important;
    padding-right: 8px !important;
}

.locations .location-panel .btn-inspect.pinned {
    padding-left: 16px !important;
    padding-right: 16px !important;
}

.tooltip-content {
    font-size: 14px !important;
}

.no-location-tooltip {
    position: relative;
    left: -10px;
    top: -10px;
}

.no-location-tooltip-dash {
    position: absolute;
    top: -15px;
    right: 2px;
}

@media (max-width: 620px) {
    .locations h1 {
        font-size: 30px;
        text-align: center;
    }

    .locations .location-panel .btn-inspect {
        line-height: 2.7;
    }

    .locations .location-panel .location-overflow {
        margin-top: 0;
    }

    .locations .location-panel .text-right {
        text-align: left;
    }

    .location-panel {
        padding: 15px 15px 15px 15px;
    }

    .locations .location-panel .pe-7s-check, .locations .location-panel .pe-7s-attention {
        font-size: 26pt;
    }

    .locations .location-panel .unpinned i, .locations .location-panel .pinned i {
        top: 4px;
    }
}

@media (max-width: 480px) {
    .locations .location-panel {
        padding: 15px 15px 5px 15px;
    }
}

@media (max-width: 430px) {
    .locations .location-panel .location-overflow,
    .locations .location-panel .text-right {
        margin: 0 auto;
        text-align: center;
        float: none;
        overflow: unset;
        white-space: inherit;
    }
}

@media (max-width: 1200px) {
    .locations .location-status, .locations .location-status2 {
        font-size: 11pt !important;
        line-height: 1.9;
    }
}

@media (max-width: 700px) {
    .locations .location-overflow {
        overflow: hidden;
        text-overflow: ellipsis !important;
    }
}

@media (max-width: 520px) {
    .locations .btn-inspect {
        padding: 8px 15px 9px 15px
    }
}

@media (max-width: 650px) {
    .locations h1 {
        font-size: 20px;
    }
}

/* Location Recycling Bin */

/* Location Area Sidebar */
.lto-area-sidebar {
    width: fit-content !important;
    background-color: #edf1f7;
    overflow-y: auto;
    height: calc(100% - 140px);
    margin-top: -30px;
    margin-left: -30px;
}

.lto-area-sidebar h2 {
    margin-bottom: 20px;
    border-bottom: 1px solid #c9dbff;
    font-size: 22px;
    font-weight: 300 !important;
    padding-bottom: 5px;
}

.lto-area-sidebar .k-selected {
    background-color: transparent !important;
    border: none !important;
    color: #7198e6 !important;
}

.lto-area-sidebar .k-state-selected {
    background-color: transparent !important;
    border: none !important;
    color: #7198e6 !important;
}

.lto-area-sidebar .dropdown span {
    cursor: pointer;
}

.lto-area-sidebar span, .lto-area-sidebar ul, .lto-area-sidebar .k-mid, .lto-area-sidebar .k-item, .lto-area-sidebar .k-treeview-item {
    outline: 0 !important;
    box-shadow: none !important;
}

.lto-area-sidebar .k-treeview .k-in, .lto-area-sidebar .dropdown {
    outline: 0;
}

.locations .lto-h1 h1 {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.sidebar-popup i {
    position: fixed;
    top: 45%;
    font-size: 28pt;
    margin-left: 4px;
}

.sidebar-popup i:hover {
    color: #c9dbff !important;
    cursor: pointer;
}

.sidebar-popup .pe-7s-angle-left-circle {
    position: absolute;
    right: 10px;
}

.sidebar-mini {
    width: 95% !important;
    position: absolute;
    z-index: 9;
}

.sidebar-mini .sidebar-popup {
    display: block !important;
}

@media (min-width: 992px) {
    .sidebar-popup {
        display: none;
    }

    .lto-area-sidebar {
        position: fixed;
        display: inherit;
        width: 25%;
    }
}

@media (max-width: 1040px) {
    .sidebar-container h2 {
        font-size: 20px;
    }
}

@media (max-width: 991px) {
    .locations .lto-h1 .text-right {
        text-align: left;
        margin-bottom: 20px;
    }

    .sidebar-popup {
        display: inline-block;
    }

    .sidebar-disable {
        display: none !important;
    }

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

    .lto-area-sidebar {
        display: none;
        width: 100%;
    }

    .right-location-list {
        margin-left: 60px;
    }

    .sidebar-container {
        z-index: 10;
        background-color: #edf1f7;
        position: fixed;
        display: inherit;
        left: 0;
        padding: 37px;
        height: 100%;
        width: 90px;
        margin-top: -30px;
        margin-left: -30px;
    }
}

@media (max-width: 650px) {
    .sidebar-container {
        width: 75px;
    }

    .sidebar-popup i {
        font-size: 28pt;
        margin-left: -4px;
    }

    .right-location-list {
        margin-left: 40px;
    }
}

/* Delete Area Model */
#deleteAreaModal, #errorAreaModal {
    min-width: 383px;
    margin: 0 auto;
}

#deleteAreaModal .lto-modal-header, #errorAreaModal .lto-modal-header {
    background-color: #f28989 !important;
}

#deleteAreaModal .lto-modal-body, #errorAreaModal .lto-modal-body {
    background-color: white;
}

@media (min-width: 992px) {
    #deleteAreaModal, #errorAreaModal {
        width: 40%;
    }
}

@media (max-width: 991px) {
    #deleteAreaModal, #errorAreaModal {
        width: 50%;
    }
}

@media (min-height: 990px) {
    #deleteAreaModal, #errorAreaModal {
        margin-top: 30%;
    }
}

@media (max-height: 989px) {
    #deleteAreaModal, #errorAreaModal {
        margin-top: 25%;
    }
}

@media (max-height: 650px) {
    #deleteAreaModal, #errorAreaModal {
        margin-top: 15%;
    }
}

@media (max-height: 400px) {
    #deleteAreaModal, #errorAreaModal {
        margin-top: 10%;
    }
}

/* Create & Edit Location Modal */
location-settings .confirm-popover {
    right: 60vw;
}

.confirm-popover {
    position: fixed;
    z-index: 1000
}

.confirm-popover .popover-content {
    text-align: center;
    width: 120px;
    transition: opacity 0.15s ease 0s;
}

.confirm-popover .arrow {
    display: none;
}

.notification-modal .subtitle {
    font-size: 12pt;
    display: block;
    margin: 20px 0 5px 0;
}

.notification-modal input[type=checkbox], #locationdetail .notification-modal input[type=radio] {
    display: inline-block;
    vertical-align: middle;
}

.notification-modal .detail-panel {
    min-height: 380px;
}

.edit-location-btns a {
    font-size: 10pt;
    font-style: italic;
    margin-right: 10px;
}

/* Location Modal */
#location .lto-modal-header, #locationdetail .lto-modal-header, #locationutility .lto-modal-header, #locationtemp .lto-modal-header {
    height: 44px;
}

#location .pe-7s-check, #locationutility .pe-7s-check, #locationtemp .pe-7s-check {
    font-size: 20pt;
    font-weight: bold;
    color: green;
    vertical-align: middle;
}

#location .pe-7s-check:hover, #locationutility .pe-7s-check:hover, #locationtemp .pe-7s-check:hover {
    cursor: pointer;
    color: #e6a53c;
}

#location .location-bar-title, #locationdetail .location-bar-title, #locationutility .location-bar-title, #locationtemp .location-bar-title {
    vertical-align: top;
    margin-top: 15px;
    display: inline-block;
    font-size: 10pt;
}

@media (min-width: 1241px) {
    #shipmentview .k-dialog {
        width: 90%;
        height: 95%;
    }
}

@media (max-width: 1240px) {
    #shipmentview .k-dialog {
        width: 90%;
        height: 95%;
    }
}

@media screen and (max-width: 767px) {
    #navbarCollapse li {
        width: 100%;
    }

    #navbarCollapse a {
        width: 100%;
    }
}

@media (min-width: 1241px) {
    #location .k-dialog, #locationdetail .k-dialog, #locationutility .k-dialog, #locationarchived .k-dialog, #locationtemp .k-dialog {
        width: 90%;
        height: 95%;
    }
}

@media (max-width: 1240px) {
    #location .k-dialog, #locationdetail .k-dialog, #locationutility .k-dialog, #locationarchived .k-dialog, #locationtemp .k-dialog {
        width: 90%;
        height: 95%;
    }
}

@media (max-width: 925px) {
    #location .location-bar-title, #locationdetail .location-bar-title, #locationutility .location-bar-title, #locationtemp .location-bar-title {
        /*display: none;*/
    }
}

@media (max-width: 520px) {
    #location .lto-modal-header .nav-tabs > li > a, #locationdetail .lto-modal-header .nav-tabs > li > a, #locationutility .lto-modal-header .nav-tabs > li > a, #locationtemp .lto-modal-header .nav-tabs > li > a {
        font-size: 11pt;
    }

    #location .lto-modal-header, #locationdetail .lto-modal-header, #locationutility .lto-modal-header, #locationtemp .lto-modal-header {
        height: 41px;
    }

    #location .lto-modal-header i, #locationdetail .lto-modal-header i, #locationutility .lto-modal-header i, #locationtemp .lto-modal-header i {
        padding: 2px;
    }
}

@media (max-height: 720px) {
    #location .k-dialog, #locationdetail .k-dialog, #locationutility .k-dialog, #locationarchived .k-dialog, #locationtemp .k-dialog {
        height: 98% !important;
    }
}

/* Temp Log */
#location .templog-table, #locationutility .templog-table {
    margin-top: 22px;
}

#location .templog-table tr th, #locationutility .templog-table tr th {
    color: #7198e6;
    text-align: center;
}

#location .templog-table thead .weekday-selected, #locationutility .templog-table thead .weekday-selected {
    color: #1f56b1;
    font-weight: bold;
}

#location .templog-panel, #locationutility .templog-panel, #locationtemp .templog-panel {
    border: 1px solid #84a6ff;
    border-radius: 3px;
    margin-top: 20px;
    padding: 0;
    min-height: 355px;
}

#location .summary-minmax, #locationutility .summary-minmax, #locationtemp .summary-minmax {
    margin-top: 25px;
}

#location .am-temp-box, #location .pm-temp-box, #locationutility .am-temp-box, #locationutility .pm-temp-box, #locationtemp .am-temp-box, #locationtemp .pm-temp-box {
    height: 60px;
    text-align: center;
    padding-top: 10px;
}

#location .am-temp-box, #locationutility .am-temp-box, #locationtemp .am-temp-box {
    border-top: 1px solid #1f56b1;
    border-bottom: 1px solid #1f56b1;
    border-right: 1px solid #1f56b1;
}

#location .pm-temp-box, #locationutility .pm-temp-box, #locationtemp .pm-temp-box {
    border-top: 1px solid #1f56b1;
    border-bottom: 1px solid #1f56b1;
}

#location .inner-pm-box .small, #location .inner-am-box .small, #locationutility .inner-pm-box .small, #locationutility .inner-am-box .small, #locationtemp .inner-pm-box .small, #locationtemp .inner-am-box .small {
    display: inline-block;
    vertical-align: super;
    margin-top: -10px;
}

#location .inner-pm-box .no-readings, #location .inner-am-box .no-readings, #locationutility .inner-pm-box .no-readings, #locationutility .inner-am-box .no-readings, #locationtemp .inner-pm-box .no-readings, #locationtemp .inner-am-box .no-readings {
    margin-top: 10px;
}

#location .day-selected, #locationutility .day-selected, #locationtemp .day-selected {
    padding: 0 15px 0 15px;
}

#location .pe-7s-download, #locationutility .pe-7s-download {
    font-size: 26pt;
    vertical-align: middle;
}

#location .pe-7s-download:hover, #locationutility .pe-7s-download:hover {
    color: #7198e6;
    cursor: pointer;
}

@media (max-width: 767px) {
    #AMPM {
        display: none;
    }

    #location .pm-temp-box, #locationtemp .pm-temp-box {
        border-top: none;
    }

    #location .am-temp-box, #locationtemp .am-temp-box {
        border-right: none;
    }
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .logtag-drive .dropdown {
        position: absolute;
        margin-top: -15px;
    }
}

.templog-table tr td {
    height: 109px;
    border: 1px solid #ddd;
    padding: 10px 10px 20px 10px !important;
    width: 70px !important;
    -o-transition: all .4s;
    -ms-transition: all .4s;
    -moz-transition: all .4s;
    -webkit-transition: all .4s;
    transition: all .4s;
}

.templog-table tr td:hover {
    cursor: pointer;
}

.templog-table .future-cell:hover {
    cursor: default;
    background-color: white;
}

.templog-right .btn, .templog-right .btn:hover {
    font-size: 10pt;
}

.templog-table .selected {
    background-color: #edf2ff;
}

.templog-table .am-hidden {
    visibility: hidden;
}

.templog-table .selected-alarm {
    background-color: #ffe1e1;
}

.templog-table .today {
    outline: -webkit-focus-ring-color auto 5px;
}

.bordered {
    border: 1px solid #a7afba;
}

.templog-table tr .red-border {
    border: 2px solid #e65f5f !important;
}

.red-border .alarm {
    color: #e65f5f !important;
}

.pm-inspect {
    margin-top: 15px;
}

.summary-minmax {
    font-size: 16px !important;
    color: #1f56b1 !important;
}

.summary-minmax strong {
    font-weight: bold;
}

.day-selected {
    margin-bottom: 10px;
    margin-top: 10px;
}

.greyed {
    color: #cacaca !important;
}

.temp-am-pm {
    text-align: right;
    font-size: 20px;
    color: #1f56b1;
}

.temp-am-pm #AMPM {
    font-weight: bold !important;
    font-size: 9pt !important;
}

.minmax {
    font-size: 10px;
    color: #9bb8f2;
    display: none;
}

.minmax strong {
    font-weight: bold !important;
}

.future-cell span, .future-cell strong {
    color: white !important;
}

@media (max-width: 820px) {
    .temp-am-pm {
        font-size: 14px;
    }
}

/* Chart Modal */
.dygraph-legend {
    top: -35px !important;
    left: 80% !important;
    /* Minimum required for leaflet label */
    z-index: 1000;
}


/* only on the shipment-chart component */
#shipmentChartContent #shipment-map-chart .dygraph-legend-line {
    /* Increases legend line thickness */
    border-width: thick !important;
    /* Rounds the edges to look like a pill */
    border-radius: 25px !important;
}


@media (max-width: 1200px) {
    .dygraph-legend {
        left: 62%!important;
    }
}

@media (max-width: 600px) {
    .dygraph-legend {
        left: 38%!important;
    }
}

.dygraph-xlabel {
    /*margin-top: 40px;*/
}

.chart-btn-panel {
    margin-top: 60px;
}

.chart-btn-panel .green-btn {
    margin-right: 10px;
}

.temp-chart {
    padding: 25px;
    padding-bottom: 50px;
}

.temp-chart h2 {
    margin-bottom: 20px;
}

.temp-chart .k-datepicker, .temp-chart .k-datetimepicker {
    padding-right: 0;
    max-width: 200px;
    /*margin-right: 25px;*/
}

.chart-date-picker-left span, .chart-date-picker-right span {
    color: #788595;
}

.chart-date-picker-left, .chart-date-picker-right {
    margin-bottom: 40px;
}

.chart-date-picker-right {
    display: inline;
}

.chart-date-picker-right .chart-quick-date {
    color: #e6a53c !important;
}

.chart-date-picker-right .chart-quick-date:hover {
    color: #f2bc65 !important;
    cursor: pointer;
}

.k-autocomplete, .k-combobox, .k-dateinput, .k-datepicker, .k-datetimepicker, .k-dropdown, .k-maskedtextbox, .k-multiselect, .k-numerictextbox, .k-timepicker {
    width: 100% !important;
}

.k-autocomplete, .k-combobox .k-dropdown-wrap, .k-dateinput .k-dateinput-wrap, .k-datepicker .k-picker-wrap, .k-datetimepicker .k-picker-wrap, .k-input.k-textbox, .k-multiselect, .k-multiselect-wrap, .k-numerictextbox .k-numeric-wrap, .k-textarea, .k-textbox, .k-timepicker .k-picker-wrap {
    color: #788595;
}

.k-dateinput-wrap .k-input, .k-dropdown-wrap .k-input, .k-multiselect-wrap .k-input, .k-numeric-wrap .k-input, .k-picker-wrap .k-input, .k-picker .k-input-value-text, .k-dateinput .k-input-inner {
    padding: 10px !important;
    height: 100% !important;
}

@media (min-width: 1801px) {
    .temp-chart #LTOTempChartExport {
        width: 1400px !important;
        height: 600px !important;
        display: inline-block
    }
    .temp-chart #LTOTempChart {
        width: 100% !important;
        height: 600px !important;
        display: inline-block
    }

    .temp-chart #LTOLightShockChart {
        width: 100% !important;
        height: 250px !important;
        display: inline-block
    }
}

@media (max-width: 1800px) {
    .temp-chart #LTOTempChartExport {
        width: 1000px !important;
        height: 500px !important;
        display: inline-block
    }
    .temp-chart #LTOTempChart {
        width: 100% !important;
        height: 500px !important;
        display: inline-block
    }
    .temp-chart #LTOLightShockChart {
        width: 100% !important;
        height: 250px !important;
        display: inline-block
    }
}

@media (max-width: 1400px) {
    .temp-chart #LTOTempChartExport {
        width: 900px !important;
        height: 400px !important;
        display: inline-block
    }

    .temp-chart #LTOTempChart {
        width: 100% !important;
        height: 400px !important;
        display: inline-block
    }

    .temp-chart #LTOLightShockChart {
        width: 100% !important;
        height: 200px !important;
        display: inline-block
    }
}

@media (max-width: 1080px) {
    .temp-chart #LTOTempChartExport {
        width: 800px !important;
    }

    .temp-chart #LTOTempChart, #LTOLightShockChart {
        width: 100% !important;
    }
}

@media (max-width: 900px) {
    .temp-chart #LTOTempChartExport {
        width: 600px !important;
    }

    .temp-chart #LTOTempChart, #LTOLightShockChart {
        width: 100% !important;
    }
}

@media (max-width: 680px) {
    .temp-chart #LTOTempChartExport {
        width: 400px !important;
        height: 300px !important
    }

    .temp-chart #LTOTempChart {
        width: 100% !important;
        height: 300px !important
    }

    .temp-chart #LTOLightShockChart {
        width: 100% !important;
        height: 150px !important
    }

    .templog-table tr td {
        text-align: center !important
    }
}

@media (max-width: 597px) {
    .temp-chart .green-btn :not(#signatures-confirm-button) {
        margin-top: 20px !important;
        display: inline-block !important;
    }
}

@media (max-height: 767px) {
    .temp-chart #LTOTempChartExport {
        height: 300px !important
    }

    .temp-chart #LTOTempChart {
        width: 100% !important;
        height: 300px !important
    }

    .temp-chart #LTOLightShockChart {
        width: 100% !important;
        height: 150px !important
    }

    .temp-chart .text-right {
        text-align: center !important;
        margin-bottom: 20px;
        margin-top: -10px;
    }

    .chart-date-picker-left {
        text-align: center !important;
    }
}

@media (max-height: 600px) {
    .temp-chart {
        padding: 20px 25px 0
    }

    .temp-chart h2 {
        margin-bottom: 10px
    }

    .temp-chart #LTOTempChart, #LTOTempChartExport {
        height: 200px !important
    }

    .temp-chart #LTOLightShockChart {
        width: 100% !important;
        height: 150px !important
    }
}

.temp-chart .btn {
    vertical-align: baseline !important;
    line-height: 1.5;
    font-size: 12pt;
    color: white;
    font-weight: 300 !important;
}

.temp-chart .btn:hover, .temp-chart .btn:focus, .temp-chart .btn:active {
    font-size: 12pt !important;
}

.temp-chart .btn {
    border-radius: 2px !important;
}

.loading {
    position: fixed;
    z-index: 10005;
    height: 2em;
    width: 2em;
    overflow: show;
    margin: auto;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    padding-top: 300px;
    margin-top: 40px;
}

.loading:before {
    content: '';
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.5);
}

.spinner {
    z-index: 999;
    font-size: 80px;
    width: 1em;
    height: 1em;
    position: relative;
    margin: 100px auto;
    border-radius: 50%;
    list-style: none;
}

.spinner li {
    position: absolute;
    width: .2em;
    height: .2em;
    border-radius: 50%;
}

.spinner li:nth-child(1) {
    left: 50%;
    top: 0;
    margin: 0 0 0 -.1em;
    background: #7198e6;
    -webkit-transform-origin: 50% 250%;
    -moz-transform-origin: 50% 250%;
    -ms-transform-origin: 50% 250%;
    -o-transform-origin: 50% 250%;
    transform-origin: 50% 250%;
    -webkit-animation: rota 1.13s linear infinite, opa 3.67s ease-in-out infinite alternate;
    -moz-animation: rota 1.13s linear infinite, opa 3.67s ease-in-out infinite alternate;
    -ms-animation: rota 1.13s linear infinite, opa 3.67s ease-in-out infinite alternate;
    -o-animation: rota 1.13s linear infinite, opa 3.67s ease-in-out infinite alternate;
    animation: rota 1.13s linear infinite, opa 3.67s ease-in-out infinite alternate;
}

.spinner li:nth-child(2) {
    top: 50%;
    right: 0;
    margin: -.1em 0 0 0;
    background: #92c46d;
    -webkit-transform-origin: -150% 50%;
    -moz-transform-origin: -150% 50%;
    -ms-transform-origin: -150% 50%;
    -o-transform-origin: -150% 50%;
    transform-origin: -150% 50%;
    -webkit-animation: rota 1.86s linear infinite, opa 4.29s ease-in-out infinite alternate;
    -moz-animation: rota 1.86s linear infinite, opa 4.29s ease-in-out infinite alternate;
    -ms-animation: rota 1.86s linear infinite, opa 4.29s ease-in-out infinite alternate;
    -o-animation: rota 1.86s linear infinite, opa 4.29s ease-in-out infinite alternate;
    animation: rota 1.86s linear infinite, opa 4.29s ease-in-out infinite alternate;
}

.spinner li:nth-child(3) {
    left: 50%;
    bottom: 0;
    margin: 0 0 0 -.1em;
    background: #e6a53c;
    -webkit-transform-origin: 50% -150%;
    -moz-transform-origin: 50% -150%;
    -ms-transform-origin: 50% -150%;
    -o-transform-origin: 50% -150%;
    transform-origin: 50% -150%;
    -webkit-animation: rota 1.45s linear infinite, opa 5.12s ease-in-out infinite alternate;
    -moz-animation: rota 1.45s linear infinite, opa 5.12s ease-in-out infinite alternate;
    -ms-animation: rota 1.45s linear infinite, opa 5.12s ease-in-out infinite alternate;
    -o-animation: rota 1.45s linear infinite, opa 5.12s ease-in-out infinite alternate;
    animation: rota 1.45s linear infinite, opa 5.12s ease-in-out infinite alternate;
}

.spinner li:nth-child(4) {
    top: 50%;
    left: 0;
    margin: -.1em 0 0 0;
    background: #e65f5f;
    -webkit-transform-origin: 250% 50%;
    -moz-transform-origin: 250% 50%;
    -ms-transform-origin: 250% 50%;
    -o-transform-origin: 250% 50%;
    transform-origin: 250% 50%;
    -webkit-animation: rota 1.72s linear infinite, opa 5.25s ease-in-out infinite alternate;
    -moz-animation: rota 1.72s linear infinite, opa 5.25s ease-in-out infinite alternate;
    -ms-animation: rota 1.72s linear infinite, opa 5.25s ease-in-out infinite alternate;
    -o-animation: rota 1.72s linear infinite, opa 5.25s ease-in-out infinite alternate;
    animation: rota 1.72s linear infinite, opa 5.25s ease-in-out infinite alternate;
}

@-webkit-keyframes rota {
    to {
        -webkit-transform: rotate(360deg);
    }
}

@-moz-keyframes rota {
    to {
        -moz-transform: rotate(360deg);
    }
}

@-ms-keyframes rota {
    to {
        -ms-transform: rotate(360deg);
    }
}

@-o-keyframes rota {
    to {
        -o-transform: rotate(360deg);
    }
}

@keyframes rota {
    to {
        transform: rotate(360deg);
    }
}

@-webkit-keyframes opa {
    12.0% {
        opacity: 0.80;
    }

    19.5% {
        opacity: 0.88;
    }

    37.2% {
        opacity: 0.64;
    }

    40.5% {
        opacity: 0.52;
    }

    52.7% {
        opacity: 0.69;
    }

    60.2% {
        opacity: 0.60;
    }

    66.6% {
        opacity: 0.52;
    }

    70.0% {
        opacity: 0.63;
    }

    79.9% {
        opacity: 0.60;
    }

    84.2% {
        opacity: 0.75;
    }

    91.0% {
        opacity: 0.87;
    }
}

@-moz-keyframes opa {
    12.0% {
        opacity: 0.80;
    }

    19.5% {
        opacity: 0.88;
    }

    37.2% {
        opacity: 0.64;
    }

    40.5% {
        opacity: 0.52;
    }

    52.7% {
        opacity: 0.69;
    }

    60.2% {
        opacity: 0.60;
    }

    66.6% {
        opacity: 0.52;
    }

    70.0% {
        opacity: 0.63;
    }

    79.9% {
        opacity: 0.60;
    }

    84.2% {
        opacity: 0.75;
    }

    91.0% {
        opacity: 0.87;
    }
}

@-ms-keyframes opa {
    12.0% {
        opacity: 0.80;
    }

    19.5% {
        opacity: 0.88;
    }

    37.2% {
        opacity: 0.64;
    }

    40.5% {
        opacity: 0.52;
    }

    52.7% {
        opacity: 0.69;
    }

    60.2% {
        opacity: 0.60;
    }

    66.6% {
        opacity: 0.52;
    }

    70.0% {
        opacity: 0.63;
    }

    79.9% {
        opacity: 0.60;
    }

    84.2% {
        opacity: 0.75;
    }

    91.0% {
        opacity: 0.87;
    }
}

@-o-keyframes opa {
    12.0% {
        opacity: 0.80;
    }

    19.5% {
        opacity: 0.88;
    }

    37.2% {
        opacity: 0.64;
    }

    40.5% {
        opacity: 0.52;
    }

    52.7% {
        opacity: 0.69;
    }

    60.2% {
        opacity: 0.60;
    }

    66.6% {
        opacity: 0.52;
    }

    70.0% {
        opacity: 0.63;
    }

    79.9% {
        opacity: 0.60;
    }

    84.2% {
        opacity: 0.75;
    }

    91.0% {
        opacity: 0.87;
    }
}

@keyframes opa {
    12.0% {
        opacity: 0.80;
    }

    19.5% {
        opacity: 0.88;
    }

    37.2% {
        opacity: 0.64;
    }

    40.5% {
        opacity: 0.52;
    }

    52.7% {
        opacity: 0.69;
    }

    60.2% {
        opacity: 0.60;
    }

    66.6% {
        opacity: 0.52;
    }

    70.0% {
        opacity: 0.63;
    }

    79.9% {
        opacity: 0.60;
    }

    84.2% {
        opacity: 0.75;
    }

    91.0% {
        opacity: 0.87;
    }
}

/*tree view*/
.k-treeview {
    width: 100%;
    overflow: visible !important;
}

.k-in {
    display: block !important;
}

/*Solving datapicker deformation on Edge 44.17763.1.0 edition*/
.k-calendar table.k-calendar-weekdays {
    table-layout: auto;
}

.k-grid tr.isAlert {
    background-color: #ffdfe0 !important;
}

.k-grid tr.undelivered {
    background-color: #ffdfe0 !important;
}

.k-grid tr.isAlert:hover {
    background-color: rgba(0, 0, 0, 0.10) !important;
}

.k-grid tr.undelivered:hover {
    background-color: rgba(0, 0, 0, 0.10) !important;
}

.k-grid tr.Suspended {
    opacity: 0.5;
}

.dygraph-rangesel-fgcanvas {
    visibility: hidden;
}

.dygraph-rangesel-bgcanvas {
    visibility: hidden;
}

.dygraph-rangesel-zoomhandle {
    visibility: hidden !important;
}

.annotation {
    font-size: 12px !important;
}

.k-button.k-bare.k-time-now {
    display: none;
}

.shipment-device-table .check-box-column {
    vertical-align: bottom;
    padding-left: 20px;
}

.shipment-device-table tr td:last-child {
    overflow: visible !important;
}

kendo-pager {
    overflow: auto !important;
}

.theme-warn-color {
    color: #f44336 !important;
}

.theme-warn-background-color {
    background-color: #f44336 !important;
}

.mat-snack-bar-container {
    background: #84a6ff !important;
}

.mat-snack-bar-container .mat-simple-snackbar {
    color: black;
}

.mat-snack-bar-container .mat-button {
    color: #1F56B1;
}

.k-window-titlebar {
    background-color: #84a6ff;
}

.open>.mobile-notification-dropdown {
    display: inline-block;
    position: static;
}

@media (max-width: 767px) {
    #mobile-notification {
        display: flex;
        flex-direction: column;
        background-color: whitesmoke;
        width: 100%;
        border: solid 2px #cbcfd4;
        min-height: 30px;
    }

    .hide-for-mobile {
        display: none !important;
    }
}

@media (min-width: 768px) {
    #mobile-notification {
        display: none;
    }
}

.mat-elevation-z8 .mat-drawer-inner-container {
    overflow: hidden;
}

/* bootstrap 3 doesn't have support natively*/
.row-no-gutters {
    margin-right: 0;
    margin-left: 0;
}
.row-no-gutters > [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
}

/* Overriding Kendo CSS */
.k-grid-norecords {
    text-align: left;
}

.k-pager-numbers .k-button {
    background-color: transparent;
    color: #1f56b1;
}
.k-pager-numbers .k-button:hover {
    background-color: #7198e6 !important;
    color: white;
}

.k-pager-numbers .k-selected {
    background-color: #1f56b1 !important;
    color: white;
}

.k-pager-numbers .k-selected:hover {
    background-color: #7198e6 !important;
}

.k-pager-numbers .k-state-selected {
    background-color: #1f56b1 !important;
    color: white;
}

.k-pager-numbers .k-state-selected:hover {
    background-color: #7198e6 !important;
}

.k-grid td.k-state-selected,
.k-grid tr.k-state-selected>td {
    background-color: unset;
}

/* This is clunky but apparently ::ng-deep is deprecated and there doesn't seem to be another workaround at the moment so can't put it in the component css file*/
#map-device-option .mat-form-field-label-wrapper .mat-form-field-label {
    margin-top: 0em;
}

@media (max-width: 991px){
    /* Made chart image for PDF smaller on small screen sizes (< 991px)  - to reduce memory usage on mobile */
    #LTOTempChartExport, #LTOLightShockChart{
        max-width:700px;
        max-height:300px;
    }
}

.contextHelpIsOpen kendo-dialog {
    max-width: calc(100vw - 450px);
}

.contextHelpIsOpen kendo-dialog .k-overlay {
    max-width: calc(100vw - 450px);
}
.contextHelpIsOpen {
    overflow: hidden;
}
.contextHelpIsOpen .sidenav_container{
    top: 0;
}

@media only screen and (max-width: 767px) {
    .contextHelpIsOpen kendo-dialog {
        visibility: hidden;
    }
    .contextHelpIsOpen kendo-dialog .k-overlay {
        visibility: hidden;
    }
    .contextHelpIsOpen .sidenav_container {
        width: 100vw;
    }
}

/*  show popup nav bar by default when help is shown - due to space issues  */
.contextHelpIsOpen .lto-modal-header .navbar-collapse {
    border: none !important;
    box-shadow: none !important;
    overflow-y: hidden !important;
    overflow-x: hidden !important;
    border-radius: 0;
    margin: 0 !important;
}

.contextHelpIsOpen .lto-modal-header .navbar-toggle {
    display: unset;
}

.contextHelpIsOpen .lto-modal-header .navbar-collapse.collapse {
    width: auto;
    display: none!important;
    height: auto!important;
    overflow: hidden !important;
}

.contextHelpIsOpen .lto-modal-header .navbar-collapse.collapse.in {
    display:block !important;
}

.contextHelpIsOpen .lto-modal-header .navbar-header {
    float: none;
}

.contextHelpIsOpen .lto-modal-header li {
    width: 100%;
}

.contextHelpIsOpen .lto-modal-header .collapse a {
    width: 100%;
}

.mat-icon {
    overflow: visible !important;
}

button.no-icon-button-hover-ripple[mat-icon-button]:hover > .mat-mdc-button-persistent-ripple.mdc-icon-button__ripple {
    opacity: 0 !important;
}

/* Safari only fix targeted at Edit Location button placement */
@supports (background: -webkit-named-image(i)) {
    .edit-location-btns { margin-top: 50px !important; }
}