:root {
    --l-button_dark: 21, 27, 35;
    --l-button_dark_hover: 34, 41, 51;
    --l-button_success: red;
    --l-button_danger: red;

    --l-page_background: 255, 255, 255;
    --l-area_background: 255, 255, 255;
    --l-area_background_dark: 21, 27, 35;
    --l-area_background_light: 255, 255, 255;
    --l-area_background_lighter: 215, 217, 227;

    --l-brand_primary: 16, 185, 129;
    --l-brand_primary_hover: 6, 133, 190;
    --l-brand_gradient: linear-gradient(0deg,
            rgb(var(--l-brand_primary)) 0%,
            #14d193 100%);
    --l-brand_gradient_light: linear-gradient(to bottom,
            rgb(var(--l-brand_primary)) 0%,
            #0e8f64 100%);

    --l-text_color: 40, 42, 62;
    --l-text_dark: 94, 99, 110;
    --l-text_light: 113, 128, 150;
    --l-text_very_light: 255, 255, 255;
    --l-text_link: 0, 0, 0;
    --l-text_link_hover: 16, 98, 254;

    --l-border_radius: 6px;
    --l-border_radius_sm: 4px;

    --l-border_main: 226, 227, 233;
    --l-border_main_darker: 215, 217, 227;

    --padding-1: 0.5em;
    --padding-2: 1em;
    --padding-3: 1.25em;
    --padding-4: 1.5em;
    --padding-5: 1.75em;
    --padding-6: 2em;
    --spacing-1: 0.3125em;
    --spacing-2: 0.5em;
    --spacing-3: 0.625em;
    --spacing-4: 1em;
    --spacing-5: 1.25em;
    --spacing-6: 1.5625em;
    --spacing-7: 2em;

    --header-primary_height: 60px;
    --header-secondary_height: 80px;
    --container-width: 1500px;
    --sidebar-width: 320px;
    --sidebar-spacing: 2em;

    --status--success: 41, 147, 65;
    --status--danger: 217, 38, 50;
    --status--warning: 224, 120, 0;
    --status--info: 16, 98, 254;

    --box-shadow_sm: 0 0 1px rgb(0, 0, 0, 0.25), 0 2px 16px rgb(0, 0, 0, 0.15);
}

html.mode\:dark {
    --l-page_background: 13, 17, 23;
    --l-area_background: 21, 27, 35;
    --l-area_background_light: 34, 41, 51;
    --l-area_background_lighter: 43, 52, 65;

    --l-text_color: 139, 148, 158;
    --l-text_dark: 159, 159, 159;
    --l-text_light: 113, 128, 150;
    --l-text_very_light: 255, 255, 255;
    --l-text_link: 255, 255, 255;

    --l-border_main: 34, 41, 51;
    --l-border_main_darker: 34, 41, 51;
}

body {
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-size: 13px;
    letter-spacing: -0.027em;
    line-height: 1.5;
    color: rgb(var(--l-text_color));
    height: 100%;
    background-color: rgb(var(--l-page_background));
    margin: 0;
}

a {
    color: rgb(var(--l-text_link));
    text-decoration: none !important;
}

.theme-container {
    max-width: var(--container-width);
    padding: 0 20px;
    margin: 0 auto;
    position: relative;
}

.content-wrapper {
    display: flex;
}

.sidebar-main {
    min-width: var(--sidebar-width);
    max-width: var(--sidebar-width);
    margin-right: var(--sidebar-spacing);
}

.sidebar-sticky {
    position: sticky;
    top: var(--sidebar-spacing);
}

.content-main {
    flex: 1;
}

.zoomIn {
    animation-name: zoomIn, fadeIn !important;
    animation-fill-mode: forwards;
}

.fadeUp {
    animation-name: fadeUp, fadeIn !important;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1),
        cubic-bezier(0, 0, 0.2, 1);
}

.fadeUp_fast {
    animation-duration: 0.8s;
}

.duration-\[1\.3s\] {
    animation-duration: 1.3s;
}

.duration-\[1\.5s\] {
    animation-duration: 1.5s;
}

.duration-\[1\.7s\] {
    animation-duration: 1.7s;
}

.duration-\[1\.8s\] {
    animation-duration: 1.8s;
}

.duration-\[2\.4s\] {
    animation-duration: 2.4s;
}

.l-badge {
    background: #000;
    color: #fff;
    border-radius: 4px;
    padding: 0.25em 0.4em;
    min-width: 1.4em;
    text-align: center;
    line-height: 1;
    inset-inline-end: -3px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    position: relative;
    overflow: hidden;
}

.l-badge--popular {
    background: conic-gradient(from 220deg at 50% 50%, #ff6b6b, #ef3b44, #ff6b6b);
    box-shadow: 0 0 16px rgba(239, 59, 68, 0.35);
}

.l-badge--popular[class*="anim"] {
    animation: pulseHot 1.6s ease-in-out infinite;
}

.l-badge--anim:after {
    content: "";
    position: absolute;
    inset: 0;
    translate: -120% 0;
    background: linear-gradient(110deg,
            transparent 0 40%,
            rgba(255, 255, 255, 0.45) 50%,
            transparent 60% 100%);
    animation: shimmer 2.2s linear infinite;
    mix-blend-mode: soft-light;
}

@keyframes pulseHot {

    0%,
    100% {
        box-shadow: 0 0 12px rgba(239, 59, 68, 0.25);
    }

    50% {
        box-shadow: 0 0 22px rgba(239, 59, 68, 0.55);
    }
}

@keyframes shimmer {
    100% {
        translate: 120% 0;
    }
}

@keyframes fadeUp {
    0% {
        transform: translate3d(0, 7vh, 0);
    }

    100% {
        transform: translateZ(0);
    }
}

@keyframes zoomIn {
    0% {
        transform: matrix(0.85, 0, 0, 0.85, 0, 0);
    }

    100% {
        transform: matrix(1, 0, 0, 1, 0, 0);
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

/* ---------------------- *\
 - Defaults
\* ---------------------- */
.dataList {
    padding: 0;
    margin: 0;
    list-style: none;
}

.hr-line {
    width: 1px;
    height: 11px;
    background: rgb(var(--l-border_main));
    border: 0;
    margin: 0 10px;
    display: inline-block;
}

.padding-top-\[2em\] {
    padding-top: var(--padding-6);
}

.padding-bottom-\[2em\] {
    padding-bottom: var(--padding-6);
}

.padding-top-\[4em\] {
    padding-top: calc(var(--padding-6) * 2);
}

.padding-bottom-\[4em\] {
    padding-bottom: calc(var(--padding-6) * 2);
}

.margin-y-\[4em\] {
    margin: 4em 0;
}

.margin-y-\[8em\] {
    margin: 8em 0;
}

.margin-top-\[8em\] {
    margin-top: 8em;
}

.grid-list-\[2\] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

.grid-autofill-\[250px\] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

.grid-autofill-\[275px\] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(275px, 1fr));
}

.grid-autofill-\[300px\] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.grid-autofill-\[400px\] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
}

.grid-gap-\[2em\] {
    grid-gap: 2em;
}

.grid-gap-\[3em\] {
    grid-gap: 3em;
}

.grid-gap-\[4em\] {
    grid-gap: 4em;
}

.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.flex-wrap {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1em;
}

.gap-\[2em\] {
    gap: var(--spacing-7);
}

.flex-1 {
    flex: 1;
}

.text-headers-h1 {
    color: rgb(var(--l-text_link));
    font-size: 60px;
    font-weight: 500;
}

.text-headers-h2 {
    color: rgb(var(--l-text_link));
    font-size: 48px;
    font-weight: 500;
}

.text-headers-h3 {
    color: rgb(var(--l-text_link));
    font-size: 40px;
    font-weight: bold;
    margin: 0;
}

.text-headers-h4 {
    color: rgb(var(--l-text_link));
    font-size: 24px;
    font-weight: 500;
}

.bg-stripes {
    background-repeat: repeat;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0.08;
    z-index: -1;
}

.cSection {
    position: relative;
}

.has-area_background_dark {
    background: rgb(var(--l-area_background_dark));
}

.text-muted {
    font-size: 13px;
    display: block;
    color: rgb(var(--l-text_dark));
}

.has-text_dark {
    color: rgb(var(--l-text_dark)) !important;
}

.has-text_light {
    color: rgb(var(--l-text_link));
}

.has-text_small {
    color: rgb(var(--l-text_color));
    font-size: 13px;
}

/* ---------------------- *\
 - Headers
\* ---------------------- */
.main-header__wrapper {
    position: relative;
}

#main-header {
    position: relative;
    background: rgb(var(--l-area_background));
    box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.04), 0px 8px 40px rgba(0, 0, 0, 0.08);
}

.headerRow_secondary {
    position: relative;
    height: var(--header-secondary_height);
}

.headerRow_primary {
    position: relative;
    height: var(--header-primary_height);
}

.headerRow>[class*="container"] {
    display: flex;
    align-items: center;
    height: 100%;
    gap: 1em;
}

.headerRow_group {
    display: flex;
    align-items: center;
    gap: 2em;
    flex: 1;
    height: 100%;
}

#switchMode {
    background: rgb(var(--l-border_main));
    appearance: none;
    border: 0 !important;
    outline: 0 !important;
    padding: 2px;
    border-radius: 100vw;
    display: flex;
    align-items: center;
}

html.mode\:dark #switchMode {
    background: rgb(var(--l-brand_primary));
}

#switchMode .switchMode--icon {
    background: rgb(var(--l-area_background_light));
    color: rgb(var(--l-text_dark));
    border-radius: 100vw;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 25px;
    font-size: 12px;
}

html.mode\:dark #switchMode .switchMode--icon {
    background: #fff;
    color: rgb(var(--l-brand_primary));
}

#switchMode .switchMode--text {
    font-size: 11px;
    font-weight: bold;
    line-height: 1;
    color: rgb(var(--l-text_light));
}

#switchMode .switchMode--text[data-switch-type="toggle_off"] {
    padding: 0 1em 0 0.75em;
}

#switchMode .switchMode--text[data-switch-type="toggle_on"] {
    padding: 0 0.75em 0 1em;
}

html.mode\:dark #switchMode .switchMode--text {
    color: rgb(var(--l-text_very_light));
}

/* ---------------------- *\
 - Section / Blocks
\* ---------------------- */

.l-section-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0 0 4em 0;
}

.sectionHeader--title {
    color: rgb(var(--l-text_link));
    font-size: 35px;
    font-weight: 900;
    line-height: 1;
    margin: 0;
}

.sectionHeader--desc {
    margin: 1em 0 0 0;
    font-size: 15px;
    text-align: center;
    max-width: 80%;
}

.listBlock--feature {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1em;
    border-radius: 10px;
    padding: 3em;
    transition: all 0.3s ease 0s;
    overflow: hidden;
    z-index: 1;
}

.listBlock--title {
    font-size: 24px;
    font-weight: 600;
    color: rgb(var(--l-text_link));
    line-height: 1;
    margin: 0.5em 0 0.5em 0;
}

.listBlock--desc {
    margin: 0;
    font-size: 16px;
}

.listBlock--icon {
    display: flex;
    width: 55px;
    height: 55px;
    background: var(--l-brand_gradient);
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 20px;
    border-radius: calc(var(--l-border_radius) * 2);
    box-shadow: 0 10px 40px 0 rgb(var(--theme-brand_primary), 0.25);
}

/* ---------------------- *\
 - userBar
\* ---------------------- */
#elClientBar {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1em;
    height: 100%;
}

.elClient_register {
    background: rgb(var(--l-brand_primary));
    color: #fff;
    padding: 0.5em 1.25em;
    font-size: 15px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    border-radius: 10px;
    transition: all 0.4s ease;
    position: relative;
}

.elClient_login {
    background: transparent;
    padding: 0.5em 1em;
    font-size: 15px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    border-radius: 10px;
    color: #000;
}

#elClientBar .cMenu {
    top: calc(var(--header-primary_height) - 20px);
}

.elClient-item {
    position: relative;
}

#elClientLinks_menu {
    min-width: 270px;
    padding-bottom: 0.5em;
    right: 0;
}

#elClientLinks_menu .hr-line-full {
    border: 0;
    margin: 0.5em 0;
    width: 100%;
    height: 1px;
    background: rgb(var(--l-border_main));
}

#elClientLinks_menu>li>a {
    display: flex;
    align-items: center;
    gap: 0.75em;
    padding: 0.5em 1.5em;
    transition: all 0.1s linear;
}

#elClientLinks_menu>li:not([data-menuitem="signout"])>a>i {
    color: rgb(var(--l-text_light));
}

#elClientLinks_menu>li:not([data-menuitem="signout"])>a:hover,
#elClientLinks_menu>li:not([data-menuitem="signout"])>a:hover>i {
    color: rgb(var(--l-brand_primary));
}

#elClientLinks_menu>li>a:hover {
    gap: 1em;
}

#elClientLinks_menu>li[data-menuitem="signout"]>a {
    color: #d53e3e;
}

#elClientLinks_menu>li>a>span {
    flex: 1;
}

#elClientLinks_menu>li[data-menuitem="accountinfo"] {
    display: flex;
    align-items: center;
    gap: 1em;
    padding: 1em 1.5em 0.5em 1.5em;
}

#elClientLinks_menu>li.hasChildren>a {
    cursor: pointer;
}

.clientAvatar {
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--l-brand_gradient_light);
    border-radius: 100vw;
    line-height: 1;
}

.clientAvatar__initials {
    font-size: 17px;
    font-weight: 500;
    color: #fff;
    line-height: 1;
}

.clientInfo {
    display: flex;
    flex-direction: column;
    line-height: 1;
    gap: 0.5em;
}

.clientInfo__companyname {
    font-size: 10px;
}

.clientInfo__fullname {
    color: rgb(var(--l-text_link));
    font-size: 16px;
    font-weight: 600;
}

/* ---------------------- *\
 - navbar
\* ---------------------- */
#main-navbar {
    height: 100%;
    flex: 1;
}

.navBar_primary {
    display: flex;
    align-items: center;
    height: 100%;
    flex: 1;
}

.navBar_primary .navbarList {
    height: 100%;
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.5em;
}

.navBar_primary .navbarList li.navbarItem {
    height: 100%;
    display: inline-flex;
}

.navBar_dropdown--fix {
    width: 100%;
    height: calc(100% + 20px);
    position: absolute;
    left: 0;
}

.navBar_primary .navbarList li.navbarItem a.navbarItem-link {
    position: relative;
    padding: 0.75em 1em;
    font-size: 15px;
    font-weight: 400;
    border-radius: 0.5em;
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    transition: all 0.4s ease;
    line-height: 1;
    z-index: 1;
}

.navBar_primary .navbarList li.navbarItem a.navbarItem-link:hover {
    color: rgb(var(--l-brand_primary));
}

.navBar_primary .navbarList li.navbarItem.hasChildren a.navbarItem-link:after {
    content: "\f107";
    font-family: var(--fa-style-family-classic);
    line-height: 1;
}

.navbar_dropdown {
    position: absolute;
    top: calc(100% + 10px);
    background: rgb(var(--l-area_background));
    z-index: 29500;
    width: 100%;
    left: 0;
    display: flex;
    border-radius: 12px;
    padding-inline-start: 10px;
    overflow: hidden;
    opacity: 0;
    transition: all 0.4s ease 0s;
    visibility: hidden;
}

.navbar_dropdown.is-active,
.js--navbar-item:hover .navbar_dropdown {
    opacity: 1;
    visibility: visible;
}

.navbar_dropdown:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 10px;
    background: linear-gradient(180deg, #1aa47b 0%, #aaf099a6 100%);
    border-top-left-radius: inherit;
    border-bottom-left-radius: inherit;
}

.navbar_dropdown--group {
    display: flex;
    padding: 2em;
}

.navbar_dropdown--group:last-child {
    border-left: 1px solid rgb(var(--l-border_main));
}

.navBar_groupItems {
    display: flex;
    flex-direction: column;
    gap: 1em;
    width: 100%;
}

.groupItems_grid .navBar_groupItems {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.navBar_groupItems li:not(.group-title, .groupItems_grid) {
    margin-top: 1.5em;
}

.navBar_secondary--item {
    display: flex;
    align-items: center;
    gap: 1.5em;
    position: relative;
    z-index: 1;
    transition: all 0.3s ease 0s;
    padding: 0.5em 1.5em 0.5em 0.5em;
}

.navBar_secondary--item:after {
    content: "";
    position: absolute;
    width: calc(100% + 1em);
    height: calc(100% + 1em);
    left: -0.5em;
    border-radius: 10px;
    opacity: 0;
    visibility: hidden;
    background: rgb(var(--l-border_main), 0.5);
    transition: all 0.3s ease 0s;
    z-index: -1;
}

.navBar_secondary--item:hover:after {
    opacity: 1;
    visibility: visible;
}

.navBar_groupItems li.group-title {
    font-size: 16px;
    font-weight: 500;
    color: rgb(var(--l-text_link));
}

.navBar_groupItems li.group-title.hidden {
    opacity: 0;
    visibility: hidden;
}

.navBar_secondary--item .itemIcon {
    display: grid;
    font-size: 25px;
    width: 40px;
    place-content: center;
    color: #75868985;
    transition: all 0.3s ease 0s;
}

.navBar_secondary--item .itemContent {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
}

.navBar_secondary--item .itemContent .title {
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    display: flex;
    align-items: center;
    gap: 0.75em;
    margin: 0;
    transition: all 0.3s ease 0s;
}

.navBar_secondary--item:hover .itemContent .title,
.navBar_secondary--item:hover .itemIcon {
    color: rgb(var(--l-brand_primary));
}

.navBar_secondary--item .itemContent .desc {
    color: rgb(var(--l-text_color));
    margin: 0;
}

/* ---------------------- *\
 - Menus
\* ---------------------- */

.cMenu {
    position: absolute;
    background: rgb(var(--l-area_background));
    box-shadow: var(--box-shadow_sm);
    border-radius: var(--l-border_radius);
    background-clip: padding-box;
    top: 100%;
    z-index: 10000;
    max-width: 100vw;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease 0s;
}

.cMenu.cMenu_open {
    opacity: 1;
    visibility: visible;
}

.cMenu_center {
    left: 50%;
    transform: translateX(-50%);
}

.cMenu_small {
    min-width: 320px;
    max-width: 320px;
}

.cMenu_wide {
    min-width: 450px;
    max-width: 450px;
}

.cMenu_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--padding-3) var(--padding-4);
    border-bottom: 1px solid rgb(var(--l-border_main));
}

.cMenuHeader_title {
    color: rgb(var(--l-text_link));
    font-size: 17px;
    margin: 0;
}

.cMenu_innerContent {
    max-height: 350px;
    overflow: auto;
}

.cMenuList>li:not(:first-child) {
    border-top: 1px solid rgb(var(--l-border_main), 0.75);
}

.cMenuList>li>a {
    padding: 1em;
    display: flex;
    align-items: flex-start;
    gap: 1em;
    line-height: 1;
    transition: all 0.25s linear;
}

.cMenu:not(:has(> .cMenu_footer)) .cMenuList>li:last-child>a {
    border-bottom-left-radius: var(--l-border_radius);
    border-bottom-right-radius: var(--l-border_radius);
}

.cMenuList>li>a:hover {
    background: rgb(var(--l-brand_primary), 0.2);
}

html.mode\:dark .cMenuList>li>a:hover {
    background: rgb(var(--l-area_background_light));
}

.cMenuList .cMenuList_empty {
    padding: 1em;
    text-align: center;
}

.cMenuList>li.cMenuItem>a {
    padding: 1.5em;
    align-items: center;
}

.cMenuItem_content {
    position: relative;
    flex: 1;
}

.cMenuItem_icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgb(var(--l-brand_primary), 0.2);
    color: rgb(var(--l-brand_primary));
    border-radius: 100vw;
    transition: all 0.25s linear;
}

.cMenuList>li>a:hover .cMenuItem_icon {
    background: rgb(var(--l-brand_primary));
    color: #fff;
}

.cMenuItem_header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 0.5em 0;
}

.cMenuItem_small {
    font-size: 11px;
    color: rgb(var(--l-text_color));
    font-weight: 500;
}

.cMenuItem_date {
    font-size: 11px;
    color: rgb(var(--l-text_color));
    font-weight: 500;
}

.cMenuItem_title {
    color: rgb(var(--l-text_link));
    font-size: 15px;
}

.cMenu_footer {
    display: flex;
    align-items: center;
    justify-content: center;
    border-top: 1px solid rgb(var(--l-border_main));
    border-bottom-left-radius: var(--l-border_radius);
    border-bottom-right-radius: var(--l-border_radius);
    padding: 1em;
}

.cMenu_button--full {
    width: 100%;
}

/* Notifications */
.cMenuList .cNotification-item>a {
    padding: 1.5em;
    line-height: 1.5;
    font-size: 14px;
    position: relative;
    color: rgb(var(--l-text_link));
    overflow: hidden;
}

.cMenuList .cNotification-item>a>.icon-primary {
    font-size: 18px;
    margin-top: 5px;
    line-height: 1;
}

.cMenuList .cNotification-item>a>.icon-secondary {
    transform: rotate(-10deg);
    font-size: 75px;
    position: absolute;
    right: -21px;
    bottom: -40px;
    z-index: -1;
    opacity: 0.1;
    color: rgb(var(--l-text_color));
}

#clientAppearance_menu {
    min-width: 240px;
    right: 0;
}

#clientAppearance_menu>form {
    display: flex;
    flex-direction: column;
}

#clientAppearance_menu>form>button {
    display: flex;
    align-items: center;
    gap: 0.75em;
    padding: 1em 1.5em;
    transition: all 0.1s linear;
    border: 0;
    background: transparent;
}

#clientAppearance_menu>form>button:first-of-type {
    border-bottom: 1px solid rgb(var(--l-border_main));
    border-top-left-radius: var(--l-border_radius);
    border-top-right-radius: var(--l-border_radius);
}

#clientAppearance_menu>form>button:hover {
    background: rgb(var(--l-brand_primary));
    color: #fff;
}

#clientAppearance_menu>form>button:last-of-type {
    border-bottom-left-radius: var(--l-border_radius);
    border-bottom-right-radius: var(--l-border_radius);
}

/* ---------------------- *\
 - Client Area
\* ---------------------- */

/* Blocks */
.elClient_blocks {
    position: relative;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    grid-gap: 2em;
    padding: 0;
    margin: 0 0 var(--spacing-7) 0;
    list-style: none;
}

.elClient_block {
    --block--color: var(--l-brand_primary);
}

.elClient_block.block-alert .block-alert-icon {
    position: absolute;
    right: 10px;
    top: 10px;
    color: rgb(var(--block--color));
}

.elClient_block.block-alert>a {
    border: 1px solid rgb(var(--block--color));
    animation: pulse-alert-danger 2s infinite;
}

.elClient_block>a {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgb(var(--l-area_background));
    border: 1px solid rgb(var(--l-border_main));
    box-shadow: var(--box-shadow_sm);
    border-radius: var(--l-border_radius);
    padding: 2em;
    text-decoration: none !important;
    transition: all 0.4s ease 0s;
}

.elClient_block>a:hover {
    transform: translateY(-5px);
}

.elClient_block .block-icon {
    position: absolute;
    right: -15px;
    bottom: -35px;
    color: rgb(var(--l-text_color));
    font-size: 75px;
    transform: rotate(-20deg);
    opacity: 0.1;
}

.elClient_block .block-content {
    display: flex;
    text-align: center;
    flex-direction: column;
}

.elClient_block .block-content>.block-number {
    font-size: 62px;
    line-height: 1;
    margin: 0 0 0.25em 0;
    font-weight: 300;
    color: rgb(var(--block--color));
}

.elClient_block .block-content>.block-type {
    color: rgb(var(--l-text_link));
    font-weight: 400;
    font-size: 18px;
    line-height: 1;
}

/* ---------------------- *\
 - Statuses
\* ---------------------- */
.status-dot {
    width: 10px;
    height: 10px;
    background: rgb(var(--status--color));
    border-radius: 100vw;
}

.status {
    padding: 0.75em 1.25em;
    line-height: 1;
    border-radius: calc(var(--l-border_radius) - 2px);
    text-transform: uppercase;
    font-size: 11px;
    font-weight: 500;
}

.status.status-small {
    padding: 0.5em 0.75em;
}

.status.status-fill {
    background: rgb(var(--status--color), 0.2);
    color: rgb(var(--status--color));
}

.status.status-filled {
    background: rgb(var(--status--color));
    color: #fff;
}

.status-dark {
    --status--color: 0, 0, 0;
}

.status-pending,
.status-danger {
    --status--color: 217, 83, 79;
}

.status-warning {
    --status--color: 255, 102, 0;
}

.status-active,
.status-completed,
.status-success {
    --status--color: 41, 147, 65;
}

.status-suspended {
    --status--color: #f0ad4e;
}

.status-terminated,
.status-cancelled {
    --status--color: #919191;
}

.status-fraud {
    --status--color: #026ef5;
}

.service-status-text.pending {
    color: #d9534f;
}

.service-status-text.active,
.service-status-text.completed {
    color: #5cb85c;
}

.service-status-text.suspended {
    color: #f0ad4e;
}

.service-status-text.terminated,
.service-status-text.cancelled {
    color: #919191;
}

.service-status-text.fraud {
    color: #026ef5;
}

/* ---------------------- *\
 - Buttons
\* ---------------------- */
.elApp .btn {
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    text-decoration: none;
    text-shadow: none;
    white-space: nowrap;
    display: inline-block;
    vertical-align: middle;
    padding: 8px 16px;
    border-radius: calc(var(--l-border_radius) - 2px);
    border: 1px solid transparent;
    transition: 0.1s all linear;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    box-shadow: unset !important;
}

.elApp .btn-small {
    padding: 8px 10px;
    line-height: 1;
}

.elApp .btn-strip {
    background: transparent;
    border: 0;
    outline: 0;
    width: 100%;
    padding: 0 !important;
    text-align: left;
}

.elApp .btn.dropdown-toggle {
    display: flex;
    align-items: center;
    gap: 0.5em;
}

/* btn: default */
.elApp .btn-default {
    background: rgb(var(--l-brand_primary), 0.2);
    color: rgb(var(--l-brand_primary));
}

.elApp .btn-default:hover,
.elApp .btn-default:focus,
.elApp .btn-default:active {
    border-color: rgb(var(--l-brand_primary));
    background-color: rgb(var(--l-brand_primary));
    color: #fff;
}

/* btn: dark */
.elApp .btn-dark {
    background: rgb(var(--l-button_dark));
    color: #fff;
}

.elApp .btn-dark:hover {
    background: rgb(var(--l-button_dark_hover));
}

/* btn: success */
.elApp .btn-success {
    background: rgb(var(--l-brand_primary));
    color: #fff;
}

.elApp .btn-success:hover,
.elApp .btn-success:focus,
.elApp .btn-success:not(:disabled):not(.disabled).active,
.elApp .btn-success:not(:disabled):not(.disabled):active,
.show>.btn-success.dropdown-toggle {
    border-color: rgb(var(--l-brand_primary));
    background-color: rgb(var(--l-brand_primary));
    color: #fff;
}

/* btn: primary */
.elApp .btn-primary {
    background: rgb(var(--l-brand_primary));
    color: #fff;
}

.elApp .btn-primary:hover,
.elApp .btn-primary:focus,
.elApp .btn-primary:not(:disabled):not(.disabled).active,
.elApp .btn-primary:not(:disabled):not(.disabled):active,
.show>.btn-primary.dropdown-toggle {
    border-color: rgb(var(--l-brand_primary));
    background-color: rgb(var(--l-brand_primary));
    color: #fff;
}

/* ---------------------- *\
 - Inputs and Forms
\* ---------------------- */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
    -webkit-transition: background-color 50000s ease-in-out 0s,
        color 5000s ease-in-out 0s;
    transition: background-color 50000s ease-in-out 0s, color 5000s ease-in-out 0s;
}

.cFieldRows {
    display: flex;
    flex-direction: column;
    gap: 2em;
}

.cFieldRow_background {
    background: rgb(var(--l-area_background));
    border: 1px solid rgb(var(--l-border_main));
    box-shadow: var(--box-shadow_sm);
    border-radius: var(--l-border_radius);
    padding: var(--padding-6);
}

.cFieldRows-has_border {
    border-top: 5px solid rgb(var(--l-brand_primary));
}

.cFieldRow_group {
    display: flex;
    align-items: center;
    gap: 2em;
}

.cFieldRow_group>* {
    width: 100%;
}

.cFieldRow {
    display: flex;
    flex-direction: column;
}

.cFieldRow_borderBottom {
    border-bottom: 1px dashed rgb(var(--l-border_main));
    padding-bottom: 2em;
}

.cFieldRow_center {
    text-align: center;
}

.cFieldRow_labelGroup {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.cFieldRow_labelGroup>.progress {
    width: 100px;
    border-radius: 100vw;
    background: rgb(var(--l-area_background_lighter));
    height: 5px;
}

.cFieldRow_footer {
    border-top: 1px dashed rgb(var(--l-border_main));
    padding-top: 2em;
}

.cFieldRow_required {
    font-size: 10px;
    text-transform: uppercase;
    color: #aa1414;
    font-weight: 500;
    font-size: 0;
    margin: 0;
}

.cFieldRow_required:before {
    content: "*";
    display: inline;
    color: #c02222;
    font-size: 16px;
}

.cFieldRow_title {
    color: rgb(var(--l-text_link));
    font-weight: 600;
    font-size: 20px;
    line-height: 1;
    margin: 0;
}

.cFieldRow_desc {
    font-size: 15px;
    margin: 1em 0 0 0;
}

.form-control {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: rgb(var(--l-area_background_light));
    border-color: rgb(var(--l-area_background_lighter));
    border-radius: var(--l-border_radius_sm);
    width: 100%;
    padding: var(--padding-2);
    color: rgb(var(--l-text_link));
    font-size: 14px;
    height: 45px;
    align-items: center;
    line-height: 1.3;
}

.form-control:disabled {
    cursor: not-allowed;
}

.form-control:is(select) {
    padding-inline-end: 2.3em;
    background-image: url(../images/icons/angle-down-solid-dark.png);
    background-position: calc(100% + -12px) 50%;
    background-size: 10px 5px;
    background-repeat: no-repeat;
}

html.mode\:dark .form-control:is(select) {
    background-image: url(../images/icons/angle-down-solid-white.png);
}

.form-control:not(:disabled):focus,
.form-control:not(:disabled):hover {
    border-color: rgb(var(--l-brand_primary));
    box-shadow: 0 0 0 4px rgb(var(--l-brand_primary), 0.2);
    background-color: rgb(var(--l-area_background_light));
    color: rgb(var(--l-text_link));
}

.form-control::placeholder {
    color: rgb(var(--l-text_color));
}

.form-control.InputError {
    border-color: rgb(var(--status--danger));
    box-shadow: 0 0 0 4px rgb(var(--status--danger), 0.2);
}

label {
    color: rgb(var(--l-text_link));
    font-weight: 500;
}

.cFieldInput_hasJS {
    position: relative;
}

.cFieldJS_viewPassword {
    position: absolute;
    background: rgb(var(--l-area_background_lighter));
    border-radius: 4px;
    color: rgb(var(--l-text_link));
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    right: 6px;
    cursor: pointer;
    opacity: 0.5;
    transition: all 0.4s ease 0s;
}

.cFieldJS_viewPassword:hover,
.cFieldJS_viewPassword[data-active] {
    opacity: 1;
}

.cFieldInput_hasJS {
    display: flex;
    align-items: center;
}

.cFieldInput_hasJS>input {
    padding-inline-end: 3.5em;
}

.cFieldJS_error {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: calc(-1 * calc(35px + 10px));
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 19000;
    width: auto;
    background: rgb(var(--status--danger));
    color: rgb(var(--l-text_very_light));
    padding: var(--padding-1) var(--padding-2);
    border-radius: var(--l-border_radius);
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease 0s;
}

.cFieldJS_error:after {
    content: "";
    position: absolute;
    border: 6px solid transparent;
    border-top-color: rgb(var(--status--danger));
    bottom: -12px;
}

.cFieldJS_error[data-active] {
    opacity: 1;
    visibility: visible;
}

.cFieldJS_error>* {
    margin: 0;
    padding: 0;
}

/* ---------------------- *\
 - Alerts
\* ---------------------- */
.cAlert {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgb(var(--alert-color), 0.2);
    color: rgb(var(--alert-color));
    padding: 1.25em 0.5em 1.25em 1.25em;
    gap: 1em;
    border-radius: var(--l-border_radius);
    margin-bottom: var(--spacing-6);
}

.cAlert_warning {
    --alert-color: 224, 120, 0;
}

.cAlert_body {
    flex: 1;
}

.cAlert_body>* {
    margin: 0;
}

.cAlert_actions {
    display: flex;
    align-items: center;
}

.cAlert_actions>* {
    width: 40px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(var(--alert-color)) !important;
    text-decoration: none !important;
    font-size: 18px;
}

/* ---------------------- *\
 - Auth Pages
\* ---------------------- */
.clientArea-auth {
    display: grid;
    grid-template-columns: 700px 1fr;
    min-height: 100vh;
    max-height: 100vh;
    overflow: hidden;
}

.clientAuth_company {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgb(var(--l-area_background_dark));
}

.clientAuth_actions {
    display: flex;
    flex-direction: column;
}

.clientAuthLogin {
    align-items: center;
    justify-content: center;
}

.clientAuthLogin>form {
    min-width: 500px;
    max-width: 500px;
}

.clientAuth_title {
    color: rgb(var(--l-text_link));
    font-size: 22px;
    font-weight: 600;
    line-height: 1;
}

.clientAuth_desc {
    margin: 0;
    font-size: 17px;
}

.clientAuth_button {
    padding: 1em;
    background: var(--l-brand_gradient);
    color: rgb(var(--l-text_very_light));
    font-weight: 600;
    font-size: 16px;
    border: 0;
    border-radius: var(--l-border_radius);
}

.formRemember {
    display: flex;
    align-items: center;
    line-height: 1;
    position: relative;
    line-height: 1;
    font-size: 15px;
}

.formRemember .form-checkmark {
    width: 18px;
    height: 18px;
    position: absolute;
    background: rgba(215, 39, 39, 0.2);
    color: rgb(215, 39, 39);
    border: 1px solid transparent;
    border-radius: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.formRemember .form-checkmark:after {
    content: "\f00d";
    font-family: "Font Awesome 5 Pro";
    font-size: 8px;
    transition: ease-in-out 0.2s;
}

.formRemember input[type="checkbox"] {
    opacity: 0;
    margin-right: 5px;
    width: 18px;
    height: 18px;
    z-index: 1;
    cursor: pointer;
}

.formRemember input[type="checkbox"]:checked~.form-checkmark {
    background: rgba(17, 214, 83, 0.2);
    color: rgba(17, 214, 83);
    border-color: transparent;
}

.formRemember input[type="checkbox"]:checked~.form-checkmark:after {
    content: "\f00c";
    transition: ease-in 0.3s;
}

.clientArea_fallback {
    margin: 2em 0 0 0;
}

.clientAuthRegister {
    padding: 2em 4em;
    position: relative;
    height: 100vh;
    overflow-y: auto;
}

.clientAuthRegister_form>form {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 3em;
}

/* ---------------------- *\
 - Contact Page
\* ---------------------- */
.elContact_wrapper {
    display: grid;
    grid-template-columns: 1fr 350px;
    grid-gap: 4em;
}

.elContact_banner {
    position: relative;
    display: flex;
    gap: 2em;
    background: linear-gradient(0deg, #009aff 0%, #1966ff 100%);
    padding: 2em;
    border-radius: var(--l-border_radius);
}

.elContact_banner>i {
    color: rgb(var(--l-text_very_light));
    font-size: 35px;
}

.elContactBanner_title {
    color: rgb(var(--l-text_very_light));
    line-height: 1;
    font-size: 22px;
    font-weight: 500;
}

.elContactBanner_desc {
    color: rgb(var(--l-text_very_light));
    margin: 0;
    font-size: 16px;
}

.elContactBanner_desc>a {
    color: inherit;
    text-decoration: underline !important;
}

.elContactHeader {
    margin: 0 0 2em 0;
}

.elContactHeader_title {
    color: rgb(var(--l-text_link));
    line-height: 1;
    font-weight: 500;
    font-size: 25px;
}

.elContactHeader_desc {
    margin: 0;
    font-size: 16px;
}

.elContact_fields {
    background: rgb(var(--l-area_background));
    border: 1px solid rgb(var(--l-border_main));
    box-shadow: var(--box-shadow_sm);
    border-radius: var(--l-border_radius);
    padding: var(--padding-6);
    border-top: 5px solid rgb(var(--l-brand_primary));
    position: relative;
}

.elContactInfos {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 3em;
}

.elContact_info>.list-title {
    font-size: 16px;
    margin: 0 0 0.75em 0;
    color: rgb(var(--l-text_link));
    font-weight: 600;
    line-height: 1;
}

.elContact_info>li:not(.list-title) {
    color: rgb(var(--l-text_color));
}

.elContact_info>li:not(.list-title)>a {
    color: rgb(var(--l-brand_primary));
    text-decoration: underline !important;
}

.elContact_info>p {
    margin-top: 1em;
    color: rgb(var(--l-text_color));
}

.elContact_success {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: rgb(var(--l-area_background), 0.6);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(5px);
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit;
}

.elContact_success>i {
    color: #12b36e;
    font-size: 70px;
}

.elContact_success>p {
    font-size: 20px;
    text-align: center;
    margin: 0.5em 0 0 0;
}

/* ---------------------- *\
 - Footer
\* ---------------------- */
#main-footer {
    position: relative;
    display: flex;
    flex-direction: column;
    background: rgb(var(--l-area_background));
    border-top: 1px solid rgb(var(--l-border_main));
    margin: 3em 0 0 0;
}

.cFooter_banner {
    background: rgb(var(--l-area_background));
    border-bottom: 1px solid rgb(var(--l-border_main));
    padding: 3em 0;
    position: relative;
    z-index: 1;
}

.cFooterBanner_button {
    cursor: pointer;
    background: var(--l-brand_gradient);
    border-radius: 4px;
    padding: 1em 2em;
    font-size: 19px;
    color: rgb(var(--l-text_very_light));
    line-height: 1;
    display: inline-flex;
    align-items: center;
    gap: 1em;
}

.cFooterBanner_content {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.5em;
}

.cFooter_main {
    position: relative;
    padding: 5em 0;
}

.cFooter_wrapper {
    display: flex;
    gap: 3em;
}

.cFooter_about {
    position: relative;
    min-width: 500px;
    max-width: 500px;
}

.logo-footer {
    display: flex;
    margin-bottom: 1em;
}

.cFooter_about>p {
    font-size: 16px;
}

.cFooter_links {
    position: relative;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    width: 100%;
}

.cFooter_list>.list-title {
    font-size: 15px;
    margin: 0 0 1em 0;
    color: rgb(var(--l-text_link));
    font-weight: 500;
    letter-spacing: 0.3px;
}

.cFooter_list>li:not(.list-title) {
    margin-top: 0.5em;
}

.cFooter_list>li:not(.list-title)>a {
    font-size: 15px;
    display: inline-flex;
    color: rgb(var(--l-text_color));
}

.cFooter_list>li:not(.list-title)>a:hover {
    color: rgb(var(--l-text_link));
}

.cFooter_bottom {
    position: relative;
    padding: 1.5em 0;
    border-top: 1px solid rgb(var(--l-border_main));
}

.cFooter_bottom>.theme-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.company-details {
    display: flex;
    flex-direction: column;
    gap: 0.15em;
    flex: 1;
}

#companyName {
    color: rgb(var(--l-text_link));
    font-weight: 500;
    font-size: 14px;
}

.company-details-inner {
    display: flex;
    align-items: center;
}

.company-details-inner>li {
    font-size: 13px;
}

.payments-list {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1em;
    flex-wrap: wrap;
    background: rgb(var(--l-border_main));
    padding: 2em;
    margin-bottom: 3em;
    border-radius: var(--l-border_radius);
}

.payments-list>li {
    display: flex;
    gap: 0.5em;
    align-items: center;
}

html.mode\:dark .payments-list>li {
    color: rgb(var(--l-text_link));
}

.payments-list>li .fill-area {
    fill: rgb(var(--l-area_background));
}

/* Language Manager */
.elLang_button {
    padding: 0.5em;
    display: flex;
    align-items: center;
    cursor: pointer;
    background: var(--l-brand_gradient);
    box-shadow: var(--box-shadow_sm);
    border-radius: 4px;
}

.elLang_button>strong {
    font-size: 13px;
    font-weight: 500;
    padding: 0 1em 0 0.5em;
    line-height: 1;
    color: rgb(var(--l-text_very_light));
}

.elLang_button>img {
    width: 25px;
    height: 25px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid rgb(var(--l-area_background));
}

.elLang-group {
    padding: 1.5em;
}

.elLang-group:not(:first-child) {
    border-left: 1px solid rgb(var(--l-border_main));
}

.elLang-group>.item-title {
    color: rgb(var(--l-text_link));
    font-size: 14px;
    text-transform: capitalize;
    margin: 0 0 1em 0;
    font-weight: 500;
}

.elLang-group li {
    transition: all 0.2s;
}

.elLang-group li>a {
    position: relative;
    color: rgb(var(--l-text_link));
    font-weight: 500;
    letter-spacing: 0.3px;
    height: 40px;
    padding: 0.75em;
    min-width: 200px;
    display: flex;
    align-items: center;
    background: rgb(var(--l-border_main));
    border-radius: 4px;
}

.elLang-group li:not(:last-child)>a {
    margin-bottom: 0.5em;
}

.elLang-group li>a.active {
    background: var(--l-brand_gradient);
    color: rgb(var(--l-text_very_light));
}

.elLang-group li>a.active:before {
    content: "\f00c";
    font-family: "Font Awesome 5 Pro";
    position: absolute;
    right: 12px;
    color: inherit;
    font-size: 10px;
}

.elLang-group li>a:hover:not(.active) {
    background: rgb(var(--l-brand_primary), 0.2);
    color: rgb(var(--l-brand_primary));
}

.elLang-group li>a>img {
    width: 20px;
    height: 20px;
    border-radius: 3px;
    object-fit: cover;
    border: 1px solid rgb(var(--l-area_background));
    margin-right: 10px;
}

#elLang_menu {
    position: absolute;
    bottom: 50px;
    right: 20px;
    display: flex;
    flex-direction: column;
    background: rgb(var(--l-area_background));
    border: 1px solid rgb(var(--l-border_main));
    box-shadow: var(--box-shadow_sm);
    border-radius: var(--l-border_radius);
    min-width: 180px;
    transform: translateY(50px) scale(0.5);
    opacity: 0;
    visibility: hidden;
    transition: ease-in-out 0.25s;
}

#elLang_menu.active {
    transform: translateY(0) scale(1);
    opacity: 1;
    visibility: visible;
    transition: ease-in 0.4s;
}

#elLang_menu>.cys-Separator_horizontal {
    display: block;
    width: 100%;
    background: #cfcfcf;
    height: 1px;
    margin-top: 10px;
}

.elLang-inner {
    display: flex;
}

.elLang_submit {
    display: flex;
    padding: 1.5em;
    border-top: 1px solid rgb(var(--l-border_main));
}

.elLang_submit>button {
    width: 100%;
    padding: 10px;
    background: var(--l-brand_gradient);
    color: rgb(var(--l-text_very_light));
    font-weight: 500;
    letter-spacing: 1px;
    font-size: 12px;
    border: none;
    appearance: none;
    border-radius: 5px;
    transition: all 0.25s linear;
}

/* Tickets */
.elTicket_info {
    background: rgb(var(--l-area_background));
    border: 1px solid rgb(var(--l-border_main));
    box-shadow: var(--box-shadow_sm);
    border-radius: var(--l-border_radius);
    position: relative;
    padding: var(--padding-3);
}

.elTicketInfo_list {
    display: flex;
    align-items: center;
    padding: 0;
    margin: 0;
    list-style: none;
}

.elTicketInfo_header {
    display: flex;
    align-items: center;
    position: relative;
}

.elTicketInfo_alert {
    margin: var(--spacing-5) 0 0 0;
    padding: var(--padding-4) 0 0 0;
    border-top: 1px solid rgb(var(--l-border_main));
}

.elTicketInfo_alert>* {
    margin: 0;
}

.elTicketInfo_alert>*:not(:last-of-type, :only-of-type) {
    margin-bottom: var(--spacing-5);
}

.elTicketInfo_subject {
    font-size: 20px;
    color: rgb(var(--l-text_link));
    margin: 0 0 var(--spacing-1) 0;
    line-height: 1;
    font-weight: bold;
}

#elTicketReply {
    position: relative;
    display: flex;
    flex-direction: column;
    background: rgb(var(--l-area_background));
    border: 1px solid rgb(var(--l-border_main));
    box-shadow: var(--box-shadow_sm);
    margin-top: var(--spacing-7);
    border-radius: var(--l-border_radius);
}

.elTicketReply_title {
    display: flex;
    align-items: center;
    position: relative;
    padding: var(--padding-2);
    color: rgb(var(--l-text_link));
    font-size: 15px;
    gap: 0.6em;
    cursor: pointer;
}

#elTicketReply.is-active .elTicketReply_title {
    border-bottom: 1px solid rgb(var(--l-border_main));
}

.elTicketReply_title>span {
    flex: 1;
}

.elTicketReply_form>form {
    padding: var(--padding-3);
}

.elTicketReply_form {
    overflow: hidden;
    height: 0;
    transition: 0.25s ease-in-out;
}

#elTicketReply.is-active .elTicketReply_form {
    height: auto;
    opacity: 1;
    visibility: visible;
    max-height: 1000px;
    display: block;
}

.elTicket {
    background: rgb(var(--l-area_background));
    border: 1px solid rgb(var(--l-border_main));
    box-shadow: var(--box-shadow_sm);
    border-radius: var(--l-border_radius);
    position: relative;
    margin: var(--spacing-7) 0 0 0;
}

.elTicketReply_admin {
    border-left: 5px solid rgb(var(--l-brand_primary));
}

.elTicket_header {
    padding: var(--padding-3);
    border-bottom: 1px solid rgb(var(--l-border_main));
    position: relative;
    display: flex;
    align-items: center;
}

.elTicketHeader_group {
    flex: 1;
}

.elTicketHeader_title {
    font-size: 18px;
    color: rgb(var(--l-text_link));
    margin: 0 0 var(--spacing-1) 0;
    line-height: 1;
}

.elTicket_rating>.ticket-rating {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    flex-direction: row-reverse;
    padding: 0;
    font-size: 16px;
    direction: ltr;
    float: unset;
    line-height: 1;
}

.elTicket_rating .star:before {
    content: none !important;
}

.elTicket_rating .star:after {
    content: "\f005";
    font-family: "Font Awesome 6 Pro";
}

.elTicket_rating>.ticket-rating:not(.ticket-rated) .star:after {
    cursor: pointer;
}

.elTicket_rating>.ticket-rating:not(.ticket-rated) .star:hover:after,
.elTicket_rating>.ticket-rating:not(.ticket-rated) .star:hover~.star:after {
    color: rgb(var(--l-brand_primary));
}

.elTicket_rating>.ticket-rating .star.active:after {
    color: rgb(var(--l-brand_primary));
    font-weight: 900;
}

.elTicket_body {
    position: relative;
    padding: var(--padding-3);
}

.elTicket_message>p {
    font-size: 17px;
    margin: 0;
}

.elTicket_message>p:not(:last-of-type, :only-of-type) {
    margin: 0 0 var(--spacing-4) 0;
}

.elTicket_message>ul {
    border-radius: var(--l-border_radius);
    padding: var(--padding-1) var(--padding-1) var(--padding-1) var(--padding-5);
    margin: var(--spacing-4) 0;
    border-left: 2px solid rgb(var(--l-brand_primary));
    box-shadow: var(--box-shadow_sm);
    background: rgb(var(--l-border_main), 0.7);
    font-size: 16px;
    color: rgb(var(--l-text_link));
    display: flex;
    flex-direction: column;
    gap: 0.25em;
}

.elTicket_message>ul:last-of-type {
    margin-bottom: 0;
}

.elTicket_footer {
    padding: var(--padding-3);
    border-top: 1px solid rgb(var(--l-border_main));
}

.elTicketClient_address {
    display: inline-block;
}

.elTicketClient_address>.blur {
    filter: blur(4.5px);
    transition: all 0.4s ease 0s;
}

.elTicketClient_address:hover>.blur {
    filter: blur(0);
}

.elTicket_attachments {
    border-top: 1px dashed rgb(var(--l-border_main));
    padding: var(--padding-3);
}

.elTicketAttack_list {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1em;
    flex-wrap: wrap;
    padding: 0;
    margin: var(--spacing-2) 0 0 0;
    list-style: none;
}

.elTicketAttach_title {
    font-weight: 500;
    font-size: 13px;
    color: rgb(var(--l-text_link));
}

.elTicketAttack_list>li .attachment {
    display: flex;
    align-items: center;
    gap: 0.5em;
    background: rgb(var(--l-border_main));
    padding: var(--padding-1) var(--padding-2);
    border-radius: var(--l-border_radius);
}

.elTicketAttack_list>li .attachment>figure {
    margin: 0;
}

@media screen and (max-width: 979px) {
    .clientAuth_company {
        display: none;
    }

    .clientArea-auth {
        grid-template-columns: 1fr;
        max-height: unset;
    }

    .clientAuthLogin>form {
        min-width: auto;
    }

    .clientAuthRegister {
        height: auto;
        padding: 1em;
    }

    .cFieldRow_group {
        flex-wrap: wrap;
    }
}
