@import url("/PTTGlobal_Web_Resources/Theme.FontIcon.css?1033");

/* =====================================================================
========================================================================

PTTGlobal_Theme

    [NOTE]
        . This theme is based on Outsystems UI Theme Structure and CSS BEM best practices.
        . Below you can find the CSS map Structure that is been used on the Outsystems UI.

Outsystems UI Theme Structure:

    $0 - Root - CSS Variables
    $1 - Resets (https://necolas.github.io/normalize.css/)
    $2 - HTML Elements
        - Links
        - Images
        - Headings
        - Inputs and Selectors
        - Buttons
    $3 - Page Layout
        - Header                 
        - Menu                                       
        - Content                                    
    $4 - Patterns
        - Content
            - Content - Accordion
            - Content - Alert
            - Content - Animate
            - Content - Balloon
            - Content - BlankSlate
            - Content - Bullets
            - Content - Card
            - Content - CardBackground
            - Content - CardSectioned
            - Content - Carousel
            - Content - ChatMessage
            - Content - LightBoxImage
            - Content - Modal
            - Content - Panel
            - Content - Section
            - Content - Tag
            - Content - Tooltip
        - Controls
            - Controls - AnimatedLabel
            - Controls - ButtonGroup
            - Controls - DatePicker
            - Controls - Dropdown
            - Controls - DropdownSelect
            - Controls - FileUpload
            - Controls - InputWithIcon
            - Controls - RangeSlider
            - Controls - Search
            - Controls - SearchBalloon
            - Controls - ToogleButton
        - Numbers
            - Numbers - Badge
            - Numbers - Counter
            - Numbers - IconBadge
            - Numbers - ProgressBar
            - Numbers - ProgressCircle
            - Numbers - UserAvatar
        - Layouts
            - Layouts - Logins
        - Navigation
            - Navigation - Breadcrumbs
            - Navigation - NavigationBar
            - Navigation - Sidebar
            - Navigation - Tabs
            - Navigation - Timeline
            - Navigation - Wizard
        - Responsive
            - Responsive - ResponsiveTables
        - Structure
            - Structure - AlignCenter
            - Structure - Columns
            - Structure - Gallery
        - Utilities
            - Utilities - Separator
    $5 - Widgets & RichWidgets
        - Widgets - Form / EditRecord
        - Widgets - TableRecords / EditableTable
        - RichWidgets - CounterMessage
        - RichWidgets - FeedbackAjaxWait
        - RichWidgets - FeedbackMessage
        - RichWidgets - Pagination
        - RichWidgets - PopupEditor
    $6 - Styles
        - Styles - Typography
        - Styles - Colors
        - Styles - Space
        - Styles - Border Radius
        - Styles - Border Size
        - Styles - Elevation/Shadows
        - Styles - Display Flex Properties
        - Styles - Others
    $7 - Right-to-Left Mode
        - RTL Mode - Page Layout / HTML Elements
        - RTL Mode - Patterns - Content
        - RTL Mode - Patterns - Controls
        - RTL Mode - Patterns - Numbers
        - RTL Mode - Patterns - Navigation
        - RTL Mode - Patterns - Responsive
        - RTL Mode - Widgets & RichWidgets
        - RTL Mode - Styles
    $8 - Custom Patterns
    $9 - Custom Styles

========================================================================
======================================================================== */


/* ===================================================================== */
/*  Include Fonts
/* ===================================================================== */

/* Include PTTGlobal WebFont */

@font-face {
    font-family: 'DBHeavent';
    src: url('/PTTGlobal_Web_Resources/db_heavent_li_v3.2-webfont.woff2') format('woff2'),
         url('/PTTGlobal_Web_Resources/db_heavent_li_v3.2-webfont.woff') format('woff'),
         url('/PTTGlobal_Web_Resources/db_heavent_li_v3.2-webfont.ttf') format("truetype");
    font-style: normal;
    font-size: 14px;
}

@font-face {
    font-family: 'DBHeavent';
    src: url('/PTTGlobal_Web_Resources/db_heavent_v3.2-webfont.woff2') format('woff2'),
         url('/PTTGlobal_Web_Resources/db_heavent_v3.2-webfont.woff') format('woff'),
         url('/PTTGlobal_Web_Resources/db_heavent_v3.2-webfont.ttf') format("truetype");
    font-weight: 400;
    font-style: normal;
    font-size: 14px;
}

@font-face {
    font-family: 'DBHeavent';
    src: url('/PTTGlobal_Web_Resources/db_heavent_med_v3.2-webfont.woff2') format('woff2'),
         url('/PTTGlobal_Web_Resources/db_heavent_med_v3.2-webfont.woff') format('woff'),
         url('/PTTGlobal_Web_Resources/db_heavent_med_v3.2-webfont.ttf') format("truetype");
    font-weight: 600;
    font-style: normal;
    font-size: 14px;
}

@font-face {
    font-family: 'DBHeavent';
    src: url('/PTTGlobal_Web_Resources/db_heavent_bd_v3.2-webfont.woff2') format('woff2'),
         url('/PTTGlobal_Web_Resources/db_heavent_bd_v3.2-webfont.woff') format('woff'),
         url('/PTTGlobal_Web_Resources/db_heavent_bd_v3.2-webfont.ttf') format("truetype");
    font-weight: 700;
    font-style: normal;
    font-size: 14px;
}

/* ===================================================================== */
/*  $0 - Root - CSS Variables
/* ===================================================================== */

/* Changed CSS variables to adapt the Theme to the PTTGlobal mockups */
:root {
    /* Typography - Size */
    --page-title: 60px;
    
    --font-size-h4: 24px;
      
    /* Color - Brand */
    --color-primary: #0057B8;
    --color-secondary: #00AEEF;
    
    --color-primary-lightest: #C6E1FF;
    --color-primary-hover: #303D60;
    
    /* Color - Extended */
    --color-red: #E4002B;
    --color-red-dark: #ED1C24;
    
    --color-lime: #C2D50A;
    
    --color-green: #008831;
    
    --color-red: #cc4b4c;
    
    --color-cyan: #00A3AD;
    
    --color-blue: #00B5E2;
    --color-blue-darkest: #1B1464;
    
    --color-violet-dark: #4D49BE;
    
    --color-pink-dark: #C800A1;
    
    /* Color - Neutral */
    --color-neutral-1: #F8F8F8;
    --color-neutral-3: #ECECEC;
    --color-neutral-4: #DEE2E6;
    --color-neutral-5: #D7D7D7;
    --color-neutral-6: #B1B3B3;
    --color-neutral-7: #888B8D;
    --color-neutral-8: #4A4A4A;
    --color-neutral-10: #000000;
    
    /* Color - Semantic */
    --color-error: #E4002B;
    
    --color-warning: #FFC72C;
    
    --color-success: #00B140;
    
    --color-info: #005EB8;
    
    /* Color - Extra */
    --color-gradient-1: linear-gradient(270deg, #00AEEF 0%, #0057B8 100%);
    --color-gradient-2: linear-gradient(270deg, #1B1464 0%, #0057B8 100%);
    --color-gradient-3: linear-gradient(180deg, #008FDD 0%, #0059BA 100%);
    
    /* Border Radius */
    --border-radius-soft: 6px;
    --border-radius-softer: 20px;
    
    /* Elevation / Shadow */
    --shadow-m:  0 2px 6px 0 rgba(0,0,0,0.25);
    
    /* App Settings */
    --color-background-body: #fbfbfb;
}

/* ================================================================ */
/*  $1 - Resets
/* ================================================================ */

* {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
}

html {    
    font-family: DBHeavent, sans-serif;
    
}

body {    
    background-color: var(--color-background-body);
    font-size: var(--font-size-s);
}

/* ================================================================ */
/*  $2 - HTML Element
/* ================================================================ */
input, 
textarea, 
select, 
button { 
    font-size: var(--font-size-h6);
}

.input,
.select {
    border-radius: var(--border-radius-rounded);
}


textarea.input {
    border-radius: 10px;
}

.input[disabled="disabled"], 
.input[disabled="disabled"], 
.input[readonly="readonly"], 
textarea[readonly="readonly"],
select[disabled="disabled"] {
    background: var(--color-neutral-5);
    border-color: var(--color-neutral-5);
    color: var(--color-neutral-8);
}

.input.border-radius-soft,
.select.border-radius-soft {
    border-radius: var(--border-radius-soft);
}

.input.border-radius-none,
.select.border-radius-none {
    border-radius: var(--border-radius-none);
}

/* Inputs placeholder color */
::-webkit-input-placeholder     { color: var(--color-neutral-7); }
::-moz-placeholder              { color: var(--color-neutral-7); }
:-ms-input-placeholder          { color: var(--color-neutral-7); }
:-moz-placeholder               { color: var(--color-neutral-7); }

/* Buttons */
.Is_Default {
    background: var(--color-gradient-1);
}

.Button,
.btn {
    border-radius: var(--border-radius-rounded);
    font-size: var(--font-size-h6);
}

.Button[class*="text-"],
.btn[class*="text-"] {
    background: transparent;
    background-color: var(--color-neutral-0);
    border: var(--border-size-s) solid currentColor;
}

.Button[class*="text-"][disabled="disabled"], 
.btn[class*="text-"][disabled="disabled"],
[disabled="disabled"], 
[readonly="readonly"], 
textarea[readonly="readonly"] {
    background: var(--color-neutral-2);
    border-color: var(--color-neutral-4);
    color: var(--color-neutral-7);
}

.Button.border-radius-soft,
.btn.border-radius-soft {
    border-radius: var(--border-radius-soft);
}

.Button.border-radius-none,
.btn.border-radius-none {
    border-radius: var(--border-radius-none);
}

.Button:not(.Is_Default):hover {
    -webkit-filter: brightness(1);
    filter: brightness(1);
    background-color: #eef5fe;
}

.Button:not(.Is_Default):hover:active {
    -webkit-filter: brightness(1);
    filter: brightness(1);
    background-color: #e1ecfe;
}

/* ================================================================ */
/*  $3 - Layout
/* ================================================================ */
.app-logo {
    height: 32px;
    width: auto;
}

.layout-pttgc .app-logo {
    height: 50px;
    width: auto;
}


.header-banner {
    height: 400px;
    position: relative;
    width: 100%;
    z-index: -1;
}

.header-banner img {
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.header-banner:after {
    background: linear-gradient(180deg, #000000 0%, rgba(0,87,184,0.15) 100%);
    content: '';
    position: absolute;
    height: 100%;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 1;
}

.layout-pttgc {
    --header-size: 90px;
}

.layout-pttgc .header {
    font-size: var(--font-size-h6);
}

.layout-pttgc .header-center {
    background-color: var(--color-neutral-4);
    height: 50px;
}

.layout-pttgc .header-top {
    justify-content: space-between;
}

.header-top {
    
}

.layout-pttgc .Menu_TopMenu > div,
.layout-pttgc .Menu_TopMenu > div a,
.layout-pttgc .Menu_TopMenu > div a:visited {
    color: var(--color-neutral-10);
    font-weight: var(--font-regular);
}

.Menu_TopMenu > div,
.Menu_TopMenu > div a,
.Menu_TopMenu > div a:visited {
    font-size: var(--font-size-h6);
}

.layout-pttgc .header .Menu_TopMenu:hover,
.layout-pttgc .header .Menu_TopMenu.Menu_TopMenuActive {
    border-bottom: var(--border-size-m) solid transparent;
}

.layout.is-dark .header {
    background-color: var(--color-primary);
    color: var(--color-neutral-0);
}

.is-dark .header a,
.is-dark .header a:visited {
    color: var(--color-neutral-0);
}

.is-dark .menu-icon-line {
    background-color: var(--color-neutral-0);
}

.is-dark .Menu_DropDownPanel a, 
.is-dark .Menu_DropDownPanel a:link,
.is-dark  .Menu_DropDownPanel a:visited {
    color: var(--color-neutral-8);
}

.is-dark .Menu_DropDownPanel a.Menu_SubMenuItemActive {
    color: var(--color-primary);
}

.layout:not(.layout-pttgc).is-dark .Menu_TopMenu > div a,
.layout:not(.layout-pttgc).is-dark .Menu_TopMenu > div a:visited {
    color: var(--color-neutral-0);
}

.layout:not(.layout-pttgc).is-dark .Menu_TopMenu:hover > div .Menu_DropDownArrow:before,
.layout:not(.layout-pttgc).is-dark .Menu_TopMenu:hover > div .Menu_DropDownArrow:after {
    background-color: var(--color-neutral-0);
}

.layout:not(.layout-pttgc).is-dark .Menu_TopMenuActive > div a,
.layout:not(.layout-pttgc).is-dark .Menu_TopMenuActive > div a:visited,
.layout:not(.layout-pttgc).is-dark .Menu_TopMenuActive > div a:hover,
.layout:not(.layout-pttgc).is-dark .Menu_TopMenu:hover.Menu_TopMenuActive > div a {
    color: var(--color-secondary);
}

.layout:not(.layout-pttgc).is-dark .header .Menu_TopMenu:hover, 
.layout:not(.layout-pttgc).is-dark .header .Menu_TopMenu.Menu_TopMenuActive {
    border-bottom: var(--border-size-m) solid var(--color-secondary);
}

.header .radio-button:before {
    background-color: var(--color-primary);
    border: var(--border-size-s) solid var(--color-primary);
}

.header .radio-button:checked:before {
    background-color: var(--color-neutral-0);
    height: 21px;
    width: 21px;
}

.is-dark .header .radio-button:before {
    background-color: var(--color-neutral-0);
    border: var(--border-size-s) solid var(--color-neutral-0);
}

.is-dark .header .radio-button:checked:before {
    background-color: var(--color-primary);
    border: var(--border-size-s) solid var(--color-neutral-0);
}

.layout-pttgc .content-middle {
    position: relative;
    padding: var(--space-xl);
}

.layout-pttgc .content-middle:before {
    background: -webkit-gradient(linear, left top, left bottom, from(var(--color-neutral-0)), to(var(--color-background-body)));
    background: -o-linear-gradient(top, var(--color-neutral-0) 0%, var(--color-background-body) 100%);
    background: linear-gradient(180deg, var(--color-neutral-0) 0%, var(--color-background-body) 100%);
    -webkit-box-shadow: 0 -8px 12px 0 rgba(0,0,0,0.05);
            box-shadow: 0 -8px 12px 0 rgba(0,0,0,0.05);
    content: '';
    height: 435px;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1;
}

.layout-pttgc .content-top-actions,
.layout-pttgc .content-top-title {
    margin-bottom: var(--space-none);
}

.content-top-title.page-title {
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


.layout-pttgc .main {
    --header-gutter: calc(var(--header-size) + 50px);
}

.layout-pttgc .content .header-banner:not(:empty) + .main-content .content-top-title {
    color: var(--color-neutral-0);
}

.layout-pttgc .content .header-banner:not(:empty) + .main-content {
    margin-top: -100px;
}

.layout-pttgc .content .main-content {
    margin-top: var(--space-xl);
    padding: var(--space-none) var(--space-xl);
}

.header-control-top {
    background: -webkit-gradient(linear, left top, left bottom, from(var(--color-neutral-0)), to(var(--color-background-body)));
    background: -o-linear-gradient(top, var(--color-neutral-0) 0%, var(--color-background-body) 100%);
    background: linear-gradient(180deg, var(--color-neutral-0) 0%, var(--color-background-body) 100%);
    -webkit-box-shadow: 0 -8px 12px 0 rgba(0,0,0,0.05);
    box-shadow: 0 -8px 12px 0 rgba(0,0,0,0.05);
}

.layout-pttgc.layout-overlay .content-middle:before {
    display: none;
}

.header-control-content,
.header-control-footer {
    padding: var(--space-m) var(--space-xl);
}

.header-control-content {
    background-color: var(--color-neutral-0);
}

.header-control-footer {
    background-color: var(--color-neutral-3);
}

.layout-top .footer-banner.ThemeGrid_Container {
    padding-bottom: var(--space-none);
    text-align: right;
}

.footer-content-wrapper {
    border-top: var(--border-size-s) solid rgba(0, 0, 0, 0.25);
}


.layout-pttgc .Menu_TopMenus {
    text-transform: uppercase;
}

.phone .app-logo {
    height: 30px;
}

.phone .header-left {
    height: 100%;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    left: 0;
    position: absolute;
    width: 100%;
}

.tablet .layout-pttgc .header-center,
.phone .layout-pttgc .header-center {
    background-color: transparent;
    height: auto;
}

.phone .layout-pttgc .header-top {
    -webkit-box-pack: initial;
        -ms-flex-pack: initial;
            justify-content: initial;
    position: relative;
}

.phone .layout-pttgc .content-middle {
    padding: var(--space-m);
}

.phone .layout-pttgc .content .main-content {
    padding: var(--space-base);
}

.tablet .layout-pttgc .main,
.phone .layout-pttgc .main {
    --header-gutter: var(--header-size);
}

.tablet .menu-icon,
.phone .menu-icon {
    z-index: 2;
}

/* MainContent IE Fix */
.ie10 .main-content,
.ie11 .main-content {
    -webkit-box-flex: none;
            -ms-flex: none;
                flex: none;
}

.error-title {
    color: var(--color-primary);
    font-size: 140px;
    font-weight: var(--font-bold);
    line-height: 0.7em;
}

.error-subtitle {
    color: var(--color-neutral-7);
    font-size: var(--font-size-display);
}

/* ================================================================ */
/*  $4 - Patterns
/* ================================================================ */
/* Content - Accordion */
.accordion-item.is--open {
    border-top: var(--border-size-s) solid var(--color-neutral-4);
}

.accordion-item .accordion-item-header {
    padding: var(--space-base) var(--space-m);
    color: var(--color-neutral-7);
}

.accordion-item.is--open .accordion-item-header {
    color: var(--color-primary);
}

/* Content - Card */
.card {
    border: var(--border-size-none);
    box-shadow: var(--shadow-m);
}

/* Content - CardBackground */
.card-background-image[style*=background-image] {
    background-size: cover;
    background-position: center center;
}

.card-background-image[style*=background-image] > img {
    display: none;
}

/* Content - Modal */
.modal-title {
    font-size: var(--font-size-h3);
}

.modal-content {
    font-size: var(--font-size-h4);
}

.modal-footer {
    border-top: var(--border-size-none);
}

.modal-wrapper {
    max-width: 754px;
}

/* Content - Tooltip */
.tooltip {
    background-color: var(--color-cyan-darkest);
    font-weight: var(--font-semi-bold);
    padding: var(--space-xs) var(--space-base);
}

.tippy-popper[x-placement^=top] .tippy-arrow  {
    border-top-color: var(--color-cyan-darkest);
}

.tippy-popper[x-placement^=bottom] .tippy-arrow  {
    border-bottom-color: var(--color-cyan-darkest);
}

.tippy-popper[x-placement^=left] .tippy-arrow  {
    border-left-color: var(--color-cyan-darkest);
}

.tippy-popper[x-placement^=right] .tippy-arrow  {
    border-right-color: var(--color-cyan-darkest);
}

/* Controls - AnimatedLabel */
.animated-label-inline .animated-label-input input:hover, 
.animated-label-inline .animated-label-input input:focus {
    border-top:none;
    border-left:none;
    border-right:none;
}

/* Controls - ButtonGroup */
.button-group input[type="radio"] {
    z-index: 1;
}

.button-group input[type="radio"]:checked + .btn {
    background-color: rgba(0,87,184,0.2);
    color: var(--color-primary);
}

/* Controls - Dropdown */
.dropdown .dropdown-content .dropdown-content-list a {
    margin: var(--space-none) var(--space-xs);
}

.dropdown .dropdown-content .dropdown-content-list a:hover {
    background-color: var(--color-primary);
    border-radius: var(--border-radius-soft);
    color: var( --color-neutral-0);
}

/* Controls - DropdownSelect */
.choices__list--dropdown .choices__list {
    min-height: 40px;
}

.choices__inner {
    border-radius: var(--border-radius-rounded);
}

.choices.is-open.is-focused .choices__inner {
    border-radius: var(--border-radius-rounded);
}

.choices__list--dropdown .choices__item--selectable.is-highlighted {
    background-color: var(--color-primary);
    border-radius: var(--border-radius-soft);
    color: var( --color-neutral-0);
}

.choices__list--dropdown .choices__item--selectable {
    margin: var(--space-xs);
}

.choices[data-type*="select-multiple"] .choices__inner {
    border-radius: var(--border-radius-rounded);
}

.choices .search--wrapper input:not(.btn):not(.checkbox):not(.radio-button),
.choices .search--wrapper .input {
    border-radius: var(--border-radius-rounded);
}

/* Controls - SearchBalloon */
.search-balloon a {
    margin: var(--space-xs);
}

.search-balloon a:hover {
    background-color: var(--color-primary);
    border-radius: var(--border-radius-soft);    
    color: var(--color-neutral-0);
}

/* Controls - ToogleButton */
.toggle-button .checkbox:before {
    background-color: var(--color-neutral-4);
    border: var(--border-size-s) solid var(--color-neutral-4);
    height: 24px;
}

.toggle-button .checkbox:hover:before {
    background-color: var(--color-neutral-5);
    border: var(--border-size-s) solid var(--color-neutral-5);
}

.toggle-button .checkbox:checked:before {
    background-color: var(--color-primary);
    border: var(--border-size-s) solid var(--color-primary);
}

.toggle-button .checkbox:after {
    background-color: var(--color-neutral-0);
    border: var(--border-size-s) solid var(--color-neutral-5);
    border-radius: 100%;
    height: 24px;
    left: 0;
    top: 0;
    -webkit-transform: translateX(0);
            transform: translateX(0);
    width: 24px;
}

.toggle-button .checkbox:checked:after {
    -webkit-transform: translateX(24px);
            transform: translateX(24px);
}

.toggle-button .checkbox[disabled="disabled"]:before {
    background-color: var(--color-neutral-4);
    border: var(--border-size-s) solid var(--color-neutral-4);
}

.toggle-button .checkbox[disabled="disabled"]:after {
    background-color: var(--color-neutral-2);
}

.toggle-button .checkbox[disabled="disabled"]:checked:before {
    background-color: var(--color-neutral-8);
    border: var(--border-size-s) solid var(--color-neutral-8);
}

/* Navigation - Sidebar */
.ie10 .navigation-bar.is--sticky,
.ie11 .navigation-bar.is--sticky {
    position: relative;
}

/* Numbers - ProgressBar*/
.ie10 .progress-container .progress,
.ie11 .progress-container .progress {
    -webkit-box-flex: auto;
            -ms-flex: auto;
                flex: auto;    
}

/* Navigation - Breadcrumbs */
.breadcrumbs {
    font-size: var(--font-size-h6);
}

.breadcrumbs-item .icon {
    color: var(--color-primary);
    margin: var(--space-none) var(--space-xs);
}

/* Navigation - Tabs */
.tabs-header-item {
    color: var(--color-neutral-7);
    margin-left: var(--space-none);
    padding: var(--space-base) var(--space-m);
}

.tabs-header-item .ptt  {
    margin-right: var(--space-s);
    width: auto;
}

.tabs-header-item.active {
    color: var(--color-primary);
}

.tabs-header-item.active .ptt {
    color: var(--color-primary);
}

/* Navigation - Wizard */
.wizard-item-icon .fa-fw {
    font-size: var(--font-size-base);
}

.ie10 .wizard-item.label-top .wizard-item-label,
.ie11 .wizard-item.label-top .wizard-item-label {
    -webkit-box-flex: auto;
            -ms-flex: auto;
                flex: auto;
}

.ie10 .wizard-item,
.ie11 .wizard-item {
    -webkit-box-flex: auto;
            -ms-flex: auto;
                flex: auto;
}

/* badge */
.badge[class*=background-transparent] {
    background-color: transparent;
}

/* User Initials */
.user-avatar[class*=background-transparent] {
    background-color: transparent;
}

/* ================================================================ */
/*  $5 - Widgets & RichWidgets
/* ================================================================ */

/* Editable Table */
.OnEdit.EditableTable input:not(.btn):not(.checkbox):not(.radio-button)[readonly="readonly"] {
    color: var(--color-neutral-10);
}

.EditableTable.OnEdit, .EditableTable.OnEdit td.RowWithAddAction {
    background-color: transparent;
}

.EditableTable.OnEdit tr {
    opacity: 1;
}

.EditableTable tbody tr.Selected {
    background-color: var(--color-neutral-0);
}

.EditableTable tr.Selected td {
    background-color: var(--color-neutral-0);
}

tr.Selected.OnEdit td {
    border: var(--border-size-s) solid var(--border-size-s);
}

.EditableTable tr.Selected td {
    border: var(--border-size-s) solid var(--color-primary);
}

.EditableTable tr.Selected td:not(:first-child) {
    border-left: var(--border-size-none);
}

.EditableTable tr.Selected td:not(:last-child) {
    border-right: var(--border-size-none);
}

.EditableTable tbody tr.Selected.OnEdit td {
    border-bottom: var(--border-size-s) solid var(--color-primary);
}

.EditableTable tr.RowControlGroup .ControlActions {
    background-color: var(--color-primary);
    border-top: var(--border-size-none);
    border: var(--border-size-s) solid var(--color-primary);
    border-radius: 0 0 5px 5px;
    height: 31px;
    width: 113px;
}

.EditableTable tr.RowControlGroup a {
    color: var(--color-neutral-0);
}

.ListNavigation_CurrentPageNumber {
    background: var(--color-neutral-0);
    border: var( --border-size-s) solid var(--color-primary);
}

span.ListNavigation_DisabledPrevious,
span.ListNavigation_DisabledNext,
a.ListNavigation_Previous,
a.ListNavigation_Next,
.ListNavigation_CurrentPageNumber,
.ListNavigation_PageNumber {
    height: 28px;
    width: 28px;
}

/* ================================================================ */
/*  $6 - Styles
/* ================================================================ */
/* Typography */
.page-title {
    font-size: var(--page-title);
    letter-spacing: 1.88px;
    line-height: 71px;
}

.text-underline {
    text-decoration: underline;
}

/* BorderColors - Brand */
.border-color-primary         { border-color: var(--color-primary); }
.border-color-secondary       { border-color: var(--color-secondary); }

/* BorderColors - Extendend */
.border-color-red-lightest    { border-color: var(--color-red-lightest); }
.border-color-red-lighter     { border-color: var(--color-red-lighter); }
.border-color-red-light       { border-color: var(--color-red-light); }
.border-color-red             { border-color: var(--color-red); }
.border-color-red-dark        { border-color: var(--color-red-dark); }
.border-color-red-darker      { border-color: var(--color-red-darker); }
.border-color-red-darkest     { border-color: var(--color-red-darkest); }

.border-color-pink-lightest   { border-color: var(--color-pink-lightest); }
.border-color-pink-lighter    { border-color: var(--color-pink-lighter); }
.border-color-pink-light      { border-color: var(--color-pink-light); }
.border-color-pink            { border-color: var(--color-pink); }
.border-color-pink-dark       { border-color: var(--color-pink-dark); }
.border-color-pink-darker     { border-color: var(--color-pink-darker); }
.border-color-pink-darkest    { border-color: var(--color-pink-darkest); }

.border-color-grape-lightest  { border-color: var(--color-grape-lightest); }
.border-color-grape-lighter   { border-color: var(--color-grape-lighter); }
.border-color-grape-light     { border-color: var(--color-grape-light); }
.border-color-grape           { border-color: var(--color-grape); }
.border-color-grape-dark      { border-color: var(--color-grape-dark); }
.border-color-grape-darker    { border-color: var(--color-grape-darker); }
.border-color-grape-darkest   { border-color: var(--color-grape-darkest); }

.border-color-violet-lightest { border-color: var(--color-violet-lightest); }
.border-color-violet-lighter  { border-color: var(--color-violet-lighter); }
.border-color-violet-light    { border-color: var(--color-violet-light); }
.border-color-violet          { border-color: var(--color-violet); }
.border-color-violet-dark     { border-color: var(--color-violet-dark); }
.border-color-violet-darker   { border-color: var(--color-violet-darker); }
.border-color-violet-darkest  { border-color: var(--color-violet-darkest); }

.border-color-indigo-lightest { border-color: var(--color-indigo-lightest); }
.border-color-indigo-lighter  { border-color: var(--color-indigo-lighter); }
.border-color-indigo-light    { border-color: var(--color-indigo-light); }
.border-color-indigo          { border-color: var(--color-indigo); }
.border-color-indigo-dark     { border-color: var(--color-indigo-dark); }
.border-color-indigo-darker   { border-color: var(--color-indigo-darker); }
.border-color-indigo-darkest  { border-color: var(--color-indigo-darkest); }

.border-color-blue-lightest   { border-color: var(--color-blue-lightest); }
.border-color-blue-lighter    { border-color: var(--color-blue-lighter); }
.border-color-blue-light      { border-color: var(--color-blue-light); }
.border-color-blue            { border-color: var(--color-blue); }
.border-color-blue-dark       { border-color: var(--color-blue-dark); }
.border-color-blue-darker     { border-color: var(--color-blue-darker); }
.border-color-blue-darkest    { border-color: var(--color-blue-darkest); }

.border-color-cyan-lightest   { border-color: var(--color-cyan-lightest); }
.border-color-cyan-lighter    { border-color: var(--color-cyan-lighter); }
.border-color-cyan-light      { border-color: var(--color-cyan-light); }
.border-color-cyan            { border-color: var(--color-cyan); }
.border-color-cyan-dark       { border-color: var(--color-cyan-dark); }
.border-color-cyan-darker     { border-color: var(--color-cyan-darker); }
.border-color-cyan-darkest    { border-color: var(--color-cyan-darkest); }

.border-color-teal-lightest   { border-color: var(--color-teal-lightest); }
.border-color-teal-lighter    { border-color: var(--color-teal-lighter); }
.border-color-teal-light      { border-color: var(--color-teal-light); }
.border-color-teal            { border-color: var(--color-teal); }
.border-color-teal-dark       { border-color: var(--color-teal-dark); }
.border-color-teal-darker     { border-color: var(--color-teal-darker); }
.border-color-teal-darkest    { border-color: var(--color-teal-darkest); }

.border-color-green-lightest  { border-color: var(--color-green-lightest); }
.border-color-green-lighter   { border-color: var(--color-green-lighter); }
.border-color-green-light     { border-color: var(--color-green-light); }
.border-color-green           { border-color: var(--color-green); }
.border-color-green-dark      { border-color: var(--color-green-dark); } 
.border-color-green-darker    { border-color: var(--color-green-darker); }
.border-color-green-darkest   { border-color: var(--color-green-darkest); }

.border-color-lime-lightest   { border-color: var(--color-lime-lightest); }
.border-color-lime-lighter    { border-color: var(--color-lime-lighter); }
.border-color-lime-light      { border-color: var(--color-lime-light); }
.border-color-lime            { border-color: var(--color-lime); }
.border-color-lime-dark       { border-color: var(--color-lime-dark); }
.border-color-lime-darker     { border-color: var(--color-lime-darker); }
.border-color-lime-darkest    { border-color: var(--color-lime-darkest); }

.border-color-yellow-lightest { border-color: var(--color-yellow-lightest); }
.border-color-yellow-lighter  { border-color: var(--color-yellow-lighter); }
.border-color-yellow-light    { border-color: var(--color-yellow-light); }
.border-color-yellow          { border-color: var(--color-yellow); }
.border-color-yellow-dark     { border-color: var(--color-yellow-dark); }
.border-color-yellow-darker   { border-color: var(--color-yellow-darker); }
.border-color-yellow-darkest  { border-color: var(--color-yellow-darkest); }

.border-color-orange-lightest { border-color: var(--color-orange-lightest); }
.border-color-orange-lighter  { border-color: var(--color-orange-lighter); }
.border-color-orange-light    { border-color: var(--color-orange-light); }
.border-color-orange          { border-color: var(--color-orange); }
.border-color-orange-dark     { border-color: var(--color-orange-dark); }
.border-color-orange-darker   { border-color: var(--color-orange-darker); }
.border-color-orange-darkest  { border-color: var(--color-orange-darkest); }

/* BorderColors - Neutral */
.border-color-transparent     { border-color: transparent; }
.border-color-neutral-0       { border-color: var(--color-neutral-0); }
.border-color-neutral-1       { border-color: var(--color-neutral-1); }
.border-color-neutral-2       { border-color: var(--color-neutral-2); }
.border-color-neutral-3       { border-color: var(--color-neutral-3); }
.border-color-neutral-4       { border-color: var(--color-neutral-4); }
.border-color-neutral-5       { border-color: var(--color-neutral-5); }
.border-color-neutral-6       { border-color: var(--color-neutral-6); }
.border-color-neutral-7       { border-color: var(--color-neutral-7); }
.border-color-neutral-8       { border-color: var(--color-neutral-8); }
.border-color-neutral-9       { border-color: var(--color-neutral-9); }
.border-color-neutral-10      { border-color: var(--color-neutral-10); }

/* Typography - Transform */
.text-lowercase     { text-transform: lowercase;  }
.text-capitalize    { text-transform: capitalize; }

/* Colors - Extendend */
.text-approving { color: var(--color-approving); }
.text-draft { color: var(--color-draft); }

/* Colors - Semantic */
.background-error-light { background-color: var(--color-error-light); }
.background-error { background-color: var(--color-error); }

.text-error-light { color: var(--color-error-light); }
.text-error { color: var(--color-error); }

.background-warning-light { background-color: var(--color-warning-light); }
.background-warning { background-color: var(--color-warning); }

.text-warning-light { color: var(--color-warning-light); }
.text-warning { color: var(--color-warning); }

.background-success-light { background-color: var(--color-success-light); }
.background-success { background-color: var(--color-success); }

.text-success-light { color: var(--color-success-light); }
.text-success { color: var(--color-success); }

.background-info-light { background-color: var(--color-info-light); }
.background-info { background-color: var(--color-info); }

.text-info-light { color: var(--color-info-light); }
.text-info { color: var(--color-info); }



/* ================================================================ */
/*  $6.2 - Styles - Colors                                          */
/* ================================================================ */

/* $6.2.1 - Styles - Colors - Brand */
.background-primary {background: transparent; background-color: var(--color-primary); }
.background-secondary {background: transparent; background-color: var(--color-secondary); }

.text-primary { color: var(--color-primary); }
.text-secondary { color: var(--color-secondary); }

/* Background and Text Colors used when IsLight parameter for Badge / Tag / UserInitials is True */
.background-primary-lightest {background: transparent; background-color: var(--color-neutral-0); }
.background-secondary-lightest {background: transparent; background-color: var(--color-neutral-0); }

.text-primary-darker { color: var(--color-primary);}
.text-secondary-darker { color: var(--color-secondary); }


/* Color Extra */
.background-gradient-1 {
    background: var(--color-gradient-1);
}

.background-gradient-2 {
    background: var(--color-gradient-2);
}

.background-gradient-3 {
    background: var(--color-gradient-3);
}

/* $6.2.2 - Styles - Colors - Extendend */
.background-red-lightest {background: transparent; background-color: var(--color-red-lightest); }
.background-red-lighter {background: transparent; background-color: var(--color-red-lighter); }
.background-red-light {background: transparent; background-color: var(--color-red-light); }
.background-red {background: transparent; background-color: var(--color-red); }
.background-red-dark {background: transparent; background-color: var(--color-red-dark); }
.background-red-darker {background: transparent; background-color: var(--color-red-darker); }
.background-red-darkest {background: transparent; background-color: var(--color-red-darkest); }

.text-red-lightest { color: var(--color-red-lightest); }
.text-red-lighter { color: var(--color-red-lighter); }
.text-red-light { color: var(--color-red-light); }
.text-red { color: var(--color-red); }
.text-red-dark { color: var(--color-red-dark); }
.text-red-darker { color: var(--color-red-darker); }
.text-red-darkest { color: var(--color-red-darkest); }

.background-pink-lightest {background: transparent; background-color: var(--color-pink-lightest); }
.background-pink-lighter {background: transparent; background-color: var(--color-pink-lighter); }
.background-pink-light {background: transparent; background-color: var(--color-pink-light); }
.background-pink {background: transparent; background-color: var(--color-pink); }
.background-pink-dark {background: transparent; background-color: var(--color-pink-dark); }
.background-pink-darker {background: transparent; background-color: var(--color-pink-darker); }
.background-pink-darkest {background: transparent; background-color: var(--color-pink-darkest); }

.text-pink-lightest { color: var(--color-pink-lightest); }
.text-pink-lighter { color: var(--color-pink-lighter); }
.text-pink-light { color: var(--color-pink-light); }
.text-pink { color: var(--color-pink); }
.text-pink-dark { color: var(--color-pink-dark); }
.text-pink-darker { color: var(--color-pink-darker); }
.text-pink-darkest { color: var(--color-pink-darkest); }

.background-grape-lightest {background: transparent; background-color: var(--color-grape-lightest); }
.background-grape-lighter {background: transparent; background-color: var(--color-grape-lighter); }
.background-grape-light {background: transparent; background-color: var(--color-grape-light); }
.background-grape {background: transparent; background-color: var(--color-grape); }
.background-grape-dark {background: transparent; background-color: var(--color-grape-dark); }
.background-grape-darker {  background-color: var(--color-grape-darker); }
.background-grape-darkest {background: transparent; background-color: var(--color-grape-darkest); }

.text-grape-lightest { color: var(--color-grape-lightest); }
.text-grape-lighter { color: var(--color-grape-lighter); }
.text-grape-light { color: var(--color-grape-light); }
.text-grape { color: var(--color-grape); }
.text-grape-dark { color: var(--color-grape-dark); }
.text-grape-darker { color: var(--color-grape-darker); }
.text-grape-darkest { color: var(--color-grape-darkest); }

.background-violet-lightest {background: transparent; background-color: var(--color-violet-lightest); }
.background-violet-lighter {background: transparent; background-color: var(--color-violet-lighter); }
.background-violet-light {background: transparent; background-color: var(--color-violet-light); }
.background-violet {background: transparent; background-color: var(--color-violet); }
.background-violet-dark {background: transparent; background-color: var(--color-violet-dark); }
.background-violet-darker {background: transparent; background-color: var(--color-violet-darker); }
.background-violet-darkest {background: transparent; background-color: var(--color-violet-darkest); }

.text-violet-lightest { color: var(--color-violet-lightest); }
.text-violet-lighter { color: var(--color-violet-lighter); }
.text-violet-light { color: var(--color-violet-light); }
.text-violet { color: var(--color-violet); }
.text-violet-dark { color: var(--color-violet-dark); }
.text-violet-darker { color: var(--color-violet-darker); }
.text-violet-darkest { color: var(--color-violet-darkest); }

.background-indigo-lightest {background: transparent; background-color: var(--color-indigo-lightest); }
.background-indigo-lighter {background: transparent; background-color: var(--color-indigo-lighter); }
.background-indigo-light {background: transparent; background-color: var(--color-indigo-light); }
.background-indigo {background: transparent; background-color: var(--color-indigo); }
.background-indigo-dark {background: transparent; background-color: var(--color-indigo-dark); }
.background-indigo-darker {background: transparent; background-color: var(--color-indigo-darker); }
.background-indigo-darkest {background: transparent; background-color: var(--color-indigo-darkest); }

.text-indigo-lightest { color: var(--color-indigo-lightest); }
.text-indigo-lighter { color: var(--color-indigo-lighter); }
.text-indigo-light { color: var(--color-indigo-light); }
.text-indigo { color: var(--color-indigo); }
.text-indigo-dark { color: var(--color-indigo-dark); }
.text-indigo-darker { color: var(--color-indigo-darker); }
.text-indigo-darkest { color: var(--color-indigo-darkest); }

.background-blue-lightest {background: transparent; background-color: var(--color-blue-lightest); }
.background-blue-lighter {background: transparent; background-color: var(--color-blue-lighter); }
.background-blue-light {background: transparent; background-color: var(--color-blue-light); }
.background-blue {background: transparent; background-color: var(--color-blue); }
.background-blue-dark {background: transparent; background-color: var(--color-blue-dark); }
.background-blue-darker {background: transparent; background-color: var(--color-blue-darker); }
.background-blue-darkest {background: transparent; background-color: var(--color-blue-darkest); }

.text-blue-lightest { color: var(--color-blue-lightest); }
.text-blue-lighter { color: var(--color-blue-lighter); }
.text-blue-light { color: var(--color-blue-light); }
.text-blue { color: var(--color-blue); }
.text-blue-dark { color: var(--color-blue-dark); }
.text-blue-darker {color: var(--color-blue-darker); }
.text-blue-darkest { color: var(--color-blue-darkest); }

.background-cyan-lightest {background: transparent; background-color: var(--color-cyan-lightest); }
.background-cyan-lighter {background: transparent; background-color: var(--color-cyan-lighter); }
.background-cyan-light {background: transparent; background-color: var(--color-cyan-light); }
.background-cyan {background: transparent; background-color: var(--color-cyan); }
.background-cyan-dark {background: transparent; background-color: var(--color-cyan-dark); }
.background-cyan-darker {background: transparent; background-color: var(--color-cyan-darker); }
.background-cyan-darkest {background: transparent; background-color: var(--color-cyan-darkest); }

.text-cyan-lightest { color: var(--color-cyan-lightest); }
.text-cyan-lighter { color: var(--color-cyan-lighter); }
.text-cyan-light { color: var(--color-cyan-light); }
.text-cyan { color: var(--color-cyan); }
.text-cyan-dark { color: var(--color-cyan-dark); }
.text-cyan-darker { color: var(--color-cyan-darker); }
.text-cyan-darkest { color: var(--color-cyan-darkest); }

.background-teal-lightest {background: transparent; background-color: var(--color-teal-lightest); }
.background-teal-lighter {background: transparent; background-color: var(--color-teal-lighter); }
.background-teal-light {background: transparent; background-color: var(--color-teal-light); }
.background-teal {background: transparent; background-color: var(--color-teal); }
.background-teal-dark {background: transparent; background-color: var(--color-teal-dark); }
.background-teal-darker {background: transparent; background-color: var(--color-teal-darker); }
.background-teal-darkest {background: transparent; background-color: var(--color-teal-darkest); }

.text-teal-lightest { color: var(--color-teal-lightest); }
.text-teal-lighter { color: var(--color-teal-lighter); }
.text-teal-light { color: var(--color-teal-light); }
.text-teal { color: var(--color-teal); }
.text-teal-dark { color: var(--color-teal-dark); }
.text-teal-darker { color: var(--color-teal-darker); }
.text-teal-darkest { color: var(--color-teal-darkest); }

.background-green-lightest {background: transparent; background-color: var(--color-green-lightest); }
.background-green-lighter {background: transparent; background-color: var(--color-green-lighter); }
.background-green-light {background: transparent; background-color: var(--color-green-light); }
.background-green {background: transparent; background-color: var(--color-green); }
.background-green-dark {background: transparent; background-color: var(--color-green-dark); } 
.background-green-darker {background: transparent; background-color: var(--color-green-darker); }
.background-green-darkest {background: transparent; background-color: var(--color-green-darkest); }

.text-green-lightest { color: var(--color-green-lightest); }
.text-green-lighter { color: var(--color-green-lighter); } 
.text-green-light { color: var(--color-green-light); }
.text-green { color: var(--color-green); }
.text-green-dark { color: var(--color-green-dark); }
.text-green-darker { color: var(--color-green-darker); }
.text-green-darkest { color: var(--color-green-darkest); }

.background-lime-lightest {background: transparent; background-color: var(--color-lime-lightest); }
.background-lime-lighter {background: transparent; background-color: var(--color-lime-lighter); }
.background-lime-light {background: transparent; background-color: var(--color-lime-light); }
.background-lime {background: transparent; background-color: var(--color-lime); }
.background-lime-dark {background: transparent; background-color: var(--color-lime-dark); }
.background-lime-darker {background: transparent; background-color: var(--color-lime-darker); }
.background-lime-darkest {background: transparent; background-color: var(--color-lime-darkest); }

.text-lime-lightest { color: var(--color-lime-lightest); }
.text-lime-lighter { color: var(--color-lime-lighter); }
.text-lime-light { color: var(--color-lime-light); }
.text-lime { color: var(--color-lime); }
.text-lime-dark { color: var(--color-lime-dark); }
.text-lime-darker { color: var(--color-lime-darker); }
.text-lime-darkest { color: var(--color-lime-darkest); }

.background-yellow-lightest {background: transparent; background-color: var(--color-yellow-lightest); }
.background-yellow-lighter {background: transparent; background-color: var(--color-yellow-lighter); }
.background-yellow-light {background: transparent; background-color: var(--color-yellow-light); }
.background-yellow {background: transparent; background-color: var(--color-yellow); }
.background-yellow-dark {background: transparent; background-color: var(--color-yellow-dark); }
.background-yellow-darker {background: transparent; background-color: var(--color-yellow-darker); }
.background-yellow-darkest {background: transparent; background-color: var(--color-yellow-darkest); }

.text-yellow-lightest { color: var(--color-yellow-lightest); }
.text-yellow-lighter { color: var(--color-yellow-lighter); }
.text-yellow-light { color: var(--color-yellow-light); }
.text-yellow { color: var(--color-yellow); }
.text-yellow-dark { color: var(--color-yellow-dark); }
.text-yellow-darker { color: var(--color-yellow-darker); }
.text-yellow-darkest { color: var(--color-yellow-darkest); }

.background-orange-lightest {background: transparent; background-color: var(--color-orange-lightest); }
.background-orange-lighter {background: transparent; background-color: var(--color-orange-lighter); }
.background-orange-light {background: transparent; background-color: var(--color-orange-light); }
.background-orange {background: transparent; background-color: var(--color-orange); }
.background-orange-dark {background: transparent; background-color: var(--color-orange-dark); }
.background-orange-darker {background: transparent; background-color: var(--color-orange-darker); }
.background-orange-darkest {background: transparent; background-color: var(--color-orange-darkest); }

.text-orange-lightest { color: var(--color-orange-lightest); }
.text-orange-lighter { color: var(--color-orange-lighter); }
.text-orange-light { color: var(--color-orange-light); }
.text-orange { color: var(--color-orange); }
.text-orange-dark { color: var(--color-orange-dark); }
.text-orange-darker { color: var(--color-orange-darker); }
.text-orange-darkest { color: var(--color-orange-darkest); }


/* $6.2.3 - Styles - Colors - Neutral */
.background-transparent {background: transparent; background-color: transparent; }
.background-neutral-0 {background: transparent; background-color: var(--color-neutral-0); }
.background-neutral-1 {background: transparent; background-color: var(--color-neutral-1); }
.background-neutral-2 {background: transparent; background-color: var(--color-neutral-2); }
.background-neutral-3 {background: transparent; background-color: var(--color-neutral-3); }
.background-neutral-4 {background: transparent; background-color: var(--color-neutral-4); }
.background-neutral-5 {background: transparent; background-color: var(--color-neutral-5); }
.background-neutral-6 {background: transparent; background-color: var(--color-neutral-6); }
.background-neutral-7 {background: transparent; background-color: var(--color-neutral-7); }
.background-neutral-8 {background: transparent; background-color: var(--color-neutral-8); }
.background-neutral-9 {background: transparent; background-color: var(--color-neutral-9); }
.background-neutral-10 {background: transparent; background-color: var(--color-neutral-10); }

.text-transparent { color: transparent; }
.text-neutral-0 { color: var(--color-neutral-0); }
.text-neutral-1 { color: var(--color-neutral-1); }
.text-neutral-2 { color: var(--color-neutral-2); }
.text-neutral-3 { color: var(--color-neutral-3); }
.text-neutral-4 { color: var(--color-neutral-4); }
.text-neutral-5 { color: var(--color-neutral-5); }
.text-neutral-6 { color: var(--color-neutral-6); }
.text-neutral-7 { color: var(--color-neutral-7); }
.text-neutral-8 { color: var(--color-neutral-8); }
.text-neutral-9 { color: var(--color-neutral-9); }
.text-neutral-10 { color: var(--color-neutral-10); }

/* Background and Text Colors used when IsLight parameter for Badge / Tag / UserInitials is True */
.background-neutral-0-lightest,
.background-neutral-1-lightest,
.background-neutral-2-lightest,
.background-neutral-3-lightest,
.background-neutral-4-lightest {
    background-color: var(--color-neutral-9);  
}

.background-neutral-5-lightest,
.background-neutral-6-lightest,
.background-neutral-7-lightest,
.background-neutral-8-lightest,
.background-neutral-9-lightest,
.background-neutral-10-lightest {
    background-color: var(--color-neutral-0);
}

.text-neutral-5-darker { color: var(--color-neutral-5); }
.text-neutral-6-darker { color: var(--color-neutral-6); }
.text-neutral-7-darker { color: var(--color-neutral-7); }
.text-neutral-8-darker { color: var(--color-neutral-8); }
.text-neutral-9-darker { color: var(--color-neutral-9); }
.text-neutral-10-darker { color: var(--color-neutral-10); }

/* Border Radius */
.border-radius-softer {
    border-radius: var(--border-radius-softer);
}

/* ================================================================ */
/*  $7 - Right-to-Left Mode                                         */
/* ================================================================ */


/* ================================================================ */
/*  $8 - Custom Patterns
/* ================================================================ */
/* Custom Acordion */
.custom-accordion .accordion-item-header {
    padding-left: var(--space-s);
}

.custom-accordion .accordion-item-title {
    margin-left: var(--space-s);
}

.custom-accordion.accordion-item .accordion-item-content {
    padding-left: var(--space-xl);
}

/* Custom Button Group */
.custom-button-group input[type="radio"]:checked + .btn {
    background-color: var(--color-primary);
    color: var(--color-neutral-0);
}

.custom-button-group .btn .fa-fw,
.custom-button-group .btn .ptt {
    margin-right: var(--space-s);
}

.button-group.button-card label .btn {
    align-items: center;
    background-color: var(--color-neutral-0);
    border-radius: var(--border-radius-soft);
    border: var(--border-size-none);
    box-shadow: var(--shadow-l);
    display: flex;
    flex-direction: column;
    font-size: var(--font-size-h5);
    height: auto;
    justify-content: center;
    padding: var(--space-base) var(--space-l);
}

.button-group.button-card label:not(:last-child) {
    margin-right: var(--space-base);
}

.custom-button-group.button-card .btn .fa-fw,
.custom-button-group.button-card .btn .ptt {
    margin-right: var(--space-none);
    margin-bottom: var(--space-s);
    font-size: var(--font-size-h4);
}

.phone .button-group.button-card label:not(:last-child) {
    margin-right: var(--space-none);
    margin-bottom: var(--space-base);
}

.phone .button-group.button-card label .btn {
    border: var(--border-size-none);
    border-radius: var(--border-radius-soft);
}

/* Custom Card */
.custom-card {
    background-color: var(--color-primary);
    border-radius: var(--border-radius-softer);
    color: var(--color-neutral-0);
}

.custom-card.bottom-left {
    border-radius: var(--border-radius-softer) var(--border-radius-softer) var(--border-radius-softer) var(--border-radius-none);
}

.custom-card.bottom-right {
    border-radius: var(--border-radius-softer) var(--border-radius-softer) var(--border-radius-none) var(--border-radius-softer);
}

.custom-card.top-right {
    border-radius: var(--border-radius-softer) var(--border-radius-none)  var(--border-radius-softer) var(--border-radius-softer);
}

.custom-card.top-left {
    border-radius: var(--border-radius-none)  var(--border-radius-softer) var(--border-radius-softer) var(--border-radius-softer);
}

/* Collapsible */
.collapsible:hover {
    cursor: pointer;
}

.collapsible-wrapper {
    font-size: var(--font-size-h6);
}

.collapsible-title {
    
}

.collapsible-wrapper .collapsible-content {
    height: 0;
    margin-left: var(--space-xl);
    opacity: 0;    
    visibility: hidden;
    
    
    
}

.collapsible-wrapper .collapsible-content.is-expanded {
    height: 100%;
    margin-bottom: var(--space-s);
    opacity: 1;
    visibility: visible;
}

.collapsible-handle {
    border: var(--border-size-s) dashed var(--color-neutral-7);
    height: 21px;
    width: 21px;
}

.handle-expanded {
    display: none;
}

.collapsible.active .handle-expanded {
    display: block;
}

.collapsible.active .handle-collapsed {
    display: none;
}

/* CustomCheckBoxOrRadioButton */
.custom-radio-or-checkbox {
    position: relative;
}

.croc-input-wrapper {
    cursor: pointer;
    display: inline-block;
    padding-left: 30px;
    position: relative;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    vertical-align: top;

    
}

.croc-input-wrapper input[type=radio],
.croc-input-wrapper input[type=checkbox] {
    cursor: pointer;
    height: 0;
    opacity: 0;
    position: absolute;
    width: 0;

    
    
    
    
}

.custom-radio-or-checkbox input[type=radio] ~ span,
.custom-radio-or-checkbox input[type=checkbox] ~ span {
    height: 22px;
    left: 0;
    position: absolute;
    top: 0;
    width: 22px;
}

.custom-radio-or-checkbox input[type=radio] ~ span:before,
.custom-radio-or-checkbox input[type=checkbox] ~ span:before {
    background-color: var(--color-neutral-0);
    border: var(--border-size-s) solid var(--color-neutral-4);
    border-radius: var(--border-radius-rounded);
    box-sizing: border-box;
    content: "";
    display: block;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    -webkit-transition: all .25s ease;
            transition: all .25s ease;
    width: 100%;
    z-index: 0;
}

.custom-radio-or-checkbox input[type=checkbox] ~ span:before {
    border-radius: var(--border-radius-soft);
}

.custom-radio-or-checkbox input[type=checkbox]:checked ~ span:before {
    background-color: var(--color-neuetral-0);
    border-color: var(--color-primary);
}

.custom-radio-or-checkbox input[type=radio]:checked ~ span:after {
    background-color: var(--color-primary);
    border-radius: var(--border-radius-rounded);
    content: "";
    display: block;
    height: 50%;
    left: 50%;
    position: absolute;
    top: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
            transform: translateX(-50%) translateY(-50%);
    width: 50%;
}

.custom-radio-or-checkbox input[type=checkbox]:checked ~ span:after {
    border-bottom: var(--border-size-l) solid var(--color-primary);
    border-left: var(--border-size-l) solid var(--color-primary);
    content: "";
    display: block;
    height: 20%;
    left: 50%;
    position: absolute;
    top: 45%;
    -webkit-transform: translateX(-50%) translateY(-50%) rotate(-55deg);
    transform: translateX(-50%) translateY(-50%) rotate(-55deg);
    width: 45%;
}

.custom-radio-or-checkbox:hover input[type=radio]:not(:checked) ~ span:before,
.custom-radio-or-checkbox:hover input[type=checkbox]:not(:checked) ~ span:before {
    border-color: var(--color-neutral-6);
}

.croc-input-wrapper input[type=radio][disabled="disabled"]  ~ span:before,
.croc-input-wrapper input[type=checkbox][disabled="disabled"]  ~ span:before {
    background-color: var(--color-neutral-2);
    border: var(--border-size-s) solid var(--color-neutral-4);
    pointer-events: none;
}

.croc-input-wrapper input[type=checkbox][disabled="disabled"]:checked  ~ span:before {
    background-color: var(--color-neutral-2);
}

.croc-input-wrapper input[type=checkbox][disabled="disabled"]:checked  ~ span:after {
    border-color: var(--color-neutral-6);
}

.croc-input-wrapper input[type=checkbox].Not_Valid:not(:checked)  ~ span:before,
.croc-input-wrapper input[type=radio].Not_Valid:not(:checked)  ~ span:before {
    border-color: var(--color-error);
}

.croc-input-wrapper input[type=radio][disabled="disabled"]:checked   ~ span:before {
    background-color: var(--color-neutral-2);
    border: var(--border-size-s) solid var(--color-neutral-4);
}

.custom-radio-or-checkbox input[type=radio][disabled="disabled"]:checked ~ span:after {
    background-color: var(--color-neutral-6);
}

/* Dragtable */
.dragtable-wrapper .TableRecords .TableRecords_Header {
    position: static;
}

/* Icon Holder  */
.icons-holder-content {
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    background: var(--color-gradient-3);
    border-radius: var(--border-radius-circle);
    color: var(--color-neutral-0);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-size: var(--font-size-base);
    line-height: 0.8em;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    height: 40px;
    width: 40px;
}

.icons-holder-content.icon-holder-large {    
    font-size: var(--page-title);
    height: 100px;
    width: 100px;
}

.icons-holder-content.icon-holder-medium {    
    font-size: var(--font-size-base);
    height: 40px;
    width: 40px;
}

.icons-holder-content.icon-holder-small {
    font-size: var(--font-size-h6);
    height: 32px;
    width: 32px;
}

.icons-holder-wrapper {
    text-align: center;
    display: inline-block;
}

.icons-holder-label {
    color: var(--color-primary);
    margin-top: var(--space-xs);
}

/* Footer */
.footer-content {
    border-top: var(--border-size-s) solid var(--color-neutral-6);
    font-size: var(--font-size-h6);
    padding: var(--space-s) var(--space-none);
}

.footer-content.is-dark {
    background-color: var(--color-primary);
    border: var(--border-size-none);
    color: var(--color-neutral-0);
}

.layout-top .content-bottom .footer-banner > .ThemeGrid_Container,
.layout-top .content-bottom .footer-content > .ThemeGrid_Container {
    padding: var(--space-none) var(--space-xl);
}

.footer-banner > div {
    display: flex;
}

.footer-banner.text-align-right > div {
    justify-content: flex-end;
}

/* Custom Form */
.custom-form-wrapper {
    background-color: var(--color-primary-lightest);
    border: var(--border-size-m) solid var(--color-primary);
}

.custom-form-title {
    color: var(--color-primary);
    font-size: var(--font-size-h6);
    margin-bottom: var(--space-base);
}

.phone .custom-form-content {
    padding: var(--space-none);
}

/* List Block & List Item */
.list-block-wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.phone .list-block-wrapper {
    display: block;
}

.list-record-wrapper {
    border: var(--border-size-s) solid var(--color-neutral-5);
}

.list-item-content {
    align-items: center;
    border-bottom: var(--border-size-s) solid var(--color-neutral-5);
    display: flex;
    font-size: var(--font-size-base);
    padding: var(--space-s) var(--space-base);
    position: relative;    
}

.list-item-content:hover,
.list-item-content.list-item-selected {
    background-color: var(--color-neutral-3);
}

.ListRecords span:last-child .list-item-content {
    border-bottom: var(--border-size-none);
}

.list-item-content .checkbox {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

.list-item-content .checkbox:before {
    background-color: transparent;
    border: var(--border-size-none);
    height: 100%;
    left: 0;
    position: absolute;
    width: 100%;
    top: 0;
}

.list-item-content .checkbox:checked:after {
    opacity: 0;
}

/* Custom Modal */
.custom-modal .modal-wrapper {
    background-color: var(--color-primary);
    border-radius: var(--border-radius-softer) var(--border-radius-none) var(--border-radius-softer) var(--border-radius-softer);
    color: var(--color-neutral-0);
}

.custom-modal .modal-wrapper a {
    color: var(--color-neutral-0);
}

.custom-modal .modal-footer {
    text-align: center;
}

/* Icon Set */
.icon-set-holder .ptt {
    line-height: 1.5;
}

.icon-set-wrapper {
    border: var(--border-size-s) solid;
    border-radius: var(--border-radius-circle);
    display: flex;
    font-size: 42px;
    height: 100px;
    width: 100px;
    transition: all ease 300ms;
}

.icon-set-wrapper.text-primary:hover {
    background-color: var(--color-primary); 
    color: var(--color-neutral-0); 
}

.icon-set-wrapper.text-secondary:hover {
    background-color: var(--color-secondary); 
    color: var(--color-neutral-0); 
}

.icon-set-wrapper.text-red:hover {
    background-color: var(--color-red); 
    color: var(--color-neutral-0); 
}

.icon-set-wrapper.text-pink:hover {
    background-color: var(--color-pink); 
    color: var(--color-neutral-0); 
}

.icon-set-wrapper.text-grape:hover {
    background-color: var(--color-grape); 
    color: var(--color-neutral-0); 
}

.icon-set-wrapper.text-violet:hover {
    background-color: var(--color-violet); 
    color: var(--color-neutral-0); 
}

.icon-set-wrapper.text-indigo:hover {
    background-color: var(--color-indigo); 
    color: var(--color-neutral-0); 
}

.icon-set-wrapper.text-blue:hover {
    background-color: var(--color-blue); 
    color: var(--color-neutral-0); 
}

.icon-set-wrapper.text-cyan:hover {
    background-color: var(--color-cyan); 
    color: var(--color-neutral-0); 
}

.icon-set-wrapper.text-teal:hover {
    background-color: var(--color-teal); 
    color: var(--color-neutral-0); 
}

.icon-set-wrapper.text-green:hover {
    background-color: var(--color-green); 
    color: var(--color-neutral-0); 
}

.icon-set-wrapper.text-lime:hover {
    background-color: var(--color-lime); 
    color: var(--color-neutral-0); 
}

.icon-set-wrapper.text-yellow:hover {
    background-color: var(--color-yellow); 
    color: var(--color-neutral-0); 
}

.icon-set-wrapper.text-orange:hover {
    background-color: var(--color-orange); 
    color: var(--color-neutral-0); 
}

.icon-set-wrapper.text-transparent:hover {
    background-color: transparent; 
    color: var(--color-neutral-9); 
}

.icon-set-wrapper.text-neutral-0:hover {
    background-color: var(--color-neutral-0); 
    color: var(--color-neutral-9); 
}

.icon-set-wrapper.text-neutral-1:hover {
    background-color: var(--color-neutral-1); 
    color: var(--color-neutral-9); 
}

.icon-set-wrapper.text-neutral-2:hover {
    background-color: var(--color-neutral-2); 
    color: var(--color-neutral-9); 
}

.icon-set-wrapper.text-neutral-3:hover {
    background-color: var(--color-neutral-3); 
    color: var(--color-neutral-9); 
}

.icon-set-wrapper.text-neutral-4:hover {
    background-color: var(--color-neutral-4); 
    color: var(--color-neutral-9); 
}

.icon-set-wrapper.text-neutral-5:hover {
    background-color: var(--color-neutral-5); 
    color: var(--color-neutral-0); 
}

.icon-set-wrapper.text-neutral-6:hover {
    background-color: var(--color-neutral-6); 
    color: var(--color-neutral-0); 
}

.icon-set-wrapper.text-neutral-7:hover {
    background-color: var(--color-neutral-7); 
    color: var(--color-neutral-0); 
}

.icon-set-wrapper.text-neutral-8:hover {
    background-color: var(--color-neutral-8); 
    color: var(--color-neutral-0); 
}

.icon-set-wrapper.text-neutral-9:hover {
    background-color: var(--color-neutral-9); 
    color: var(--color-neutral-0); 
}

.icon-set-wrapper.text-neutral-10:hover {
    background-color: var(--color-neutral-10); 
    color: var(--color-neutral-0); 
}

/* File Upload */
/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v7.0.29,
* Autoprefixer: v9.7.6
* Browsers: last 4 version
*/

.DropArea {
    border: var(--border-size-m) dashed var(--color-neutral-6);
    border-radius: var(--border-radius-softer);
    position: relative;
    height: 300px;
}

.file-upload-container {
    position: relative;
}

.file-upload-placeholders {
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    left: 50%;
    position: absolute;
    -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    top: 140px;
}

.file-upload-icon {
    color: var(--color-neutral-8);
    font-size: 100px;
}

.file-upload-action {
    font-weight: var(--font-bold);
    font-size: var(--font-size-h6);
}

.file-upload-preview img {
    height: 50px;
    -o-object-fit: cover;
       object-fit: cover;
    width: 60px;
}

.file-upload-wrapper {
    border-radius: 5px;
    background-color: #d8d8d8;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    height: 50px;
    margin-right: var(--space-s);
    padding: var(--space-none) var(--space-s);
    padding-right: var(--space-base);
}

.file-upload-preview {
    height: 100%;
}

.file-upload-label {
    margin: var(--space-none) var(--space-base);
    min-width: 100px;
}


.file-upload-wrapper a {
    color: var(--color-neutral-8);
}

.qq-uploader {
    height: 100%;
    position:absolute;
}

.qq-upload-drop-area {
    background-color: var(--color-neutral-1);
    border-radius: var(--border-radius-softer);
    
}


.qq-upload-button a {
    position: absolute;
    height: 100%;
    width: 100%;
    border-radius: var(--border-radius-softer);
    border: var(--border-size-none);
}

/* Node Item */
.node-subcontent .node-item-wrapper {
    margin-left: var(--space-m);
}

.node-item-content {
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    background-color: var(--color-neutral-0);
    border: var(--border-size-s) solid var(--color-neutral-5);
    border-radius: var(--border-radius-rounded);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-size: var( --font-size-h6);
    height: 40px;
    max-width: 300px;
    padding: var(--space-none) var(--space-base);
}

/* Custom Table */
.custom-table-action,
.custom-table-footer {
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    border: var(--border-size-s) solid var(--color-neutral-4);
    white-space: nowrap;
}

.phone .custom-table-action,
.phone .custom-table-footer {
    display: block;
}

.custom-table-footer select {
    border-radius: var(--border-radius-sharp);
    height: 28px;
    min-width: 68px;
    padding: var(--space-none) var(--space-s);
}

.custom-table-content .TableRecords {
    border: var(--border-size-none);
}

.custom-table-content,
.TableRecords .TableRecords_Header,
.custom-table-content .TableRecords_EvenLine {
    background-color: var(--color-neutral-1);
}

.custom-table-content .TableRecords .TableRecords_OddLine,
.custom-table-content .TableRecords .TableRecords_EvenLine {
    border-bottom: var(--border-size-none);
    height: 42px;
}

/* Popup */
.popup .modal-wrapper {
    max-width: 500px;
}

.popup .modal-footer {
    border-top: var(--border-size-none);
    text-align: center;
}

.popup .modal-footer .Button {
    min-width: 124px;
}

/* Custom Toggle Button */
.custom-toggle .toggle-label {
    padding-left: var(--space-l);
    padding-right: var(--space-base);
}

.custom-toggle.toggle-button-checked .toggle-label {
    color: var(--color-neutral-0);
    padding-left: var(--space-base);
    padding-right: var(--space-l);
}

.custom-toggle.toggle-button {
    align-items: center;
    display: inline-flex;
    width: auto;
}

.custom-toggle.toggle-button.toggle-button-checked:after {
    left: unset;
    right: 6px;
    transform: translateX(3px) translateZ(0);
}

/* Sortable Grid */
.sortable { 
    list-style-type: none; 
    padding: var(--space-none);
    overflow: auto;
}

html .ui-sortable {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
}

.sortable-item-content {
    -webkit-box-flex: 0;
        -ms-flex: 0 var(--grid-item);
            flex: 0 var(--grid-item);
    margin-bottom: var(--space-base);
}

/* UserAvatar */
.user-avatar-image.border-radius-rounded img {
    border-radius: var(--border-radius-rounded);
}

.user-image-wrapper .user-avatar.border-radius-soft,
.user-avatar-image.border-radius-soft img {
    border-radius: var(--border-radius-softer) var(--border-radius-softer) var(--border-radius-softer) var(--border-radius-none);
}

.user-image-wrapper{
    display: inline;
}

.user-avatar-large {
    font-size: 100px;
    height: 150px;
    width: 150px;
}

.user-avatar-large img {
    height: 100%;
    width: 100%;
}

.is-elevated {
    border: var(--border-size-l) solid var(--color-neutral-0);
    box-shadow: var(--shadow-m);
}

/*  Side Nav Tab */
.side-nav-tab {
    border: var(--border-size-s) solid var(--color-neutral-4);
    border-radius: var(--border-radius-soft);
}

.side-nav-tab .tabs-header {
    background-color: var(--color-background-body);
    border-radius: var(--border-radius-soft) var(--border-radius-none) var(--border-radius-none) var(--border-radius-soft);
}

 .side-nav-tab.tabs-vertical .tabs-header-item {
    font-size: var(--font-size-h5);
    font-weight: var(--font-semi-bold);
    padding: var(--space-base) var(--space-m);
}

.desktop .side-nav-tab.tabs-vertical .tabs-header-item {
    min-width: 300px;
}

.side-nav-tab .tabs-header-item.active {
    background-color: var(--color-primary);
    color: var(--color-neutral-0);
}

.side-nav-tab.tabs-vertical .tabs-header-item,
.side-nav-tab.tabs-vertical .tabs-header-item.active {
    border-right: var(--border-size-none)
}

.side-nav-tab.tabs-vertical .tabs-content {
    background-color: var(--color-neutral-0);
    border-radius: var(--border-radius-none) var(--border-radius-soft) var(--border-radius-soft) var(--border-radius-none);
    border-left: var(--border-size-s) solid var(--color-neutral-4);
    padding: var(--space-m);
    margin-left: var(--space-none);
}

.custom-tab-header .tabs-header-item {
    margin-left: var(--space-none);
}

.side-nav-tab .tabs-header-item .side-nav-left .fa-fw {
    color: var(--color-primary);
}

.side-nav-tab .tabs-header-item.active .fa-fw,
.side-nav-tab .tabs-header-item.active .side-nav-left .fa-fw {
    color: var(--color-neutral-0);
}

/* Row Item */
.row-item-wrapper + .row-item-wrapper {
    margin-top: var(--space-base)
}

/* ================================================================ */
/*  $9 - Custom Styles
/* ================================================================ */

.disabled {
    filter: opacity(.7);
    opacity: .7;
    pointer-events: none;
}

.hide-text {
    height: 0 !important;
    overflow: hidden;
    position: absolute;
    width: 0 !important;
}

.is--focusable :focus {
    outline: 0;
}