/* DSE visual level-up layer for the customer portal. */

:root {
    --dse-v-page: #f4f7fb;
    --dse-v-surface: #ffffff;
    --dse-v-surface-soft: #f8fafc;
    --dse-v-ink: #0f172a;
    --dse-v-muted: #526173;
    --dse-v-border: #d7e0ea;
    --dse-v-border-strong: #b8c6d7;
    --dse-v-blue: #2563eb;
    --dse-v-teal: #0f9f9a;
    --dse-v-green: #0f8f5f;
    --dse-v-amber: #b7791f;
    --dse-v-red: #c2413b;
    --dse-v-radius: 8px;
    --dse-v-radius-lg: 8px;
    --dse-v-shadow: 0 18px 44px rgba(15, 23, 42, .10);
    --dse-v-shell: 1320px;
    --dse-v-gutter: clamp(14px, 3vw, 32px);
    --dse-v-control: 42px;
}

html {
    min-width: 0 !important;
    background: var(--dse-v-page) !important;
    color: var(--dse-v-ink) !important;
    -webkit-text-size-adjust: 100%;
}

body {
    min-width: 0 !important;
    background: linear-gradient(180deg, #f8fafc 0%, var(--dse-v-page) 44%, #eef3f8 100%) !important;
    color: var(--dse-v-ink) !important;
    font-family: Arial, Helvetica, sans-serif !important;
    line-height: 1.45 !important;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

img,
svg,
video,
canvas,
iframe {
    max-width: 100%;
}

a {
    text-underline-offset: 3px;
}

#container {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    background: transparent !important;
}

.dse-helpdesk-top,
.dse-helpdesk-nav-wrap,
#content,
#footer {
    width: min(100%, var(--dse-v-shell)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: var(--dse-v-gutter) !important;
    padding-right: var(--dse-v-gutter) !important;
}

.dse-helpdesk-top {
    padding-top: 18px !important;
}

.dse-helpdesk-shell,
.dse-helpdesk-header {
    width: 100% !important;
    min-width: 0 !important;
}

.dse-helpdesk-header {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(220px, auto) !important;
    gap: 18px !important;
    align-items: center !important;
    min-height: 0 !important;
    padding: 18px !important;
    border: 1px solid rgba(255, 255, 255, .14) !important;
    border-radius: var(--dse-v-radius-lg) !important;
    background: #111827 !important;
    color: #ffffff !important;
    box-shadow: var(--dse-v-shadow) !important;
}

.dse-helpdesk-brand,
.dse-helpdesk-account {
    min-width: 0 !important;
}

.dse-helpdesk-brand {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) !important;
    gap: 14px !important;
    align-items: center !important;
}

.dse-helpdesk-brand #logo {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: clamp(96px, 15vw, 154px) !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 8px !important;
    border-radius: var(--dse-v-radius) !important;
    background: #ffffff !important;
}

.dse-helpdesk-brand #logo img {
    width: 100% !important;
    height: auto !important;
    max-height: 54px !important;
    object-fit: contain !important;
}

.dse-helpdesk-brand-text strong,
.dse-helpdesk-brand-text span,
.dse-helpdesk-account,
.dse-helpdesk-account p {
    overflow-wrap: anywhere !important;
}

.dse-helpdesk-brand-text strong {
    display: block !important;
    color: #ffffff !important;
    font-size: 23px !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
    line-height: 1.12 !important;
}

.dse-helpdesk-brand-text span,
.dse-helpdesk-account,
.dse-helpdesk-account a {
    color: #dbeafe !important;
}

.dse-helpdesk-account {
    justify-self: end !important;
    text-align: right !important;
    font-size: 13px !important;
    font-weight: 700 !important;
}

.dse-helpdesk-account p {
    margin: 0 !important;
}

.dse-helpdesk-account a,
.dse-helpdesk-signin {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 34px !important;
    margin: 3px 0 3px 6px !important;
    padding: 7px 10px !important;
    border-radius: var(--dse-v-radius) !important;
    background: rgba(255, 255, 255, .10) !important;
    color: #ffffff !important;
    line-height: 1.15 !important;
    text-decoration: none !important;
}

.dse-helpdesk-nav-wrap {
    display: grid !important;
    gap: 12px !important;
    padding-top: 14px !important;
    padding-bottom: 18px !important;
}

ul#nav.dse-helpdesk-nav,
.dse-helpdesk-nav {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

ul#nav.dse-helpdesk-nav li {
    display: flex !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

ul#nav.dse-helpdesk-nav a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: var(--dse-v-control) !important;
    padding: 10px 14px !important;
    border: 1px solid var(--dse-v-border) !important;
    border-radius: var(--dse-v-radius) !important;
    background: var(--dse-v-surface) !important;
    color: var(--dse-v-ink) !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    line-height: 1.15 !important;
    text-align: center !important;
    text-decoration: none !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    box-shadow: 0 6px 18px rgba(15, 23, 42, .06) !important;
}

ul#nav.dse-helpdesk-nav a:hover,
ul#nav.dse-helpdesk-nav a:focus,
ul#nav.dse-helpdesk-nav a.active {
    border-color: #9fb6d8 !important;
    background: #eaf2ff !important;
    color: #1646a3 !important;
    outline: none !important;
}

.dse-client-command-bar {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)) !important;
    gap: 10px !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 10px !important;
    border: 1px solid var(--dse-v-border) !important;
    border-radius: var(--dse-v-radius-lg) !important;
    background: rgba(255, 255, 255, .88) !important;
    box-shadow: 0 12px 32px rgba(15, 23, 42, .08) !important;
}

.dse-client-command-bar a {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    min-width: 0 !important;
    min-height: 64px !important;
    padding: 13px 14px !important;
    border: 1px solid #d8e5f7 !important;
    border-radius: var(--dse-v-radius) !important;
    background: var(--dse-v-surface) !important;
    color: var(--dse-v-ink) !important;
    text-decoration: none !important;
}

.dse-client-command-bar a:hover,
.dse-client-command-bar a:focus {
    border-color: #9fc2f3 !important;
    background: #f1f7ff !important;
    outline: none !important;
}

.dse-client-command-bar strong,
.dse-client-command-bar span {
    display: block !important;
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
}

.dse-client-command-bar strong {
    color: var(--dse-v-ink) !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    line-height: 1.15 !important;
}

.dse-client-command-bar span {
    margin-top: 5px !important;
    color: var(--dse-v-muted) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
}

#content {
    min-width: 0 !important;
    padding-top: 8px !important;
    padding-bottom: 92px !important;
    background: transparent !important;
    color: var(--dse-v-ink) !important;
    overflow: visible !important;
}

#content > h1,
#content > h2,
#content .headline,
#content .header,
#content .page-title {
    max-width: 100% !important;
    margin: 0 0 18px !important;
    color: var(--dse-v-ink) !important;
    font-size: 32px !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
    line-height: 1.12 !important;
    overflow-wrap: anywhere !important;
}

#content > p,
#content .info,
#content .tip,
#content .faded,
#content .hint,
#content .thread-body {
    color: var(--dse-v-muted) !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
}

#content .buttons,
#content .pull-right,
#content .flush-right {
    max-width: 100% !important;
}

#content .button,
#content button,
#content input[type="button"],
#content input[type="submit"],
#content input[type="reset"],
#content a.button,
#content .action-button {
    max-width: 100% !important;
    min-height: var(--dse-v-control) !important;
    padding: 10px 14px !important;
    border-radius: var(--dse-v-radius) !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    line-height: 1.15 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
}

#content input,
#content select,
#content textarea,
#content .select2-container,
#content .redactor-box,
#content .redactor-editor,
#content .richtext {
    max-width: 100% !important;
}

#content input[type="text"],
#content input[type="email"],
#content input[type="password"],
#content input[type="search"],
#content input[type="tel"],
#content input[type="url"],
#content input[type="number"],
#content select,
#content textarea {
    min-height: var(--dse-v-control) !important;
    border: 1px solid var(--dse-v-border-strong) !important;
    border-radius: var(--dse-v-radius) !important;
    background: var(--dse-v-surface) !important;
    color: var(--dse-v-ink) !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
}

#content textarea,
#content .redactor-editor,
#content .richtext {
    min-height: 128px !important;
}

#content input:focus,
#content select:focus,
#content textarea:focus,
#content .select2-container--focus .select2-selection {
    border-color: #7ea8eb !important;
    outline: 3px solid rgba(37, 99, 235, .18) !important;
    outline-offset: 1px !important;
}

#content label,
#content .label,
#content th {
    color: #1f2a3a !important;
    font-weight: 900 !important;
}

#content form,
#content .form,
#content .dynamic-forms,
#content #ticketForm,
#content #login,
#content #clientLogin,
#content .profile,
#content .account,
#content .module,
#content .faq-content,
#content .kb-entry,
#content .thread-entry,
#content .thread-event,
#content .ticket-view,
#content .dse-client-upgrade-tools {
    max-width: 100% !important;
    border-color: var(--dse-v-border) !important;
    border-radius: var(--dse-v-radius-lg) !important;
}

#content .row,
#content .form-row,
#content .field,
#content .required,
#content .optional,
#content .inline,
#content .split,
#content .dse-open-grid,
#content .dse-login-grid,
#content .dse-profile-grid {
    min-width: 0 !important;
}

#content table {
    width: 100% !important;
    max-width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

#content > table,
#content .ticket_info table,
#content table.list,
#content table.grid,
#content table.tickets,
#content table.thread {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    border: 1px solid var(--dse-v-border) !important;
    border-radius: var(--dse-v-radius-lg) !important;
    background: var(--dse-v-surface) !important;
    box-shadow: 0 10px 28px rgba(15, 23, 42, .06) !important;
}

#content table.list,
#content table.grid,
#content table.tickets {
    min-width: min(760px, 100%) !important;
}

#content table th,
#content table td {
    min-width: 0 !important;
    padding: 11px 12px !important;
    border-color: #e4ebf3 !important;
    color: #1f2a3a !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
    overflow-wrap: anywhere !important;
    white-space: normal !important;
    vertical-align: top !important;
}

#content table th {
    background: #f4f7fb !important;
}

#content table tr:nth-child(even) td {
    background: #fbfdff !important;
}

#content table a {
    font-weight: 900 !important;
}

#msg_error,
#msg_notice,
#msg_warning,
.error_bar,
.warning_bar,
.notice_bar {
    width: min(calc(100% - (var(--dse-v-gutter) * 2)), var(--dse-v-shell)) !important;
    margin: 12px auto !important;
    padding: 13px 16px !important;
    border-radius: var(--dse-v-radius) !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    line-height: 1.35 !important;
    overflow-wrap: anywhere !important;
}

#msg_error,
.error_bar {
    border: 1px solid #f0b8b4 !important;
    background: #fff1f1 !important;
    color: #8e1f1b !important;
}

#msg_warning,
.warning_bar {
    border: 1px solid #eccb8f !important;
    background: #fff7e8 !important;
    color: #7a4b08 !important;
}

#msg_notice,
.notice_bar {
    border: 1px solid #b9d8be !important;
    background: #effaf1 !important;
    color: #17623c !important;
}

.thread-entry,
.thread-event,
.message,
.response,
.note,
.faq-content,
.kb-entry {
    overflow-wrap: anywhere !important;
}

.thread-entry img,
.thread-event img,
.message img,
.response img,
.faq-content img,
.kb-entry img {
    height: auto !important;
    border-radius: var(--dse-v-radius) !important;
}

.select2-container {
    min-width: 0 !important;
}

.select2-container .select2-selection {
    min-height: var(--dse-v-control) !important;
    border-color: var(--dse-v-border-strong) !important;
    border-radius: var(--dse-v-radius) !important;
}

.select2-dropdown {
    border-color: var(--dse-v-border-strong) !important;
    border-radius: var(--dse-v-radius) !important;
}

#footer {
    color: var(--dse-v-muted) !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
    text-align: center !important;
}

#overlay,
#loading,
#popup,
#alert {
    max-width: 100vw !important;
}

.dialog,
#popup,
#alert {
    width: min(680px, calc(100vw - 28px)) !important;
    max-width: calc(100vw - 28px) !important;
    border-radius: var(--dse-v-radius-lg) !important;
}

@media (max-width: 980px) {
    .dse-helpdesk-header {
        grid-template-columns: 1fr !important;
    }

    .dse-helpdesk-account {
        justify-self: stretch !important;
        text-align: left !important;
    }

    ul#nav.dse-helpdesk-nav {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        padding-bottom: 2px !important;
        -webkit-overflow-scrolling: touch !important;
    }

    ul#nav.dse-helpdesk-nav li {
        flex: 0 0 auto !important;
    }

    ul#nav.dse-helpdesk-nav a {
        min-width: 132px !important;
    }
}

@media (max-width: 720px) {
    :root {
        --dse-v-gutter: 12px;
    }

    .dse-helpdesk-top,
    .dse-helpdesk-nav-wrap,
    #content,
    #footer {
        padding-left: var(--dse-v-gutter) !important;
        padding-right: var(--dse-v-gutter) !important;
    }

    .dse-helpdesk-header {
        padding: 14px !important;
    }

    .dse-helpdesk-brand {
        grid-template-columns: 1fr !important;
    }

    .dse-helpdesk-brand #logo {
        width: min(150px, 100%) !important;
    }

    .dse-client-command-bar {
        grid-template-columns: 1fr !important;
    }

    #content > h1,
    #content > h2,
    #content .headline,
    #content .header,
    #content .page-title {
        font-size: 24px !important;
    }

    #content .buttons,
    #content .pull-right,
    #content .flush-right {
        float: none !important;
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        justify-content: flex-start !important;
    }

    #content .button,
    #content button,
    #content input[type="button"],
    #content input[type="submit"],
    #content input[type="reset"],
    #content a.button {
        width: auto !important;
        min-width: min(160px, 100%) !important;
    }

    #content input[type="text"],
    #content input[type="email"],
    #content input[type="password"],
    #content input[type="search"],
    #content input[type="tel"],
    #content input[type="url"],
    #content input[type="number"],
    #content select,
    #content textarea,
    #content .select2-container {
        width: 100% !important;
    }
}

@media (max-width: 480px) {
    .dse-helpdesk-header,
    .dse-client-command-bar,
    #content > table,
    #content .ticket_info table,
    #content table.list,
    #content table.grid,
    #content table.tickets,
    #content table.thread {
        border-radius: var(--dse-v-radius) !important;
    }

    ul#nav.dse-helpdesk-nav a {
        min-width: 118px !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
}