/* Custom jQuery UI Theme - Matching CCB-BL App Colors */
/* Primary Color: #951a51, Accent: #FFEAF5, Highlight: #E9BDC6 */

/* Datepicker */
.ui-datepicker {
    background-color: white;
    border: 1px solid #951a51;
    font-family: Verdana, Arial, sans-serif;
}

.ui-datepicker-header {
    background-color: #951a51;
    color: white;
    border: none;
}

.ui-datepicker-title {
    color: white;
}

.ui-datepicker-prev,
.ui-datepicker-next {
    background-color: #951a51 !important;
    border: none !important;
    cursor: pointer !important;
    opacity: 1 !important;
    display: block !important;
    width: 1.8em !important;
    height: 1.8em !important;
}

.ui-datepicker-prev:hover,
.ui-datepicker-next:hover {
    background-color: #a81a51 !important;
    opacity: 1 !important;
}

.ui-datepicker-prev span,
.ui-datepicker-next span {
    display: block !important;
    cursor: pointer !important;
    width: 100% !important;
    height: 100% !important;
}

/* Hide the text content - it should only appear in tooltips, not as visible text */
.ui-datepicker-prev .ui-icon,
.ui-datepicker-next .ui-icon {
    text-indent: -99999px !important;
    overflow: hidden !important;
    background-image: none !important;
    background-repeat: no-repeat !important;
    display: block !important;
    opacity: 1 !important;
    width: 16px !important;
    height: 16px !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    margin-left: -8px !important;
    margin-top: -8px !important;
    font-size: 0 !important;
    line-height: 0 !important;
}

/* Create white triangle arrows using CSS borders for circle-triangle icons */
.ui-datepicker-prev .ui-icon-circle-triangle-w::after,
.ui-datepicker-next .ui-icon-circle-triangle-e::after {
    content: '' !important;
    display: block !important;
    width: 0 !important;
    height: 0 !important;
    border-style: solid !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    margin-left: -3px !important;
    margin-top: -4px !important;
    text-indent: 0 !important;
}

.ui-datepicker-prev .ui-icon-circle-triangle-w::after {
    border-width: 5px 7px 5px 0 !important;
    border-color: transparent white transparent transparent !important;
}

.ui-datepicker-next .ui-icon-circle-triangle-e::after {
    border-width: 5px 0 5px 7px !important;
    border-color: transparent transparent transparent white !important;
}

.ui-datepicker-calendar th {
    background-color: #F8F8F8;
    color: #6F6F6F;
    border-color: #E0E0E0;
}

.ui-datepicker-calendar td {
    border-color: #E0E0E0;
}

.ui-datepicker-calendar td a {
    color: #6F6F6F;
}

.ui-datepicker-calendar td a:hover {
    background-color: #FFEAF5;
    color: #951a51;
}

.ui-datepicker-calendar td.ui-datepicker-today a {
    background-color: #E9BDC6;
    color: #951a51;
    font-weight: bold;
}

.ui-datepicker-calendar td.ui-state-active,
.ui-datepicker-calendar td.ui-state-active:hover {
    background-color: #951a51;
    color: white;
}

.ui-datepicker-buttonpane button {
    background-color: #FFEAF5;
    border: 1px solid #951a51;
    color: #951a51;
}

.ui-datepicker-buttonpane button:hover {
    background-color: #E9BDC6;
}

/* Dialog */
.ui-dialog {
    background-color: white;
    border: 1px solid #951a51;
}

.ui-dialog-titlebar {
    background-color: #951a51;
    color: white;
    border: none;
    font-weight: bold;
}

.ui-dialog-titlebar-close {
    background-color: #951a51;
    border: none;
}

.ui-dialog-titlebar-close:hover {
    background-color: #a81a51;
}

.ui-dialog-titlebar-close .ui-icon {
    background-image: url("images/ui-icons_ffffff_256x240.png") !important;
}

.ui-dialog-buttonpane {
    background-color: #F8F8F8;
    border-top: 1px solid #E0E0E0;
}

.ui-dialog-buttonpane .ui-button {
    background-color: #FFEAF5;
    border: 1px solid #951a51;
    color: #951a51;
    font-weight: normal;
}

.ui-dialog-buttonpane .ui-button:hover,
.ui-dialog-buttonpane .ui-button:focus {
    background-color: #E9BDC6;
    border-color: #a81a51;
}

.ui-dialog-buttonpane .ui-button:active {
    background-color: #951a51;
    color: white;
}

/* Button (if used) */
.ui-button {
    background-color: #FFEAF5;
    border: 1px solid #951a51;
    color: #951a51;
    font-weight: normal;
}

.ui-button:hover,
.ui-button:focus {
    background-color: #E9BDC6;
    border-color: #a81a51;
}

.ui-button:active,
.ui-button.ui-state-active {
    background-color: #951a51;
    color: white;
}

.ui-button:disabled,
.ui-button.ui-state-disabled {
    background-color: #F8F8F8;
    border-color: #D0D0D0;
    color: #999;
}

/* Tabs (if used) */
.ui-tabs {
    background-color: white;
    border: 1px solid #951a51;
}

.ui-tabs-nav {
    background-color: #F8F8F8;
    border-bottom: 1px solid #951a51;
}

.ui-tabs-nav li {
    border: 1px solid transparent;
    border-bottom: none;
}

.ui-tabs-nav li a {
    color: #6F6F6F;
}

.ui-tabs-nav li.ui-state-active {
    background-color: white;
    border-color: #951a51;
    border-bottom-color: white;
}

.ui-tabs-nav li.ui-state-active a {
    color: #951a51;
    font-weight: bold;
}

.ui-tabs-nav li:hover a {
    color: #951a51;
    background-color: #FFEAF5;
}

.ui-tabs-panel {
    background-color: white;
}

/* Autocomplete (if used) */
.ui-autocomplete {
    background-color: white;
    border: 1px solid #951a51;
}

.ui-autocomplete .ui-menu-item-wrapper {
    color: #6F6F6F;
}

.ui-autocomplete .ui-menu-item-wrapper:hover,
.ui-autocomplete .ui-menu-item-wrapper.ui-state-active {
    background-color: #FFEAF5;
    color: #951a51;
    border: 1px solid #E9BDC6;
}

/* Accordion (if used) */
.ui-accordion-header {
    background-color: #F8F8F8;
    border: 1px solid #E0E0E0;
    color: #6F6F6F;
}

.ui-accordion-header:hover {
    background-color: #FFEAF5;
    color: #951a51;
}

.ui-accordion-header.ui-state-active {
    background-color: #951a51;
    color: white;
    border-color: #951a51;
}

.ui-accordion-content {
    background-color: white;
    border: 1px solid #E0E0E0;
}

/* Tooltip */
.ui-tooltip {
    background-color: #951a51;
    color: white;
    border: none;
}

/* Progressbar */
.ui-progressbar {
    background-color: #F8F8F8;
    border: 1px solid #951a51;
}

.ui-progressbar-value {
    background-color: #951a51;
}

/* Slider */
.ui-slider {
    background-color: #F8F8F8;
    border: 1px solid #951a51;
}

.ui-slider-handle {
    background-color: #951a51;
    border: 1px solid #8f1745;
}

.ui-slider-handle:hover {
    background-color: #a81a51;
}

.ui-slider-range {
    background-color: #FFEAF5;
}

/* General UI States */
.ui-state-default {
    background-color: #FFEAF5;
    border-color: #951a51;
    color: #951a51;
}

.ui-state-hover {
    background-color: #E9BDC6;
    border-color: #a81a51;
    color: #951a51;
}

.ui-state-active,
.ui-state-focus {
    background-color: #951a51;
    border-color: #951a51;
    color: white;
}

.ui-state-highlight {
    background-color: #E9BDC6;
    border-color: #951a51;
    color: #951a51;
}

.ui-state-error {
    background-color: #f2dede;
    border-color: #a94442;
    color: #a94442;
}