/*!*********************************************************************************
 * X2Engine Open Source Edition is a customer relationship management program developed by
 * X2 Engine, Inc. Copyright (C) 2011-2022 X2 Engine Inc.
 * 
 * This program is free software; you can redistribute it and/or modify it under
 * the terms of the GNU Affero General Public License version 3 as published by the
 * Free Software Foundation with the addition of the following permission added
 * to Section 15 as permitted in Section 7(a): FOR ANY PART OF THE COVERED WORK
 * IN WHICH THE COPYRIGHT IS OWNED BY X2ENGINE, X2ENGINE DISCLAIMS THE WARRANTY
 * OF NON INFRINGEMENT OF THIRD PARTY RIGHTS.
 * 
 * This program is distributed in the hope that it will be useful, but WITHOUT
 * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
 * FOR A PARTICULAR PURPOSE.  See the GNU Affero General Public License for more
 * details.
 * 
 * You should have received a copy of the GNU Affero General Public License along with
 * this program; if not, see http://www.gnu.org/licenses or write to the Free
 * Software Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA
 * 02110-1301 USA.
 * 
 * You can contact X2Engine, Inc. P.O. Box 610121, Redwood City,
 * California 94061, USA. or at email address contact@x2engine.com.
 * 
 * The interactive user interfaces in modified source and object code versions
 * of this program must display Appropriate Legal Notices, as required under
 * Section 5 of the GNU Affero General Public License version 3.
 * 
 * In accordance with Section 7(b) of the GNU Affero General Public License version 3,
 * these Appropriate Legal Notices must retain the display of the "Powered by
 * X2 Engine" logo. If the display of the logo is not reasonably feasible for
 * technical reasons, the Appropriate Legal Notices must display the words
 * "Powered by X2 Engine".
 **********************************************************************************/
 .pseudo-link {
    cursor: pointer;
    color: #004baf;
    transition: color .1s
}

.pseudo-link:hover {
    color: #006cfc
}

.opacity-hover,
.ui-dialog-titlebar-close {
    opacity: .3
}

.opacity-hover:hover,
.ui-dialog-titlebar-close:hover {
    opacity: 1
}

/*!
 *  Font Awesome 4.2.0 by @davegandy - http://fontawesome.io - @fontawesome
 *  License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
 */
.cke_button__imagefromurl_icon:before,
.cke_button__mediaselector_icon:before,
.ui-dialog-titlebar-close:before {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}
.pull-left.cke_button__imagefromurl_icon:before,
.pull-left.cke_button__mediaselector_icon:before,
.pull-left.ui-dialog-titlebar-close:before {
    margin-right: .3em
}
.pull-right.cke_button__imagefromurl_icon:before,
.pull-right.cke_button__mediaselector_icon:before,
.pull-right.ui-dialog-titlebar-close:before {
    margin-left: .3em
}

.ui-dialog-titlebar-close:before {
    content: "\f00d"
}

.cke_button__mediaselector_icon:before {
    content: "\f03e"
}

.cke_button__imagefromurl_icon:before {
    content: "\F093 "
}

.fragment-target-outer {
    position: relative
}

.fragment-target-outer .fragment-target {
    position: absolute;
    top: -40px
}

i.icon-button-min {
    color: #004baf;
    text-decoration: underline;
    cursor: pointer
}

i.icon-button-min:focus,
i.icon-button-min:hover {
    color: #006cfc
}

.x2-centered {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0
}

.x2-question-mark {
    color: #004baf;
    cursor: default
}

.x2-hide {
    display: none
}

body {
    font-size: 10pt
}

.submenu-title-bar {
    padding: 0px 12px 7px 0px;
    background: #FFFFFF;
}
.quick-read-link+a.fa-eye {
    position: relative;
    left: 4px
}

select,
.x2-select,
input[type="search"] {
    height: 38px;
    margin-right: 10px !important;
    float: none !important;
    text-transform: none;
    font-size: 0.875rem;
    -moz-padding-start: calc(0.75rem - 3px);
    font-size: 1rem;
    padding: .25rem .5rem;
    font-weight: 400;
    line-height: 1.5;
    border-radius: 0.375rem;
    background: initial;
    color: var(--color-text);
    border: 1px solid;
    border-color: var(--color-border);
    width: auto;
    box-sizing: border-box;
}

.x2-select:focus {
    color: var(--color-text);
}

.x2-select:not(.x2-multiselect) {
    display: inline-block !important
}

.x2-minimal-select {
    height: 38px;
    display: inline-block !important;
    margin: 25px 0px 10px !important;
    float: none !important;
    padding: 0px 8px;
    outline: none;
    background: #fff !important;
    color: #6F6F6F;
    text-decoration: none;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
    border-radius: 3px;
    width: auto !important;
}

.x2-select {
    background: white;
    border: 1px solid #e0e0e0
}

.x2-minimal-select {
    background: none;
    border: 1px solid white
}

.page-title .x2-minimal-select {
    border: 1px solid #cecece
}

.x2-minimal-select:hover,
.x2-minimal-select:focus {
    border: 1px solid #BEBDBD;
    background: #e4e4e4
}

.x2-select option,
.x2-minimal-select option {
    background-color: white
}

.real-button-group button {
    float: left;
    margin-left: 0 !important;
    margin-right: 0 !important
}

.x2-button,
.ui-datepicker-buttonpane button,
.x2-minimal-button,
.button-group-pager li,
.ui-dialog .ui-dialog-buttonpane button {
    display: inline-block;
    vertical-align: top;
    padding: 0 8px;
    border: 1px solid #e0e0e0;
    background: white;
    color: #555555;
    font-size: 0.9rem;
    line-height: 24px;
    font-weight: normal;
    text-decoration: none;
    text-align: center;
    -webkit-appearance: none;
    cursor: pointer;
    -webkit-border-radius: 0.375rem;
    -moz-border-radius: 0.375rem;
    -ms-border-radius: 0.375rem;
    -o-border-radius: 0.375rem;
    border-radius: 0.375rem;
}
.x2-minimal-button {
    border: none;
    background: none;
    box-shadow: none
}

.x2-button.disabled-link, 
.ui-datepicker-buttonpane button.disabled-link, 
.x2-minimal-button.disabled-link {
    color: var(--color-primary);
    background-color: #D9ECED;
    pointer-events: none;
    cursor: default;
    -webkit-box-shadow: inset 0 1px 1px 0 #999;
    -moz-box-shadow: inset 0 1px 1px 0 #999;
    -ms-box-shadow: inset 0 1px 1px 0 #999;
    -o-box-shadow: inset 0 1px 1px 0 #999;
    box-shadow: inset 0 1px 1px 0 #999;
}

.x2-button.hover,
.ui-datepicker-buttonpane button.hover,
.x2-button:hover,
.ui-datepicker-buttonpane button:hover {
    color: #000;
    background: #f4f7f9
}

.x2-minimal-button:hover,
input.hover,
.button-group-pager li:hover,
.x2-select:hover,
.x2-minimal-select:hover,
.ui-dialog .ui-dialog-buttonpane button:hover {
    color: var(--color-text);
    background: var(--color-background);
}

.x2-button.active,
.ui-datepicker-buttonpane button.active {
    color: black;
    border-color: #A7A7A7;
    background: #cccccc;
    -webkit-box-shadow: inset 0 1px 1px 0 #999;
    -moz-box-shadow: inset 0 1px 1px 0 #999;
    -ms-box-shadow: inset 0 1px 1px 0 #999;
    -o-box-shadow: inset 0 1px 1px 0 #999;
    box-shadow: inset 0 1px 1px 0 #999
}

.x2-minimal-button:active,
.x2-minimal-button.clicked {
    color: black;
    border-color: #d3dfe7;
    background: #d3dfe7;
    -webkit-box-shadow: inset 0 1px 1px 0 #999;
    -moz-box-shadow: inset 0 1px 1px 0 #999;
    -ms-box-shadow: inset 0 1px 1px 0 #999;
    -o-box-shadow: inset 0 1px 1px 0 #999;
    box-shadow: inset 0 1px 1px 0 #999
}

.x2-button:active:not(.disabled),
.ui-datepicker-buttonpane button:active:not(.disabled),
.x2-button.clicked,
.ui-datepicker-buttonpane button.clicked {
    color: #fff;
    background: #007D88;
}

.x2-button.disabled,
.ui-datepicker-buttonpane button.disabled {
    cursor: default !important;
    color: gray;
    background: #d7d7d7
}

.button-group-pager li.selected,
.button-group-pager li:active {
    color: black;
    border-color: #A7A7A7;
    background: #cccccc;
    -webkit-box-shadow: inset 0 1px 1px 0 #999;
    -moz-box-shadow: inset 0 1px 1px 0 #999;
    -ms-box-shadow: inset 0 1px 1px 0 #999;
    -o-box-shadow: inset 0 1px 1px 0 #999;
    box-shadow: inset 0 1px 1px 0 #999
}
.bottom-row-outer input.x2-button-large {
    padding: 5px 20px;
    font-size: 12px;
    font-family: Arial, Helvetica, sans-serif;
    border-color: var(--color-primary);
    background: var(--color-primary);
    color: var(--color-white);
}
input.active, 
.ui-dialog .ui-dialog-buttonpane button:active {
    color: var(--color-white);
    border-color: var(--color-primary);
    background: var(--color-primary);
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    -ms-box-shadow: none;
    -o-box-shadow: none;
    box-shadow: none;
}
.ui-dialog .ui-dialog-buttonpane button:hover {
    background: var(--color-primary);
    color: var(--color-white);
}

.x2-button.clicked:hover,
.ui-datepicker-buttonpane button.clicked:hover,
.x2-minimal-button.clicked:hover {
    background-color: #c7c7c7
}

.detail-more-info .x2-button.highlight,
.ui-datepicker-buttonpane button.highlight,
.x2-minimal-button.highlight,
.ui-dialog .ui-dialog-buttonpane button.highlight {
    background-color: var(--color-primary);
    border-color: #007D88;
    color: #fff;
    height: 36px;
    width: 70px;
    padding: 0px;
    font-size: 12px;
    line-height: 3;
    border-radius: 0.375rem;
}
.x2-button.highlight:hover,
.ui-datepicker-buttonpane button.highlight:hover,
.x2-minimal-button.highlight:hover,
.ui-dialog .ui-dialog-buttonpane button.highlight:hover {
    background-color: var(--color-primary);
}

.x2-button.highlight:active,
.ui-datepicker-buttonpane button.highlight:active,
.x2-button.highlight.clicked,
.ui-datepicker-buttonpane button.highlight.clicked,
.x2-minimal-button.highlight:active,
.x2-minimal-button.highlight.clicked,
.ui-dialog .ui-dialog-buttonpane button.highlight:active,
.ui-dialog .ui-dialog-buttonpane button.highlight.clicked {
    background-color: var(--color-primary);
    box-shadow: none;
}

.x2-button.blue,
.ui-datepicker-buttonpane button.blue,
.x2-minimal-button.blue,
.ui-dialog .ui-dialog-buttonpane button.blue {
    background-color: #629ceb;
    border-color: #1a66cd;
    color: white
}

.x2-button.blue:hover,
.ui-datepicker-buttonpane button.blue:hover,
.x2-minimal-button.blue:hover,
.ui-dialog .ui-dialog-buttonpane button.blue:hover {
    background-color: #4087e7
}

.x2-button.blue:active,
.ui-datepicker-buttonpane button.blue:active,
.x2-button.blue.clicked,
.ui-datepicker-buttonpane button.blue.clicked,
.x2-minimal-button.blue:active,
.x2-minimal-button.blue.clicked,
.ui-dialog .ui-dialog-buttonpane button.blue:active,
.ui-dialog .ui-dialog-buttonpane button.blue.clicked {
    color: white;
    border-color: #1a66cd;
    background-color: #1e71e2
}

.ui-dialog .ui-dialog-buttonpane button.urgent {
    background-color: #E8382A;
    border-color: #B50000 !important;
    text-shadow: rgba(0, 0, 0, 0.5) 0 1px 3px;
    color: #fff
}

a.x2-button:hover {
    text-decoration: none !important
}

a.x2-button.urgent,
input.x2-button.urgent,
button.x2-button.urgent,
.ui-datepicker-buttonpane button.urgent,
a.x2-minimal-button.urgent,
input.x2-minimal-button.urgent,
button.x2-minimal-button.urgent {
    background-color: #E8382A;
    border-color: #B50000 !important;
    text-shadow: rgba(0, 0, 0, 0.5) 0 1px 3px;
    color: #fff
}

.ui-dialog .ui-dialog-buttonpane button.urgent:hover,
a.x2-button.urgent:hover,
input.x2-button.urgent:hover,
button.x2-button.urgent:hover,
.ui-datepicker-buttonpane button.urgent:hover,
a.x2-minimal-button.urgent:hover,
input.x2-minimal-button.urgent:hover,
button.x2-minimal-button.urgent:hover {
    background-color: #CF3225
}

.ui-dialog .ui-dialog-buttonpane button.urgent:active,
a.x2-button.urgent:active,
input.x2-button.urgent:active,
button.x2-button.urgent:active,
.ui-datepicker-buttonpane button.urgent:active,
a.x2-minimal-button.urgent:active,
input.x2-minimal-button.urgent:active,
button.x2-minimal-button.urgent:active {
    background-color: #A8291E
}

input.x2-button,
button.x2-button,
.ui-datepicker-buttonpane button,
input.x2-minimal-button,
button.x2-minimal-button,
.ui-dialog .ui-dialog-buttonpane button {
    display: block;
    margin: 5px 0 5px 0;
    padding: 0 20px;
    border-radius: 0.5rem;
    color: var(--color-text);
}

input.x2-button.float,
a.x2-button.float,
input.x2-minimal-button.float {
    float: right
}

a.x2-minimal-button.float {
    float: right
}

a.x2-button span.add-button {
    padding: 0 0 0 16px;
    background: url(../images/plus.gif) left center no-repeat transparent
}

.x2-button.black,
.ui-datepicker-buttonpane button.black,
.x2-minimal-button.black {
    border-color: #4e4e4e;
    background: #555
}

.x2-button.black:hover,
.ui-datepicker-buttonpane button.black:hover,
.x2-minimal-button.black:hover {
    border-color: #4e4e4e;
    background: #666666
}

.x2-button.black:active,
.ui-datepicker-buttonpane button.black:active,
.x2-minimal-button.black:active {
    border-color: #000;
    -moz-box-shadow: inset 0 1px 1px 0 #000;
    -webkit-box-shadow: inset 0 1px 1px 0 #000;
    box-shadow: inset 0 1px 1px 0 #000;
    background: #222222
}

.x2-button.x2-blue,
.ui-datepicker-buttonpane button.x2-blue {
    border: 1px solid #357fe5;
    background: #629ceb;
    color: white
}

.x2-button.x2-blue:hover,
.ui-datepicker-buttonpane button.x2-blue:hover {
    background: #5091e9
}

.x2-button.x2-blue:active,
.ui-datepicker-buttonpane button.x2-blue:active {
    color: white;
    background: #3e85e6
}

.x2-button.x2-red,
.ui-datepicker-buttonpane button.x2-red {
    border: 1px solid #d72323;
    background: #e24b4b;
    color: white
}

.x2-button.x2-red:hover,
.ui-datepicker-buttonpane button.x2-red:hover {
    background: #df3939
}

.x2-button.x2-red:active,
.ui-datepicker-buttonpane button.x2-red:active {
    color: white;
    background: #dc2828
}

.x2-button.x2-green,
.ui-datepicker-buttonpane button.x2-green {
    border: 1px solid #018401;
    background: #01b701;
    color: white
}

.x2-button.x2-green:hover,
.ui-datepicker-buttonpane button.x2-green:hover {
    background: #01a301
}

.x2-button.x2-green:active,
.ui-datepicker-buttonpane button.x2-green:active {
    color: white;
    background: #018e01
}

.x2-button.x2-silver,
.ui-datepicker-buttonpane button.x2-silver {
    color: #424242 !important
}

input.x2-button-large {
    padding: 5px 20px;
    font-size: 12px;
    font-family: Arial, Helvetica, sans-serif
}

.x2-small-button {
    height: 26px;
    margin: 0 0 0 0;
    font-size: 11px !important;
    padding: 0 20px !important
}

.page-title .x2-minimal-button:hover {
    background: #dfdfdf
}

.page-title .x2-minimal-button:active {
    background: #bdbdbd
}


.button-group-pager li {
    padding: 0
}

.button-group-pager li.first,
.button-group-pager li.last {
    display: none
}

.button-group-pager li.previous,
.button-group-pager li.page,
.button-group-pager li.next {
    display: inline-block;
    height: 20px;
    line-height: 20px;
    margin-left: -2px;
    margin-left: -4px
}

.button-group-pager li a {
    text-decoration: none;
    color: #777;
    padding: 0px 8px 0px 8px;
    display: block
}

.button-group-pager li.hidden a {
    color: #aeaeae
}

.x2-button-group {
    margin: 5px
}

.button-group-pager li.selected,
.x2-button-group .x2-button.disabled,
.x2-button-group .ui-datepicker-buttonpane button.disabled,
.ui-datepicker-buttonpane .x2-button-group button.disabled {
    color: #bbbbbb
}

.button-group-pager li,
.x2-button-group a.x2-button {
    cursor: pointer
}

.button-group-pager li {
    vertical-align: middle;
    margin: -3px 0 0 0;
    border-right-width: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
    border-radius: 0
}

.x2-button-group .x2-button,
.x2-button-group .ui-datepicker-buttonpane button,
.ui-datepicker-buttonpane .x2-button-group button {
    vertical-align: middle;
    margin: -3px 0 0 0;
    border-right-width: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
    border-radius: 0
}

.x2-button-group .x2-button:only-child,
.x2-button-group .ui-datepicker-buttonpane button:only-child,
.ui-datepicker-buttonpane .x2-button-group button:only-child,
.x2-button-group .x2-button.pseudo-only-child,
.x2-button-group .ui-datepicker-buttonpane button.pseudo-only-child,
.ui-datepicker-buttonpane .x2-button-group button.pseudo-only-child {
    border-right-width: 1px !important;
    -webkit-border-radius: 3px !important;
    -moz-border-radius: 3px !important;
    -ms-border-radius: 3px !important;
    -o-border-radius: 3px !important;
    border-radius: 3px !important
}

.button-group-pager .previous,
.x2-button-group .x2-button:first-child,
.x2-button-group .ui-datepicker-buttonpane button:first-child,
.ui-datepicker-buttonpane .x2-button-group button:first-child {
    -webkit-border-radius: 3px 0 0 3px;
    -moz-border-radius: 3px 0 0 3px;
    -ms-border-radius: 3px 0 0 3px;
    -o-border-radius: 3px 0 0 3px;
    border-radius: 3px 0 0 3px
}

.button-group-pager .next {
    border-right-width: 1px;
    -webkit-border-radius: 0 3px 3px 0;
    -moz-border-radius: 0 3px 3px 0;
    -ms-border-radius: 0 3px 3px 0;
    -o-border-radius: 0 3px 3px 0;
    border-radius: 0 3px 3px 0
}

.x2-button-group .x2-button.x2-last-child,
.x2-button-group .ui-datepicker-buttonpane button.x2-last-child,
.ui-datepicker-buttonpane .x2-button-group button.x2-last-child,
.x2-button-group .x2-button:last-child,
.x2-button-group .ui-datepicker-buttonpane button:last-child,
.ui-datepicker-buttonpane .x2-button-group button:last-child,
.x2-button-group .x2-button.x2-last-child,
.x2-button-group .ui-datepicker-buttonpane button.x2-last-child,
.ui-datepicker-buttonpane .x2-button-group button.x2-last-child {
    border-right-width: 1px;
    -webkit-border-radius: 0 3px 3px 0;
    -moz-border-radius: 0 3px 3px 0;
    -ms-border-radius: 0 3px 3px 0;
    -o-border-radius: 0 3px 3px 0;
    border-radius: 0 3px 3px 0;
    margin-left: -4px
}

.x2-button-group .x2-button :first-child,
.x2-button-group .ui-datepicker-buttonpane button :first-child,
.ui-datepicker-buttonpane .x2-button-group button :first-child {
    margin-left: 0px
}

.portlet-content .x2-button-group {
    margin: 0
}

.x2-button.x2-disabled-button,
.ui-datepicker-buttonpane button.x2-disabled-button {
    opacity: 0.5
}

.x2-minimal-link {
    text-decoration: none;
    color: #3776CA
}

.x2-minimal-link:hover {
    text-decoration: underline
}

.x2-link {
    display: inline-block;
    font-weight: normal;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
    border-radius: 3px
}

.x2-link.ui-draggable-dragging {
    z-index: 1000;
    border: 1px solid #999;
    padding: 4px 2px;
    background-color: #F4F4F4;
    background: -webkit-gradient(linear, left top, left bottom, from(#f0f0f0), to(#F5F5F5));
    background: -moz-linear-gradient(top, #f0f0f0, #F5F5F5)
}

.x2-link.ui-draggable-dragging span {
    text-decoration: none;
    color: #000
}

.x2-link span {
    background-position: 0px 1px;
    background-repeat: no-repeat;
    display: inline-block;
    text-decoration: underline;
    padding-left: 15px
}

.ui-tabs {
    border: none !important;
    margin: 0 0 5px 0 !important;
    padding: 0 !important;
    background: none !important
}

.ui-tabs .ui-tabs-nav {
    background: none;
    border: none;
    margin: 0 0 0 0;
    padding: 0
}

.ui-tabs .ui-tabs-nav>li {
    background: white;
    font-size: 10pt;
    margin: 0 2px 0 0;
    border-color: #e0e0e0 !important;
    border-bottom: none;
    font-family:'DM Sans', sans-serif;
    -webkit-border-radius: 4px 4px 0 0;
    -moz-border-radius: 4px 4px 0 0;
    -ms-border-radius: 4px 4px 0 0;
    -o-border-radius: 4px 4px 0 0;
    border-radius: 4px 4px 0 0
}

.history .ui-tabs .ui-tabs-nav>li a {
    outline: 0;
    padding: 4px 7px
}

.history .ui-tabs .ui-tabs-nav>li a b {
    font-size: 20px;
    line-height: 12px;
    margin-top: -2px;
    display: inline-block;
    vertical-align: middle;
    color: #579100
}

.history .ui-tabs .ui-tabs-nav>li:first-child {
    margin-left: 6px
}

.ui-tabs .ui-tabs-nav>li.ui-state-active {
    border-color: #D1D1D1;
    border-bottom-color: #F4F4F4;
    background: #f4f7f9
}

.ui-tabs .ui-tabs-nav>li.ui-state-hover {
    background: #fff
}

.ui-tabs .ui-tabs-nav>li.ui-state-active.ui-state-hover {
    background: #f4f7f9
}

#publisher .form2 {
    background: #F4F4F4;
    border-color: #D1D1D1;
    position: relative;
    padding: 15px!important;
    z-index: 1;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 4px
}

.history .ui-tabs .form2 {
    padding: 5px
}

.ui-tabs .ui-tabs-nav li.publisher-label {
    border: none;
    background: none;
    padding: 0.5em 0.5em 0.5em 0.25em;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none
}

.ui-tabs .ui-tabs-panel {
    padding: 0 !important
}

.detail-form {
    display: none;
    z-index: 10
}

#edit-buttons {
    display: block;
    height: 36px;
    clear: both
}

#edit-buttons .x2-button,
#edit-buttons .ui-datepicker-buttonpane button,
.ui-datepicker-buttonpane #edit-buttons button {
    float: left
}

#doc-box {
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 4px;
    border: 1px solid #ccc;
    clear: both;
    height: 600px;
    width: auto;
    overflow: scroll-y;
    margin: 0 0 10px 0;
    padding: 10px 7px;
    width: auto
}

a.list-action {
    text-decoration: none
}

a.list-action:hover {
    text-decoration: underline
}

div.x2-sortlist .row,
div.x2-cond-list .row {
    overflow: visible
}

div.x2-sortlist a,
div.x2-cond-list a {
    text-decoration: none
}
a.x2-sortlist-add {
    text-decoration: none;
    margin-bottom: 5px;
    width: 71px;
    height: 38px;
    background: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-white);
    border-radius: 0.375rem;
    font-size: 15px;
}
div.x2-sortlist ol, 
div.x2-cond-list ol {
    margin: 0;
    padding: 0;
    margin-bottom: 16px;
    margin-top: 8px;
}
div.x2-sortlist li,
div.x2-cond-list li {
    position: relative;
    display: block;
    overflow: hidden;
    padding: 0;
    list-style-type: none;
    border: 1px solid var(--color-border);
    border-width: 1px 1px 0 1px;
    background: #fff;
}
div.x2-sortlist li:last-child, 
div.x2-cond-list li:last-child {
    border-bottom: 1px solid var(--color-border);
    -webkit-border-radius: 0 0 4px 4px;
    -moz-border-radius: 0 0 4px 4px;
    -ms-border-radius: 0 0 4px 4px;
    -o-border-radius: 0 0 4px 4px;
    border-radius: 0 0 4px 4px;
}

div.x2-sortlist li:last-child,
div.x2-cond-list li:last-child {
    border-bottom: 1px solid #b3b3b3;
    -webkit-border-radius: 0 0 4px 4px;
    -moz-border-radius: 0 0 4px 4px;
    -ms-border-radius: 0 0 4px 4px;
    -o-border-radius: 0 0 4px 4px;
    border-radius: 0 0 4px 4px
}

div.x2-sortlist li:only-child, 
div.x2-cond-list li:only-child {
    border-bottom: 1px solid var(--color-border);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 0.375rem;
}

div.x2-sortlist li:first-child .handle {
    -moz-box-shadow: inset 1px 1px 0 0 rgba(255, 255, 255, 0.3);
    -webkit-box-shadow: inset 1px 1px 0 0 rgba(255, 255, 255, 0.3);
    box-shadow: inset 1px 1px 0 0 rgba(255, 255, 255, 0.3)
}

div.x2-sortlist li .handle {
    width: 28px;
    margin: 0 -35px -2000px 0;
    height: 0;
    padding: 5px 0 2000px 5px;
    float: left;
    border: 1px solid var(--color-border);
    border-width: 0 1px 0 0;
    cursor: n-resize;
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    text-shadow: rgba(0, 0, 0, 0.5) 0 1px 4px;
    background: #D8D8D8;
    background: -moz-linear-gradient(left, #777, #666);
    -moz-box-shadow: inset 1px 0 0 0 rgba(255, 255, 255, 0.3);
    -webkit-box-shadow: inset 1px 0 0 0 rgba(255, 255, 255, 0.3);
    box-shadow: inset 1px 0 0 0 rgba(255, 255, 255, 0.3);
}

div.x2-sortlist .cell.inline-label {
    line-height: 26px;
    font-weight: bold
}

div.x2-cond-list .cell.inline-label {
    line-height: 26px;
    font-weight: bold
}

div.x2-sortlist#workflow-stages li .handle {
    height: 85px
}

div.x2-sortlist li .handle:hover {
    background: #888;
    background: #D8D8D8;
    background: -moz-linear-gradient(left, gray, #707070);
}

div.x2-sortlist li .handle:active {
    background: #888;
    background: -webkit-gradient(linear, left top, right top, from(#555), to(#606060));
    background: -moz-linear-gradient(left, #555, #606060);
    text-shadow: rgba(0, 0, 0, 0.5) 0 -1px 4px;
    -moz-box-shadow: inset 1px 0 0 0 rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: inset 1px 0 0 0 rgba(0, 0, 0, 0.3);
    box-shadow: inset 1px 0 0 0 rgba(0, 0, 0, 0.3)
}

div.x2-sortlist li .content {
    display: block;
    overflow: auto;
    width: auto;
    margin-left: 35px;
    padding: 7px 15px;
}
div.x2-cond-list li .content {
    display: block;
    overflow: auto;
    width: auto;
    margin-left: 35px;
    padding-left: 5px
}

div.x2-sortlist li.ui-sortable-helper {
    border-bottom: 1px solid #b3b3b3
}

div.x2-sortlist a.del {
    display: block;
    position: absolute;
    right: 2px;
    top: 3px;
    opacity: 0.8;
    height: 12px;
    width: 12px;
    cursor: pointer;
    background: url(../images/icons/Delete_Activity.png) top left no-repeat
}

div.x2-cond-list a.del {
    display: block;
    position: absolute;
    right: 2px;
    top: 3px;
    opacity: 0.8;
    height: 12px;
    width: 12px;
    cursor: pointer;
    background: url(../images/icons/Delete_Activity.png) top left no-repeat
}

div.x2-sortlist a.del:hover {
    opacity: 1
}

div.x2-cond-list a.del:hover {
    opacity: 1
}

div.x2-cond-list fieldset {
    border: none !important;
    margin-bottom: 0 !important;
    padding: 5px !important
}

.list-view h2,
.list-view h3,
.list-view h4 {
    display: inline;
    margin-bottom: 0
}

.list-view .items {
    clear: both;
    background: #fff;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 4px;
    border: 1px solid #ccc
}

.list-view .empty {
    margin: 0 0 5px 5px;
    display: block
}

.list-view .comment-age {
    color: #666
}

.list-view .summary {
    color: #555;
    display: inline;
    float: right
}

.list-view .view {
    clear: both;
    padding: 0;
    width: auto
}

.list-view a {
    text-decoration: none
}

.list-view .view.top-level {
    padding: 2px 5px 10px 5px
}

.list-view .view.top-level.activity-feed {
    padding: 10px 10px 10px 5px
}

.list-view .view.top-level.date-break {
    text-align: center;
    font-weight: bold;
    padding: 2px 5px 5px 5px;
    background-color: white;
    color: #555555
}

.list-view .view.top-level .list-view {
    margin: 0 -5px;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
    border-radius: 0;
    border: none;
    padding: 0
}

.list-view .view.top-level form {
    margin-top: 5px
}

.list-view .view.top-level .view {
    background: #F4F4F4;
    margin: 0;
    padding: 2px 5px 2px 20px;
    border: solid #F5F5F5;
    border-width: 0 0 0 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
    border-radius: 0
}

.list-view .view.top-level:first-child {
    border-top: none
}

.list-view .deleteButton {
    float: right
}

.list-view .pager {
    margin: 5px 0 5px 0;
    text-align: right;
    border: 1px solid #ccc;
    padding: 5px;
    background: #fff;
    margin: 5px 0 0 0;
    text-align: right;
    -webkit-border-radius: 4px 4px 4px 4px;
    -moz-border-radius: 4px 4px 4px 4px;
    -ms-border-radius: 4px 4px 4px 4px;
    -o-border-radius: 4px 4px 4px 4px;
    border-radius: 4px 4px 4px 4px
}

.list-view.action#action-list .items {
    clear: none;
    max-height: 800px;
    overflow-y: auto;
    border: none
}

.list-view.action#action-list .view {
    clear: none
}

.list-view.action#action-list .pager {
    display: none
}

.list-view.action#action-list .view:hover,
.list-view.action#action-list .important {
    background-color: #f4f7f9
}

.flush-grid-view .pager {
    border-top: none
}

.flush-grid-view table {
    margin: 0;
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: 1px solid #aaa
}

button.ui-dialog-titlebar-close {
    background: #b1b1b1 !important;
    background-image: url("../images/icons/Close_Widget.png") !important;
    border: none !important;
    background-repeat: no-repeat !important
}

button.ui-dialog-titlebar-close span {
    display: none !important
}

button.ui-dialog-titlebar-close:hover {
    opacity: 1.7;
    color: var(--color-white);
}

.ui-state-focus .ui-icon {
    background-image: url("../images/icons/Close_Widget.png");
    background-repeat: no-repeat !important
}

.ui-state-focus .ui-icon:hover {
    opacity: 0.7
}

button.ui-button.ui-dialog-titlebar-close {
    background: none;
    border: none;
    color: var(--color-white);
}

.ui-dialog #x2-view-email-dialog.ui-dialog-content {
    overflow: hidden !important
}

.ui-dialog .dialog-button-row {
    float: right
}

.ui-dialog .ui-dialog-buttonpane button {
    float: left;
    background: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary);
    min-width: 70px;
    font-size: 16px;
    font-weight: 400;
    font-family: 'DM Sans', sans-serif;
    border-radius: 0.375rem;
    margin-left: 5px;
    height: 38px;
}

.ui-dialog textarea {
    min-width: 99%;
    max-width: 99%;
    width: 99% !important;
    color: var(--color-text) !important;
    font-size: 15px;
}

.ui-dialog-titlebar {
    background: #dcdcdc !important
}

.ui-dialog {
    z-index: 1000;
    box-shadow: none;
    top: 12%;
    left: 35%;
    border-color: var(--color-border) !important;
    border-radius: 0.375rem !important;
    max-height: 70% !important;
    overflow-y: scroll !important;
}
.ui-dialog.calendarViewEventDialog {
    left: 83% !important;
    top: 0% !important;
    width: 17% !important;
    max-height: 100% !important;
    overflow-y: hidden !important;
    box-sizing: border-box;
    display: flex !important;
    flex-direction: column;
    height: 100% !important;
}
/* =========== Calendear Event Dialog Custom Styles =========== */
.ui-dialog.calendarViewEventDialog .ui-dialog-content .cell.dialog-cell {
    width: 100%;
    box-sizing: border-box;
}
.ui-dialog.calendarViewEventDialog .ui-dialog-content .cell.dialog-cell input.hasDatepicker {
    height: 38px;
    box-sizing: border-box;
    border-radius: 0.375rem;
    width: 100%;
}
.ui-dialog.calendarViewEventDialog .ui-dialog-content .cell.dialog-cell select {
    width: 100%;
}
.ui-dialog.calendarViewEventDialog .ui-dialog-content .cell.dialog-cell .dialog-label {
    margin: 5px 0 5px 0;
}
#calendar .fc-grid .fc-day-number {
    width: 100%;
    text-align: center;
    margin-top: 5px;
}
#calendar  .fc-grid .fc-other-month {
    background: var(--color-hover);
}
.ui-dialog .ui-widget-header {
    margin: -4px -4px 0px -4px;
    -webkit-border-radius: 0.375rem 0.375rem 0 0;
    -moz-border-radius: 0.375rem 0.375rem 0 0;
    -ms-border-radius: 0.375rem 0.375rem 0 0;
    -o-border-radius: 0.375rem 0.375rem 0 0;
    border-radius: 0.375rem 0.375rem 0 0;
    border: 1px solid var(--color-primary);
    font-weight: 500;
    background: var(--color-primary) !important;
    color: var(--color-white);
    font-family: 'DM Sans', sans-serif;
    padding-top: 10px;
    font-size: 18px;
    padding-bottom: 10px;
}

.ui-dialog .ui-dialog-titlebar-close {
    background: none !important;
    border: none !important;
    padding: 1px !important;
    margin: -13px 2px 0 0 !important;
    color: var(--color-white);
    opacity: 0.7;
}

.ui-dialog .ui-widget-header .ui-icon {
    background-image: url("../images/icons/Close_Widget.png") !important;
    background-position: -2px -1px;
    opacity: 1
}

.ui-dialog .ui-widget-header .ui-icon:hover {
    background-position: -2px -1px;
    opacity: 0.8
}

.ui-draggable .ui-dialog-titlebar {
    cursor: default
}

.lt-ie9 .ui-dialog {
    border-width: 1px
}

.ui-dialog .ui-dialog-buttonpane {
    border: none !important
}

.ui-progressbar {
    background-image: none !important
}

.ui-progressbar-value {
    background-image: none !important;
    background-color: #50B138 !important
}

.ui-timepicker-div dl:first-child {
    margin-bottom: 32px !important
}

.yiiPager .hidden a {
    color: #9b9b9b !important
}

.yiiPager a:hover,
.yiiPager .selected a {
    color: #3d70b4 !important
}

.yiiPager a {
    color: #555555 !important;
    border: none !important;
    background: none !important;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    -ms-border-radius: 12px;
    -o-border-radius: 12px;
    border-radius: 12px
}

#cke_email-message {
    margin-bottom: 6px !important
}

.cke_bottom {
    background: none !important;
    border-top: none !important;
    display: inline !important;
    height: 0px !important;
    width: 0px !important;
    padding: 0 0 0 0 !important;
    margin: 0 0 0 0 !important
}

.cke_resizer_ltr {
    margin-right: 2px !important
}

#cke_1_resizer {
    position: relative;
    z-index: 1
}

.cke_toolgroup {
    background-image: none !important;
    -moz-box-shadow: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important
}

.cke_toolgroup .cke_button {
    background-image: none !important;
    -moz-box-shadow: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important
}

.cke_toolbox .cke_combo_button,
.cke_toolbox .cke_combo_off .cke_combo_button,
.cke_toolbox .cke_combo_button:hover {
    background-image: none !important;
    -moz-box-shadow: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important
}

.cke_toolbox_collapser,
.cke_dialog_title {
    background-image: none !important;
    -moz-box-shadow: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important
}

.cke_dialog_ui_button {
    background-image: none !important;
    -moz-box-shadow: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important
}

.cke_dialog_ui_button:hover,
.cke_dialog_ui_button:active {
    background-image: none !important;
    -moz-box-shadow: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important
}

.cke_dialog_footer,
.cke_toolbox_collapser:hover {
    background-image: none !important;
    -moz-box-shadow: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important
}

.cke_dialog_ui_button_ok {
    text-shadow: none !important;
    border-color: 1px solid gray !important
}

.cke_dialog_ui_button_cancel {
    text-shadow: none !important;
    border-color: 1px solid gray !important
}

.cke_dialog_ui_button_cancel:hover,
.cke_dialog_ui_button_cancel:active {
    border-color: 1px solid gray !important
}

.cke_dialog_ui_button_ok:hover,
.cke_dialog_ui_button_ok:active {
    border-color: 1px solid gray !important
}

.cke_dialog_ui_button_ok:hover {
    background: #64A70F !important
}

.cke_dialog_ui_button_cancel:hover a,
.cke_dialog_ui_button_cancel:active a {
    border: none !important
}

.cke_dialog_ui_button_ok:hover a,
.cke_dialog_ui_button_ok:active a {
    border: none !important
}

.cke_dialog_ui_button_cancel:active,
.cke_dialog_ui_button_ok:active {
    -moz-box-shadow: inset 0 1px 1px 0 #999 !important;
    -webkit-box-shadow: inset 0 1px 1px 0 #999 !important;
    box-shadow: inset 0 1px 1px 0 #999 !important
}

.cke_dialog_title {
    text-shadow: none !important;
    border-bottom: none !important
}

.cke_dialog_footer {
    text-shadow: none !important;
    border-bottom: none !important;
    background: none !important;
    outline: none !important
}

.cke_toolgroup {
    background: none !important;
    border: none !important
}

.cke_toolbox .cke_combo_button {
    background: none !important
}

.cke_toolgroup .cke_button {
    border: 1px solid #e4e4e4 !important;
    -webkit-border-radius: 3px !important;
    -moz-border-radius: 3px !important;
    -ms-border-radius: 3px !important;
    -o-border-radius: 3px !important;
    border-radius: 3px !important
}

.cke_button.cke_button__source,
.cke_toolbox .cke_combo_button,
.cke_toolbox_collapser {
    border: 1px solid #c2c2c2 !important
}

.cke_toolgroup .cke_button:hover,
.cke_toolbox .cke_combo_button:hover {
    background: #d6d6d6 !important;
    border: 1px solid #afafaf !important
}

.cke_toolgroup .cke_button:active,
.cke_toolgroup .cke_button.cke_button_on {
    background: #cacaca !important;
    border: 1px solid #afafaf !important;
    -moz-box-shadow: inset 0 1px 1px 0 #999 !important;
    -webkit-box-shadow: inset 0 1px 1px 0 #999 !important;
    box-shadow: inset 0 1px 1px 0 #999 !important
}

.cke_toolbox .cke_combo_on .cke_combo_button {
    background: #cacaca !important;
    border: 1px solid #afafaf !important;
    -moz-box-shadow: inset 0 1px 1px 0 #999 !important;
    -webkit-box-shadow: inset 0 1px 1px 0 #999 !important;
    box-shadow: inset 0 1px 1px 0 #999 !important
}

.cke_toolbox_collapser.cke_toolbox_collapser_min {
    margin: 0 0 2px 0 !important;
    padding: 0 0 0 0 !important;
    background: white
}

.cke_toolbox_collapser.cke_toolbox_collapser_min .cke_arrow {
    margin-top: 7px !important;
    border-bottom-color: transparent !important;
    border-top-color: var(--color-icon)!important;
}

.cke_arrow {
    border-left: 5px solid transparent !important;
    border-right: 5px solid transparent !important;
    border-bottom: 5px solid var(--color-icon) !important;
    border-top: 5px solid transparent !important;
}

.cke_toolbox_collapser {
    width: 20px !important;
    height: 20px !important
}

.cke_top {
    border-bottom: 1px solid var(--color-border) !important;
    background: white !important;
    background-image: none !important;
    -moz-box-shadow: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
}

.cke_bottom {
    background: #e4e4e4 !important;
    background-image: none !important;
    -moz-box-shadow: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important
}

.cke_chrome {
    border: 1px solid #cecece !important;
    -moz-box-shadow: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important
}
.cke_toolgroup .cke_button.cke_button__imagefromurl,
.cke_toolgroup .cke_button.cke_button__mediaselector {
    border: 1px solid #c2c2c2 !important
}
.cke_button__imagefromurl_label,
.cke_button__mediaselector_label {
    display: inline-block !important
}
.cke_button__imagefromurl_icon:before,
.cke_button__mediaselector_icon:before {
    text-decoration: none;
    color: #454545;
    position: relative;
    top: 1px
}

.popup-dropdown-menu {
    z-index: 500;
    background: white;
    position: absolute;
    -webkit-box-shadow: 0 3px 9px 0px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0 3px 9px 0px rgba(0, 0, 0, 0.5);
    -ms-box-shadow: 0 3px 9px 0px rgba(0, 0, 0, 0.5);
    -o-box-shadow: 0 3px 9px 0px rgba(0, 0, 0, 0.5);
    box-shadow: 0 3px 9px 0px rgba(0, 0, 0, 0.5);
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -ms-border-radius: 2px;
    -o-border-radius: 2px;
    border-radius: 2px
}

.popup-dropdown-menu:before {
    position: absolute;
    z-index: 501;
    display: inline-block;
    top: -6px;
    left: 6px;
    border-right: 6px solid transparent;
    border-bottom: 6px solid #f7f7f7;
    border-left: 6px solid transparent;
    content: ''
}

.popup-dropdown-menu.flipped:before {
    position: absolute;
    z-index: 501;
    display: inline-block;
    top: -6px;
    left: 6px;
    border-right: 6px solid transparent;
    border-bottom: 6px solid #f7f7f7;
    border-left: 6px solid transparent;
    content: '';
    left: auto !important;
    right: 6px
}

.popup-dropdown-menu ul {
    background: #F9F9F9;
    list-style: none;
    padding: 5px 0 5px 0;
    margin: 0;
    width: 200px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -ms-border-radius: 2px;
    -o-border-radius: 2px;
    border-radius: 2px
}

.popup-dropdown-menu li {
    line-height: 26px;
    padding: 0 5px 0px 5px;
    cursor: pointer;
    line-height: 26px;
    padding: 0 5px 0px 5px;
    color: #454545
}

.popup-dropdown-menu li:hover {
    background: #ececec
}

.popup-dropdown-menu li .fa {
    width: 10px;
    margin-right: 10px;
    margin-left: 5px
}

ul.popup-dropdown-menu {
    background: #f7f7f7;
    list-style: none;
    padding: 5px 0 5px 0;
    margin: 0;
    width: 200px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -ms-border-radius: 2px;
    -o-border-radius: 2px;
    border-radius: 2px
}

.x2-icon-button {
    opacity: 0.7
}

.x2-icon-button:hover {
    opacity: 1
}

.x2-enlargeable-image {
    cursor: pointer
}

.x2-enlargeable-image-modal {
    background-color: rgba(0, 0, 0, 0.66);
    text-align: center;
    height: 100%;
    width: 100%;
    position: fixed;
    margin: auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 10000
}

.x2-enlargeable-image-modal img {
    border: 19px solid black;
    border-bottom: 25px solid black;
    border-top: 15px solid black;
    vertical-align: middle;
    margin: auto;
    left: 0;
    top: -40px;
    right: 0;
    bottom: 0;
    position: fixed
}

.x2-enlargeable-image-modal input {
    position: fixed;
    margin: auto;
    right: 0;
    left: 0;
    bottom: 4%;
    background-color: #252525;
    border-radius: 32px;
    height: 28px;
    padding: 5px 2px;
    opacity: 0.5
}

.x2-enlargeable-image-modal input:hover {
    background-color: #2c2c2c
}

div.vcrPager {
    display: flex;
    align-items: center;
    float: right;
    margin-left: 15px;
    line-height: 1.1em;
}

div.vcrPager div.summary {
    display: inline-flex;
    margin-top: 5px
}

div.vcrPager div.summary a {
    display: block;
    font-size: 18px;
    text-decoration: none;
    margin: 0px 5px 0px 0;
    max-width: 120px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    -ms-text-overflow: ellipsis;
}
div.vcrPager div.summary b {
    margin: 0px 5px 0px 5px;
}
div.vcrPager div.summary a:hover {
    text-decoration: underline
}

div.page-title div.vcrPager a.x2-button {
    margin: 5px 0 0 0px;
    padding: 0 12px
}

.vcrPager .hidden a {
    display: none
}

.vcrPager .x2-button.disabled,
.vcrPager .ui-datepicker-buttonpane button.disabled,
.ui-datepicker-buttonpane .vcrPager button.disabled {
    color: #bbbbbb
}

.vcrPager .x2-button.disabled:hover,
.vcrPager .ui-datepicker-buttonpane button.disabled:hover,
.ui-datepicker-buttonpane .vcrPager button.disabled:hover {
    background-color: #F4F4F4;
    background: -webkit-gradient(linear, left top, left bottom, from(#f0f0f0), to(#F5F5F5));
    background: -moz-linear-gradient(top, #f0f0f0, #F5F5F5)
}

.mobile-dropdown-button {
    cursor: pointer
}

.x2-multiselect {
    width: 460px;
    height: 200px
}

.x2-multiselect-ui-element .irremovable-option {
    background: #F4F4F4;
    border: none !important
}

.x2-multiselect-ui-element .irremovable-option>a {
    cursor: default !important;
    outline: 0 !important
}

.x2-multiselect-ui-element .irremovable-option>a>span {
    background: none !important
}

.ui-multiselect-menu div.ui-widget-header.ui-corner-all.ui-multiselect-header.ui-helper-clearfix {
    background: none;
    border: none
}

.ui-multiselect-menu .ui-state-hover {
    background: #e4e4e4;
    border: 1px solid white
}

button.ui-multiselect {
    border: 1px solid white;
    background: none
}

button.ui-multiselect:focus {
    border: 1px solid white
}

.ui-multiselect {
    font-size: 1em;
    max-width: 555px;
    width: auto !important;
    border: none !important
}

.ui-multiselect.ui-helper-clearfix.ui-widget {
    padding: 0 0 0 0
}

.ui-multiselect .ui-widget-header {
    margin: -3px -3px 0 -3px !important;
    font-weight: bold !important;
    background: #444 !important;
    color: #fff !important;
    font-family: Arial, Helvetica, sans-serif !important;
    border: 1px solid #a8a8a8;
    background: #F4F4F4 !important;
    color: black !important;
    -webkit-border-radius: 4px 4px 0 0;
    -moz-border-radius: 4px 4px 0 0;
    -ms-border-radius: 4px 4px 0 0;
    -o-border-radius: 4px 4px 0 0;
    border-radius: 4px 4px 0 0;
    -webkit-appearance: none !important
}

.ui-multiselect .ui-element {
    background: #D9ECED !important;
    border: none !important;
    height: 36px;
    line-height: 2.5;
    color: var(--color-text-dark);
    font-size: 14px;
}

.ui-multiselect.ui-helper-clearfix.ui-widget {
    border: 1px solid #a8a8a8
}

.ui-multiselect .ui-helper-clearfix {
    margin: 0;
    border: none !important;
    border-radius: 0 !important;
    border-left: 1px solid gray !important
}

.ui-multiselect.ui-helper-clearfix {
    min-width: 100%;
}

.ui-multiselect div.selected {
    border: 1px solid var(--color-primary);
    width: 100% !important;
    box-sizing: border-box;
    border-top-left-radius: 0.375rem;
    border-top-right-radius: 0.375rem;
}

.ui-multiselect div.available {
    border: 1px solid var(--color-border);
    width: 100% !important;
    box-sizing: border-box;
}

.ui-multiselect .ui-widget-header {
    border: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
    background: var(--color-primary)!important;
    color: var(--color-white) !important;
    height: 38px;
    border-top-left-radius: 0.375rem !important;
    border-top-right-radius: 0.375rem !important;
    font-size: 14px;
    padding: 0px 12px;
}

.x2-multiselect-dropdown+.ui-multiselect {
    border: 1px solid #ccc;
    text-align: center;
}

.x2-multiselect-dropdown-menu {
    width: auto !important
}

.x2-wide-slider {
    width: 80%;
    max-width: 340px
}

.x2-wide-input,
textarea.x2-wide-input,
div.form textarea.x2-wide-input {
    max-width: 260px;
    width: 90%
}

.x2-extra-wide-input,
textarea.x2-extra-wide-input,
div.form textarea.x2-extra-wide-input {
    max-width: 360px;
    width: 90%
}

.x2-xxwide-input,
textarea.x2-xxwide-input,
div.form textarea.x2-xxwide-input {
    max-width: 600px;
    width: 90%
}

.x2-tag.x2-link.ui-draggable-dragging {
    z-index: 1500
}

.x2-tag-list .tag-container-placeholder {
    color: #757575
}

.x2-file-error {
    display: inline-block;
    color: red;
    margin-left: 2px
}

.x2-custom-select {
    width: 157px;
    height: 16px;
    -webkit-border-radius: 4px 4px 4px 4px;
    -moz-border-radius: 4px 4px 4px 4px;
    -ms-border-radius: 4px 4px 4px 4px;
    -o-border-radius: 4px 4px 4px 4px;
    border-radius: 4px 4px 4px 4px;
    background: #e6e6e6;
    border: 1px solid #d6d6d6;
    cursor: default;
    margin: 3px 4px 5px 0px;
    padding: 2px 15px 2px 4px;
    display: inline-block
}

.x2-custom-select+select {
    margin: 3px 4px 5px 0px;
    padding: 2px 4px
}

.x2-custom-select-menu {
    width: 157px;
    overflow-y: auto;
    max-height: 200px;
    position: absolute;
    background: white;
    display: block;
    z-index: 200;
    border: 1px solid lightgrey;
    clear: both;
    list-style: none;
    -webkit-border-radius: 0px 2px 2px 1px rgba 0, 0, 0, 0.1;
    -moz-border-radius: 0px 2px 2px 1px rgba 0, 0, 0, 0.1;
    -ms-border-radius: 0px 2px 2px 1px rgba 0, 0, 0, 0.1;
    -o-border-radius: 0px 2px 2px 1px rgba 0, 0, 0, 0.1;
    border-radius: 0px 2px 2px 1px rgba 0, 0, 0, 0.1;
    margin-left: 4px;
    margin-bottom: 0;
    margin-right: 0
}

.x2-custom-select-menu>li {
    margin-left: -20px;
    padding: 4px 0 4px 11px;
    cursor: default
}

.x2-custom-select-menu>li:hover {
    background: #f0f0f0
}

.x2-custom-select-triangle {
    position: relative;
    opacity: 0.7;
    top: 4px;
    display: inline-block;
    background: url(../images/icons/Collapse_Widget.png);
    margin-left: -18px !important;
    margin-right: 18px !important;
    background-size: 10px auto;
    background-position: center;
    background-repeat: no-repeat;
    border: 1px solid transparent;
    margin: 3px 4px 5px 0px;
    padding: 2px 4px
}

.x2-custom-select-empty+.x2-custom-select-triangle {
    top: -7px
}

.x2-custom-select:hover+.x2-custom-select-triangle {
    opacity: 0.9
}

.center-widget-minimize-button,
.center-widget-maximize-button,
.center-widget-close-button {
    opacity: 0.7
}

.center-widget-minimize-button:hover,
.center-widget-maximize-button:hover,
.center-widget-close-button:hover {
    opacity: 0.8
}

.uncomplete-button,
.edit-button,
.delete-button,
.update-button>img,
.complete-button>img {
    opacity: 0.75
}

.uncomplete-button:hover,
.edit-button:hover,
.delete-button:hover,
.update-button>img:hover,
.complete-button>img:hover {
    opacity: 0.85
}

#actionTimer {
    text-align: center
}

#actionTimerControl-form .x2-minimal-select {
    width: 120px !important
}

#actionTimerControl-summary {
    display: block;
    border-top: 1px solid #CCCCCC;
    margin-top: 5px
}

#actionTimerControl-total {
    font-family: Consolas, monaco, monospace
}

#actionTimerDisplay {
    font-size: 15px;
    font-family: Consolas, monaco, monospace;
    display: block;
    margin-bottom: 3px;
    border-bottom: 1px solid #CCCCCC
}

#actionTimerLog-form textarea {
    width: 100%;
    max-width: 100%;
    height: 100px
}

#actionTimerLog-form input[type="submit"] {
    display: block;
    width: 100%;
    text-align: center
}

.sp-replacer {
    padding: 0 !important
}

.x2-settings-button {
    cursor: pointer
}

.x2-qtip .qtip-content {
    padding: 10px 10px 10px 10px
}

.x2-qtip .qtip-loading-text {
    padding: 3px 5px
}

.x2-qtip .qtip-button {
    width: 100%;
    box-sizing: border-box;
    border-left: none;
    border-right: none;
    border-bottom: none;
    border-radius: 0;
    cursor: pointer;
    font-size: 10px
}

.x2-qtip,
.x2-qtip .qtip-content {
    border-color: #b2c7d5 !important;
    background-color: #f4f7f9
}

ul.x2-dropdown-list {
    position: absolute;
    z-index: 850;
    background: #fff;
    padding: 0;
    list-style-type: none;
    border: 1px solid #b3b3b3;
    border-top: none;
    clip: rect(0px, 1000px, 1000px, -10px);
    -moz-box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.5);
    box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.5);
    display: block
}

ul.x2-dropdown-list li {
    cursor: default;
    padding: 2px 5px
}

ul.x2-dropdown-list li:last-child {
    padding-bottom: 5px
}

ul.x2-dropdown-list li:hover {
    background: #F4F4F4
}

.x2-dropdown-list .opt-group-header {
    background: #e2e2e2;
    border-bottom: 1px solid #d8d8d8
}

.x2-dropdown-list .opt-group-header:hover {
    background: #e2e2e2;
    border-bottom: 1px solid #d8d8d8
}

.x2-dropdown-list .x2-dropdown-option-indent {
    padding-left: 14px
}

.x2-pill-box {
    min-height: 31px;
    width: 100%;
    border: 1px solid #cbcbcb;
    border-radius: 4px;
    box-shadow: inset 0px 1px 1px 0px #e4e4e4;
    padding: 3px;
    padding-top: 0px;
    box-sizing: border-box;
    position: relative
}

.x2-pill-box:hover {
    background: #f7f7f7
}

.x2-pill-box.error {
    background: #fee
}

.x2-pill-box-options {
    position: absolute;
    z-index: 850;
    background: #fff;
    padding: 0;
    display: block;
    border: 1px solid #b3b3b3;
    clip: rect(0px, 1000px, 1000px, -10px);
    -moz-box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.5);
    box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.5)
}

.x2-pill-box-options>.options-header {
    background: #e2e2e2;
    border-bottom: 1px solid #d8d8d8;
    font-weight: bold;
    color: #484848;
    padding: 2px
}

.x2-pill-box-options>.x2-dropdown-list {
    border-top: 1px solid #b3b3b3;
    max-height: 250px;
    overflow-y: scroll;
    border: none;
    clip: auto;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    position: static;
    margin: 0
}

.x2-pill {
    background: #f9f9f9;
    display: inline-block;
    padding: 3px;
    border: 1px solid #afafaf;
    border-radius: 3px;
    vertical-align: middle;
    box-shadow: 0 1px 0px 0 #cbcbcb;
    margin-right: 14px;
    margin-top: 3px;
    cursor: default
}

.x2-pill:active {
    cursor: move
}

.x2-pill::after {
    content: ',';
    position: absolute;
    color: #bababa;
    font-weight: bold;
    font-size: 19px;
    display: inline-block;
    margin-left: 8px;
    margin-top: -4px
}

.x2-pill:last-child::after,
.x2-pill.ui-sortable-helper::after {
    content: ''
}

.x2-pill-box>div.x2-pill>button.x2-pill-delete-button {
    display: inline-block;
    height: 13px;
    width: 13px;
    border-radius: 11px;
    padding: 0px;
    margin: 0;
    font-size: 10px;
    line-height: 10px;
    color: #6a6a6a;
    margin-right: 2px;
    margin-top: 1px;
    background: #f0f0f0
}

.x2-loading-icon {
    width: 32px;
    margin: auto
}

.x2-icon-gray {
    color: #909090
}

.x2-icon-gray:hover {
    color: #bababa
}

#top-flashes-container-outer {
    position: fixed;
    width: 100%;
    top: 32px;
    left: 0;
    right: 0;
    margin: auto;
    height: 4px;
    text-align: center;
    z-index: 1000
}

#top-flashes-container {
    border-top: none;
    width: auto;
    display: inline-block;
    padding: 3px 10px;
    min-width: 300px;
    padding-bottom: 5px
}

#top-flashes-container.has-header {
    text-align: left
}

#top-flashes-container ul {
    margin: 0;
    text-align: left
}

.load8.x2-loader {
    height: 0
}

.load8.x2-loader .loader {
    border: 2.5em solid rgba(78, 78, 78, 0.2);
    border-left: 2.5em solid rgba(87, 87, 87, 0.81);
    border-radius: 50%;
    width: 10em;
    height: 10em;
    font-size: 3px;
    margin: 0
}

.load8.full-page-loader .loader {
    font-size: 3px;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    z-index: 10
}

.load8.input-loading-icon .loader {
    font-size: 2px;
    margin: 0
}

.min-link {
    color: inherit;
    text-decoration: none;
    cursor: pointer
}

.min-link:hover {
    text-decoration: none !important
}

.pseudo-link {
    text-decoration: none;
    cursor: pointer
}

.pseudo-link:hover {
    text-decoration: none !important
}

.x2-delete-icon {
    color: #e24b4b;
    cursor: pointer
}

.x2-collapsible-outer {
    margin-left: -10px;
    margin-right: -10px;
    border-top: 1px solid #c5c5c5;
    border-bottom: 1px solid #c5c5c5
}

.x2-collapsible-outer h3 {
    display: inline-block;
    margin: 0
}

.x2-collapsible-outer .x2-collapsible {
    padding: 10px;
    padding-top: 0px
}

.x2-collapsible-outer>.x2-collapse-handle {
    padding: 10px
}

.x2-collapsible-outer.collapsed>.x2-collapse-handle:hover {
    background: #F9F9F9;
    cursor: pointer
}

.star-rating-control .star-rating>a {
    color: #ffbe10
}

.star-rating-control .rating-cancel>a {
    color: #e24b4b
}

.star-rating-control .star-rating,
.star-rating-control .rating-cancel {
    text-indent: 0;
    background: none
}

.star-rating-control .star-rating a,
.star-rating-control .rating-cancel a {
    background: none;
    text-decoration: none
}

.star-rating-control .star-rating a:hover,
.star-rating-control .rating-cancel a:hover {
    text-decoration: none
}

#ui-datepicker-div {
    z-index: 99999 !important;
    width: 190px;
    border: 1px solid var(--color-border);
}

.ui-datepicker .ui-datepicker-header.ui-widget-header.ui-helper-clearfix.ui-corner-all {
    background: #D9ECED;
    -webkit-border-radius: 4px 4px 0 0;
    -moz-border-radius: 4px 4px 0 0;
    -ms-border-radius: 4px 4px 0 0;
    -o-border-radius: 4px 4px 0 0;
    border-radius: 4px 4px 0 0;
    margin: -4px -4px 0 -4px !important;
    border: 1px solid #D9ECED;
    border-bottom: none !important;
}

.ui-datepicker .ui-datepicker-prev.ui-state-hover,
.ui-datepicker .ui-datepicker-next.ui-state-hover {
    border: 1px solid white !important
}

.ui-datepicker-calendar {
    background: none !important
}

.ui-datepicker-calendar th,
.ui-datepicker-calendar td a {
    border-radius: 0px;
    background: none;
    border: none;
    padding: 2px;
    text-align: center;
    color: #454545
}

.ui-datepicker-calendar .ui-state-default,
.ui-datepicker-calendar .ui-widget-content .ui-state-default,
.ui-datepicker-calendar .ui-widget-header .ui-state-default {
    background: none
}

.ui-datepicker-calendar .ui-state-default,
.ui-datepicker-calendar .ui-widget-content .ui-state-default,
.ui-datepicker-calendar .ui-widget-header .ui-state-default {
    border: 1px solid transparent
}

.ui-datepicker-calendar td a {
    background: none
}

.ui-datepicker-calendar td a.ui-state-active,
.ui-datepicker-calendar td a:hover {
    background: #FAFAFA;
    border-radius: 0
}

.ui-datepicker-calendar td.ui-datepicker-today a {
    background: #FAFAFA;
    border: 1px solid #737373
}

.ui-datepicker-calendar td.ui-datepicker-today a:hover {
    border: 1px solid #030303
}

span.ui-datepicker-month,
span.ui-datepicker-year {
    color: white
}

.ui-slider-handle {
    border-radius: 50%;
    background: #629ceb
}

.ui-datepicker-next,
.ui-datepicker-prev {
    background: none !important;
    text-align: center;
    text-decoration: none;
    font-family: FontAwesome;
    color: inherit
}
.ui-datepicker-next:before, 
.ui-datepicker-prev:before {
    position: relative;
    top: 5px;
    color: var(--color-icon);
}

.ui-datepicker-next .ui-icon,
.ui-datepicker-prev .ui-icon {
    display: none !important
}

.ui-datepicker-next:before {
    content: "\f138"
}

.ui-datepicker-prev:before {
    content: "\f137"
}

.ui-datepicker-buttonpane button {
    line-height: 1.5em
}

.ui-dialog-titlebar-close:before {
    text-decoration: none
}

.ui-dialog-titlebar-close .ui-icon-closethick {
    display: none !important
}

.x2-dialog-autocomplete-menu {
    z-index: 1100
}

.fixed-dialog-z-index {
    z-index: 1000 !important
}

.quote-icon .fa-pencil {
    position: relative;
    left: 6px;
    top: -2px
}

.ui-menu .ui-menu-item.ui-state-focus {
    background: #F9F9F9 !important
}

ul.ui-autocomplete>li>a {
    text-decoration: none
}

.password-visibility-toggle {
    display: inline-block;
    margin-left: 3px
}

.password-visibility-toggle * {
    cursor: pointer
}

/*================= Form ui-elements ==========*/

#contacts-detail-view .x2-button.highlight,
#contacts-detail-view  .ui-datepicker-buttonpane button.highlight,
#contacts-detail-view  .x2-minimal-button.highlight,
#contacts-detail-view  .ui-dialog .ui-dialog-buttonpane button.highlight {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

#contacts-detail-view .x2-button.highlight:hover,
#contacts-detail-view .ui-datepicker-buttonpane button.highlight:hover,
#contacts-detail-view .x2-minimal-button.highlight:hover,
#contacts-detail-view .ui-dialog .ui-dialog-buttonpane button.highlight:hover {
    background-color: var(--color-primary);
}

#contacts-detail-view .x2-button.highlight:active,
#contacts-detail-view .ui-datepicker-buttonpane button.highlight:active,
#contacts-detail-view .x2-button.highlight.clicked,
#contacts-detail-view .ui-datepicker-buttonpane button.highlight.clicked,
#contacts-detail-view .x2-minimal-button.highlight:active,
#contacts-detail-view .x2-minimal-button.highlight.clicked,
#contacts-detail-view .ui-dialog .ui-dialog-buttonpane button.highlight:active,
#contacts-detail-view .ui-dialog .ui-dialog-buttonpane button.highlight.clicked {
    background-color: var(--color-primary);
    -webkit-box-shadow: none var(--color-primary);
    -moz-box-shadow:none var(--color-primary);
    -ms-box-shadow: none var(--color-primary);
    -o-box-shadow: inset none var(--color-primary);
    box-shadow: none var(--color-primary);
    color: #fff;
}

#calendar-form .row #X2Calendar_name {
    width: 100%;
    height: 38px;
}

#calendar-form .ui-multiselect ul.selected,
#calendar-form ul.available {
    height: 100% !important;
}
#calendar-form .ui-multiselect input.search {
    margin: 7px !important;
    height: 24px;
    width: 20%;
    opacity: 1;
    padding: 4px 8px;
}
#calendar-form input#save-button {
    width: 70px !important;
    padding: 0 !important;
    line-height: 1;
}
form#calendar-form label {
    font-size: 1rem;
    font-weight: 300;
    color: var(--color-text-dark);
    margin: 5px 0 5px;
}
/*====jquery-ui.css ====*/
form#calendar-form .ui-multiselect .ui-widget-header a {
    color: var(--color-white);
}
form#calendar-form .ui-state-default .ui-icon {
    position: relative;
    top: 8px;
    right: 10px;
}
#ui-datepicker-div .ui-datepicker-calendar a.ui-state-default {
    background: var(--color-white);
    border-color: var(--color-border);
    text-align: center;
}