:root {
    /* Colors */
    --primary-color: #4a90e2;
    --primary-hover-color: #357abd;
    --primary-contrast-color: #fff;
    --accent-color: #5292bf;
    --accent-hover-color: #4882c4;
    --accent-hover-text-color: #fff;
    --text-color: #333;
    --text-inverted-color: #DDD;
    --text-disabled-color: #ABABAB;
    --error-title-color: #33333388;
    --success-color: #5cb85c;
    --error-icon-color: rgba(255,0,0,0.25);
    --error-color: #ff4040;
    --error-contrast-color: #fff;
    --background-color: #fff;
    --popup-overlay-background-color: rgba(0, 0, 0, 0.15);
    --site-background-color: #f2f2f2;
    --link-color: #0461b8;
    --container-border-color: rgba(0, 0, 0, 0.10);
    --control-border-color: #ccc;
    --control-background-color: #fff;
    --control-drag-background-color: #f7f7f7;
    --icon-input-icon-default-color: #666;
    --button-color: var(--text-color);
    --button-background-color: var(--background-color);
    --button-hover-background-color: #f2f2f2;
    --button-active-background-color: #f7f7f7;
    --button-hover-color: var(--text-color);
    --popup-button-color: var(--text-color);
    --popup-button-hover-background-color: #f2f2f2;
    --popup-button-active-background-color: #f7f7f7;
    --popup-button-hover-color: var(--text-color);
    --icon-button-background-color: #fff;
    --icon-button-border-color: #fff;
    --icon-button-hover-background-color: #f2f2f2;
    --icon-button-active-background-color: #f7f7f7;
    --icon-button-icon-disabled-color: #ccc;
    /* Logo */
    --logo-width: 174px;
    /* Footer */
    --footer-text-color: rgba(0,0,0,0.55);
    /* General */
    --font-size: 1rem;
    --global-content-width: 80%;
    --header-height: 48px;
    --container-border-radius: 8px;
    --control-border-radius: 4px;
    --input-icon-size: 16px;
    --input-icon-left: 10px;
    --vertical-line-vmargin: 4px;
    --panel-shadow: 0 3px 4px rgba(0, 0, 0, 0.05);
    --panel-gap: 0.65rem;
    /* Button */
    --button-padding: 8px 10px;
    --button-smaller-padding: 5px 7px;
    --nav-button-padding: 8px 12px;
    --button-font-size: 0.85em;
    --button-transitions-speed: 0.15s;
    --icon-button-border-color-transition-speed: 0.15s;
    --popup-button-transitions-speed: 0.15s;
    --popup-button-background-color: transparent;
    --popup-button-padding: 0.5rem 1rem;
    /* Checkbox */
    --checkbox-border: var(--control-border-color);
    --checkbox-bg: #fff;
    --checkbox-disabled-text-color: #999;
    --check-size: 18px;
    /* Specifics */
    /* >> Popups */
    --popup-overlay-background-blur: 7px;
    /* >> Infolist */
    --infolist-panel-shadow: var(--panel-shadow);
    /* >> UserProfil */
    --user-profile-header-icon-size: 28px;
    /* >> Ticket Overview */
    --ticket-overview-header-icon-size: 28px;
    --ticket-overview-panel-shadow: var(--panel-shadow);
    /* >> Ticket Details & Editor */
    --open-ticket-right-container-width: 40%;
    --open-ticket-right-container-max-width: 25rem;
    --open-ticket-edit-right-container-width: 40%;
    --open-ticket-edit-right-container-max-width: 25rem;
    /* >> Ticket Details */
    --ticket-details-panel-shadow: var(--panel-shadow);
    --ticket-details-title-button-border-color: #dedede;
    --ticket-details-section-icon-size: 20px;
    --ticket-details-comment-mail-icon-size: 0.95rem;
    --ticket-details-section-text-size: 1em;
    --ticket-details-section-text-color: var(--text-color);
    --ticket-details-comments-shadow: 0px 2px 1px rgba(0, 0, 0, 0.175);
    --ticket-details-comments-header-shadow: 0px 2px 2px rgba(0, 0, 0, 0.15);
    --ticket-details-comments-header-color: #f7f7f7;
    /* >> Knowledge Base */
    --kb-osa-title-button-border-color: #dedede;
    --kb-osa-panel-shadow: var(--panel-shadow);
    --kb-osa-panel-header-icon-size: 20px;
    --kb-osa-panel-header-text-size: 1em;
    --kb-osa-panel-header-text-color: var(--text-color);
    --kb-fa-background-transition-speed: 0.12s;
    --kb-fa-link-padding: 0.65rem 0.425rem;
    --kb-fa-icon-padding: 0.0rem 0.375rem;
    --kb-fa-icon-size: 20px;
    --kb-article-subtext-icon-size: 0.875em;
    --kb-article-subtext-font-size: 0.875em;
    --kb-article-subtext-opacity: 0.85;
    --kb-article-title-headtext-icon-size: 0.875em;
    --kb-article-title-headtext-font-size: 0.875em;
    --kb-article-title-text-font-size: 1.275em;
    --kb-article-title-headtext-opacity: 0.85;
    /* >> Buttons */
    --icon-button-refresh-icon-color: var(--success-color);
    --icon-button-success-icon-color: var(--success-color);
    /* >> Navigation */
    --navigation-tab-hover-color: var(--accent-color);
    --navigation-tab-hover-text-color: var(--accent-hover-text-color);
    --navigation-anim-transition-speed: 0.08s;
    --navigation-background-transition-speed: 0.25s;
    /* >> UserDropDown */
    --user-dropdown-item-hover-text-color: var(--accent-hover-text-color);
    --user-dropdown-item-hover-color: var(--accent-color);
    --user-dropdown-background-transition-speed: 0.25s;
    --user-dropdown-menu-shadow: 0px 4px 5px rgba(0,0,0,0.15);
    /* >> Info Accoridon */
    /*--accoridon-item-color: #fcfcfc;*/
    --accordion-empty-info-text-color: #33333388;
    --accoridon-item-color: #FEFEFE;
    --accoridon-item-accent-border-color: var(--accent-color);
    --accoridon-content-border-color: #AAA;
    --accordion-item-border-color: rgba(0, 0, 0, 0.10);
    /* >> DevExpress */
    --dve-loading-border-shadow: 0 0px 3px rgba(0, 0, 0, 0.15);
    /* >>> Grid */
    --dve-grid-group-padding: 0.45rem;
    --dve-data-row-padding: 0.45rem 0.5rem;
    --dve-grid-row-color: var(--control-background-color);
    --dve-grid-row-text-color: var(--text-color);
    --dve-grid-group-row-color: #f7f7f7;
    --dve-grid-group-row-text-color: var(--text-color);
    --dve-grid-group-row-focused-color: #e4e4e4;
    --dve-grid-group-row-focused-text-color: var(--text-color);
    /*--dve-grid-header-url-color: #0d45b7;*/
    --dve-grid-header-url-color: red;
    /* >>> General*/
    --dve-chevron-down-background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m6%209%206%206%206-6%22%2F%3E%3C%2Fsvg%3E") no-repeat center;
    --dve-chevron-up-background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20transform%3D%22rotate(180)%22%3E%3Cpath%20d%3D%22m6%209%206%206%206-6%22%2F%3E%3C%2Fsvg%3E") no-repeat center;
    --dve-cross-background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22currentColor%22%20stroke%3D%22currentColor%22%20viewBox%3D%220%200%20122.88%20122.88%22%20xml%3Aspace%3D%22preserve%22%3E%3Cpath%20d%3D%22M1.426%208.313a4.87%204.87%200%200%201%206.886-6.886l53.127%2053.127%2053.127-53.127a4.87%204.87%200%201%201%206.887%206.886L68.324%2061.439l53.128%2053.128a4.87%204.87%200%200%201-6.887%206.886L61.438%2068.326%208.312%20121.453a4.868%204.868%200%201%201-6.886-6.886l53.127-53.128z%22%2F%3E%3C%2Fsvg%3E") no-repeat center;
    --dve-filter-background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20stroke%3D%22currentColor%22%20viewBox%3D%220%200%20122.88%20107.128%22%20xml%3Aspace%3D%22preserve%22%3E%3Cpath%20d%3D%22M2.788%200h117.297a2.795%202.795%200%200%201%201.817%204.919l-46.82%2046.586v39.979A2.8%202.8%200%200%201%2073.506%2094L51.42%20106.752a2.792%202.792%200%200%201-4.187-2.414h-.006V51.496L.811%204.761A2.787%202.787%200%200%201%202.788.008zm110.535%205.591H9.493L51.851%2048.24c.592.512.966%201.27.966%202.114v49.149l16.674-9.625V50.354h.008c0-.716.274-1.432.822-1.977z%22%2F%3E%3C%2Fsvg%3E") no-repeat center;
}

@media screen and (max-width: 1024px) {
    :root {
        --global-content-width: 98%;
        --open-ticket-edit-right-container-width: 100%;
        --open-ticket-edit-right-container-max-width: unset;
        --open-ticket-right-container-width: 100%;
        --open-ticket-right-container-max-width: unset;
    }
}

@media screen and (max-width: 1280px) {
    :root {
        --global-content-width: 90%;
    }
}

@media screen and (min-width: 1280px) {
    :root {
        --open-ticket-right-container-width: 43%;
        --open-ticket-edit-right-container-width: 43%;
        --open-ticket-right-container-max-width: 30rem;
        --open-ticket-edit-right-container-max-width: 30rem;
    }
}

@media screen and (min-width: 1920px) {
    :root {
        --open-ticket-right-container-max-width: 35rem;
        --open-ticket-edit-right-container-max-width: 35rem;
    }
}

@media screen and (min-width: 2200px) {
    :root {
        --open-ticket-right-container-width: 45%;
        --open-ticket-edit-right-container-width: 45%;
        --open-ticket-right-container-max-width: 48rem;
        --open-ticket-edit-right-container-max-width: 48rem;
    }
}

@media screen and (min-width: 2560px) {
    :root {
        --open-ticket-right-container-width: 55%;
        --open-ticket-edit-right-container-width: 55%;
    }
}