/*
Apply any theme variable overwrites that were set via admin theme settings.
Note: This file is a placeholder, it will be automatically/dynamically overwritten from the theme settings.
This will apply to ANY/ALL themes loaded, and before any of the core files are loaded.
*/
/* test overwrite:
:root {
    --link__pri-clr: red;
    --main-background: yellow;
    --font__pri-clr: black;
}*/
/* =========================================================
   TEO PUBLIC SUPPORT SKIN
   Customer-facing HESK only
   ========================================================= */

:root {
    --teo-navy: #123e4e;
    --teo-teal: #155f5a;
    --teo-bright-teal: #1cb8b0;
    --teo-gold: #e7ad3d;
    --teo-coral: #e85d56;
    --teo-cream: #f3e9d4;
    --teo-paper: #fffaf0;
    --teo-ink: #34433f;
    --teo-muted: #66706c;
}

/* Page background */

body {
    background:
        repeating-linear-gradient(
            0deg,
            rgba(96, 75, 48, .025) 0,
            rgba(96, 75, 48, .025) 1px,
            transparent 1px,
            transparent 6px
        ),
        repeating-linear-gradient(
            90deg,
            rgba(96, 75, 48, .018) 0,
            rgba(96, 75, 48, .018) 1px,
            transparent 1px,
            transparent 8px
        ),
        #f6efe1 !important;

    color: var(--teo-ink);
}

/* Main public header */

.header,
header {
    background: var(--teo-navy) !important;
    border-bottom: 4px solid var(--teo-gold) !important;
    box-shadow: 0 4px 14px rgba(20, 42, 45, .18);
}

.header a,
header a {
    color: #fff !important;
}

/* Page headings */

h1,
h2,
h3,
h4 {
    color: var(--teo-navy);
}

/* Main panels / cards */

.card,
.box,
.ticket,
.panel,
.category,
.home__card,
.home__block,
.ticket-create,
.ticket-view,
.kb-category {
    background:
        repeating-linear-gradient(
            0deg,
            rgba(103, 80, 48, .02) 0,
            rgba(103, 80, 48, .02) 1px,
            transparent 1px,
            transparent 6px
        ),
        var(--teo-paper) !important;

    border: 1px solid rgba(18, 62, 78, .16) !important;
    border-radius: 8px !important;

    box-shadow:
        0 7px 18px rgba(35, 45, 42, .08),
        inset 0 1px 0 rgba(255,255,255,.85) !important;
}

/* Buttons */

.btn,
button,
input[type="submit"],
input[type="button"] {
    border-radius: 5px !important;
}

.btn-primary,
.btn-success,
button[type="submit"],
input[type="submit"] {
    background: var(--teo-teal) !important;
    border-color: var(--teo-navy) !important;
    color: #fff !important;

    box-shadow:
        0 3px 0 #0d403d,
        0 5px 10px rgba(20, 54, 52, .15);
}

.btn-primary:hover,
.btn-success:hover,
button[type="submit"]:hover,
input[type="submit"]:hover {
    background: var(--teo-navy) !important;
}

/* Secondary buttons */

.btn-secondary,
.btn-default {
    background: var(--teo-cream) !important;
    border-color: rgba(18, 62, 78, .22) !important;
    color: var(--teo-navy) !important;
}

/* Inputs */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
textarea,
select {
    background: #fffdf8 !important;
    border: 1px solid rgba(18, 62, 78, .23) !important;
    border-radius: 5px !important;
    color: var(--teo-ink) !important;

    box-shadow:
        inset 0 1px 3px rgba(43, 52, 49, .07);
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--teo-bright-teal) !important;
    box-shadow:
        0 0 0 3px rgba(28, 184, 176, .12) !important;
}

/* Links */

a {
    color: var(--teo-teal);
}

a:hover {
    color: var(--teo-coral);
}

/* Home-page action blocks */

.home__card,
.home__block {
    position: relative;
    overflow: hidden;
}

.home__card:before,
.home__block:before {
    content: "";
    position: absolute;
    left: 0;
    top: 12px;
    bottom: 12px;
    width: 4px;
    background: var(--teo-bright-teal);
    border-radius: 0 3px 3px 0;
}

.home__card:nth-child(2):before,
.home__block:nth-child(2):before {
    background: var(--teo-gold);
}

/* Alerts */

.alert-success {
    background: #eef7ef !important;
    border-color: rgba(21, 95, 90, .25) !important;
    color: #28534d !important;
}

.alert-danger,
.alert-error {
    background: #fff0ed !important;
    border-color: rgba(232, 93, 86, .28) !important;
    color: #7b3732 !important;
}

/* Footer */

.footer,
footer {
    background: var(--teo-navy) !important;
    color: rgba(255,255,255,.82) !important;
    border-top: 4px solid var(--teo-gold) !important;
}

.footer a,
footer a {
    color: #fff !important;
}

/* Give public support pages breathing room */

main,
.main,
.main-content,
.page,
.page-content {
    margin-top: 24px;
    margin-bottom: 34px;
}

/* Mobile */

@media (max-width: 760px) {

    main,
    .main,
    .main-content,
    .page,
    .page-content {
        margin-top: 16px;
        margin-bottom: 24px;
    }
}


/* =========================================================
   TEO SUPPORT HOME
   ========================================================= */

.page-index body,
html.page-index body {
    min-height: 100vh;
}

.page-index .main__content {
    padding-top: 28px !important;
    padding-bottom: 42px !important;
}

.page-index .contr {
    width: min(100% - 36px, 900px) !important;
    margin: 0 auto !important;
}

/* TEO welcome panel */

.page-index .teo-support-hero {
    position: relative;
    margin: 0 auto 24px !important;
    padding: 27px 28px 25px !important;
    text-align: center;

    border: 1px solid rgba(18, 62, 78, .18);
    border-radius: 8px;

    background:
        repeating-linear-gradient(
            0deg,
            rgba(104, 79, 47, .024) 0,
            rgba(104, 79, 47, .024) 1px,
            transparent 1px,
            transparent 5px
        ),
        repeating-linear-gradient(
            90deg,
            rgba(104, 79, 47, .018) 0,
            rgba(104, 79, 47, .018) 1px,
            transparent 1px,
            transparent 7px
        ),
        #f8f1e4 !important;

    box-shadow:
        0 10px 24px rgba(34, 42, 39, .09),
        inset 0 1px 0 rgba(255,255,255,.8);
}

.page-index .teo-support-hero:after {
    content: "";
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: -5px;
    height: 8px;

    background:
        repeating-linear-gradient(
            90deg,
            transparent 0 8px,
            rgba(135, 94, 53, .18) 8px 9px,
            transparent 9px 14px
        );

    opacity: .55;
}

.page-index .teo-support-mark {
    display: block;
    width: 48px;
    height: 48px;
    margin: 0 auto 9px;
}

.page-index .teo-support-kicker {
    margin: 0 0 5px;
    color: #b06536;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .16em;
}

.page-index .teo-support-hero .search__title {
    margin: 0 !important;
    color: #123e4e !important;
    font-size: 30px !important;
    line-height: 1.15;
}

.page-index .teo-support-intro {
    margin: 8px 0 0;
    color: #5d6762;
    font-size: 14.5px;
}

/* Two main support choices */

.page-index .nav {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px !important;

    width: 100% !important;
    margin: 0 auto !important;
}

.page-index .navlink {
    position: relative;

    min-height: 125px;
    padding: 24px 24px 22px !important;

    display: flex !important;
    align-items: center !important;
    gap: 17px;

    background:
        repeating-linear-gradient(
            0deg,
            rgba(103, 80, 48, .022) 0,
            rgba(103, 80, 48, .022) 1px,
            transparent 1px,
            transparent 6px
        ),
        #fffaf0 !important;

    border: 1px solid rgba(18, 62, 78, .16) !important;
    border-radius: 8px !important;

    box-shadow:
        0 7px 17px rgba(35, 45, 42, .09),
        inset 0 1px 0 rgba(255,255,255,.9) !important;

    text-decoration: none !important;

    transition:
        transform .13s ease,
        box-shadow .13s ease,
        border-color .13s ease;
}

.page-index .navlink:first-child {
    border-top: 4px solid #1cb8b0 !important;
}

.page-index .navlink:nth-child(2) {
    border-top: 4px solid #e7ad3d !important;
}

.page-index .navlink:hover {
    transform: translateY(-2px);

    border-color: rgba(18, 62, 78, .26) !important;

    box-shadow:
        0 10px 21px rgba(35, 45, 42, .12),
        inset 0 1px 0 rgba(255,255,255,.95) !important;
}

.page-index .navlink .icon-in-circle {
    flex: 0 0 auto;

    width: 52px !important;
    height: 52px !important;

    background: #155f5a !important;
    border: 3px solid rgba(255,255,255,.72);

    box-shadow:
        0 3px 0 #0d403d,
        0 5px 10px rgba(20,54,52,.14);
}

.page-index .navlink:nth-child(2) .icon-in-circle {
    background: #c88728 !important;
    box-shadow:
        0 3px 0 #98651e,
        0 5px 10px rgba(90,62,24,.14);
}

.page-index .navlink__title {
    margin: 0 0 5px !important;
    color: #123e4e !important;
    font-size: 18px !important;
}

.page-index .navlink__descr {
    color: #626c67 !important;
    font-size: 13.5px !important;
    line-height: 1.45;
}

/* Remove the huge empty HESK homepage feel */

.page-index .main {
    min-height: 0 !important;
}

.page-index .wrapper {
    min-height: 0 !important;
}

@media (max-width: 700px) {

    .page-index .main__content {
        padding-top: 20px !important;
        padding-bottom: 30px !important;
    }

    .page-index .contr {
        width: min(100% - 24px, 900px) !important;
    }

    .page-index .nav {
        grid-template-columns: 1fr;
        gap: 14px !important;
    }

    .page-index .teo-support-hero {
        padding: 22px 18px 21px !important;
    }

    .page-index .teo-support-hero .search__title {
        font-size: 26px !important;
    }

    .page-index .navlink {
        min-height: 105px;
        padding: 19px !important;
    }
}


.page-index .navlink:nth-child(2) .icon-in-circle {
    background: #CB5843 !important;
    box-shadow:
        0 3px 0 #9f4435,
        0 5px 10px rgba(90,62,24,.14) !important;
}