/*
This file should only be used by hesk clients to apply any custom overwrites to core files,
and ensure these changes are included in the bundled css.

Please only change this file if you know what you are doing.
Any general thematic changes should rather be done as part of /theme changes of theme_overrides.css
*/
:root {
    --primary: #0b3a67;
    --secondary: #1f7ae0;
    --tertiary: #2ec4b6;
    --surface: #ffffff;
    --foreground: #1a1a1a;
    --main-background: #f4f6f8;
    --font__pri-clr: #1a1a1a;
    --font__sec-clr: #4f6479;
    --header__bg: #0b3a67;
    --header_border__clr: rgba(255, 255, 255, 0.12);
    --header_logo__clr: #ffffff;
    --header_nav__clr: rgba(255, 255, 255, 0.92);
    --header_nav__hover_clr: #2ec4b6;
    --header_profile__user-avatar-bg: #1f7ae0;
    --link__pri-clr: #1f7ae0;
    --link__pri-hover-clr: #0b3a67;
    --link__sec-clr: #2ec4b6;
    --link__sec-hover-clr: #0b3a67;
    --breadcrumbs__a-clr: #1f7ae0;
    --breadcrumbs__a-hover-clr: #0b3a67;
    --search__bg: rgba(255, 255, 255, 0.76);
    --search__title-clr: #ffffff;
    --search__clr: #1a1a1a;
    --search__icon-fill: #1f7ae0;
    --search__input-bg: rgba(255, 255, 255, 0.96);
    --search__input-placeholder-clr: #6a7d91;
    --input-bg: #f9fbfd;
    --input-clr: #1a1a1a;
    --btn__bg-clr-pri: #1f7ae0;
    --btn__clr-pri: #ffffff;
    --btn__border-clr-pri: #0b3a67;
    --dropdown__border-clr: rgba(11, 58, 103, 0.16);
    --dropdown_ver2__border-clr: rgba(11, 58, 103, 0.16);
    --dropdown__hover-bg: #0b3a67;
    --dropdown__hover-clr: #ffffff;
    --table_row__bg: #f8fbfd;
    --table_row__bg-even: #eef5fb;
    --table_row__bg-hover: #ffffff;
    --ticket_body__bg: rgba(255, 255, 255, 0.96);
    --ticket_response__bg: #f7fcfb;
    --footer__link-clr: #1f7ae0;
    --shadow-1-hsla: 211, 81%, 23%;
}

html,
body {
    min-height: 100%;
}

body.cust-help {
    background:
        linear-gradient(180deg, rgba(6, 21, 42, 0.92) 0, rgba(11, 58, 103, 0.84) 220px, rgba(244, 246, 248, 0.98) 520px),
        url("../img/brand-network-bg.jpg") top center / cover no-repeat fixed;
    color: var(--font__pri-clr);
}

.cust-help .wrapper {
    background: transparent;
}

.cust-help .main {
    padding-bottom: 32px;
}

.cust-help .header {
    position: sticky;
    top: 0;
    z-index: 40;
    background:
        linear-gradient(90deg, rgba(11, 58, 103, 0.97), rgba(12, 52, 90, 0.94)),
        var(--header__bg);
    border-bottom: 1px solid var(--header_border__clr);
    box-shadow: 0 18px 40px rgba(7, 31, 56, 0.18);
    backdrop-filter: blur(10px);
}

.cust-help .header__inner {
    padding: 18px 0;
}

.cust-help .header__logo {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.cust-help .header__inner .header__nav .nav-item,
.cust-help .header__inner .header__nav .nav-item a,
.cust-help .header .dropdown-select .label {
    font-weight: 700;
    letter-spacing: 0.02em;
}

.cust-help .breadcrumbs {
    background: rgba(255, 255, 255, 0.88);
    border-bottom: 1px solid rgba(11, 58, 103, 0.08);
    backdrop-filter: blur(8px);
}

.cust-help .breadcrumbs__inner {
    padding: 14px 0;
}

.search__title {
    margin-top: 32px;
    color: #ffffff;
    text-shadow: 0 10px 30px rgba(5, 15, 33, 0.35);
}

.search__form,
.form-submit-ticket,
.ticket__body_block,
.ticket__params .params--block,
.article .block__head,
.article__footer,
.main__content > .box,
.main__content > .notice,
.main__content > .notification,
.main__content .white-box {
    border: 1px solid rgba(11, 58, 103, 0.08);
    border-radius: 18px;
    box-shadow: 0 18px 48px rgba(8, 37, 67, 0.10);
}

.search__form {
    padding: 20px;
}

.search__form .form-group input,
.form-control,
textarea,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
select {
    border: 1px solid rgba(11, 58, 103, 0.14);
    border-radius: 12px;
    background: var(--input-bg);
    color: var(--input-clr);
    box-shadow: inset 0 1px 2px rgba(11, 58, 103, 0.04);
}

.search__form .form-group input:focus,
.form-control:focus,
textarea:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
select:focus {
    border-color: rgba(31, 122, 224, 0.45);
    box-shadow: 0 0 0 4px rgba(31, 122, 224, 0.14);
}

.dropdown-select:not(.right),
.dropdown:not(.right),
.with-label:not(.right) {
    border-radius: 12px;
}

.dropdown-select .dropdown-list,
.dropdown .dropdown-list,
.with-label .dropdown-list {
    border-radius: 14px;
    border: 1px solid rgba(11, 58, 103, 0.08);
    box-shadow: 0 18px 44px rgba(8, 37, 67, 0.16);
}

.btn,
.btn-full,
.btn-border,
.btn--blue-border {
    border-radius: 999px;
}

.btn-full,
.btn--blue-border:hover {
    box-shadow: 0 10px 24px rgba(31, 122, 224, 0.22);
}

.btn-full:hover,
.btn-border:hover,
.btn--blue-border:hover {
    transform: translateY(-1px);
}

.btn-border,
.btn--blue-border {
    background: rgba(255, 255, 255, 0.92);
}

.ticket__body_block {
    padding: 20px 24px 24px;
    text-align: left;
}

.ticket__body_block.response {
    border-left: 4px solid rgba(46, 196, 182, 0.72);
}

.ticket__body_block .block--head,
.ticket__params .params--block h2,
.ticket__params .params--block h4,
.block__head {
    color: var(--primary);
}

.ticket__params .params--block .row {
    border-bottom-color: rgba(11, 58, 103, 0.10);
}

.footer {
    margin-top: 24px;
    padding-bottom: 24px;
    color: rgba(26, 26, 26, 0.82);
}

@media (max-width: 900px) {
    body.cust-help {
        background:
            linear-gradient(180deg, rgba(6, 21, 42, 0.94) 0, rgba(11, 58, 103, 0.88) 180px, rgba(244, 246, 248, 0.98) 420px),
            url("../img/brand-network-bg.jpg") top center / cover no-repeat;
    }

    .cust-help .header {
        position: relative;
        backdrop-filter: none;
    }

    .cust-help .header__logo {
        font-size: 18px;
        letter-spacing: 0.05em;
    }

    .search__form,
    .form-submit-ticket,
    .ticket__body_block,
    .ticket__params .params--block,
    .article .block__head,
    .article__footer {
        border-radius: 14px;
    }
}