$modalBorder: 1px solid $darkerBorderColor !default;
$modalBackground: $darkerBackgroundColor !default;

$tabContentBackgroundColor: $mediumBackgroundColor !default;
$tabBackgroundColor: lighten($lightBackgroundColor, 5) !default;
$tabTextColor: $mediumTextColor !default;
$tabActiveBackgroundColor: $tabContentBackgroundColor !default;
$tabActiveTextColor: $lightTextColor !default;
$tabDisabledBackgroundColor: $tabBackgroundColor !default;
$tabDisabledTextColor: $mediumTextActiveColor !default;
$mediumBackgroundColor2: $mediumBackgroundColor !default;
$basketBg: $darkBackgroundColor !default;

.ui-dialog .ui-dialog-content.loading,
.loading {
    background-image: url('#{$iconsPath}#{$contentLoaderImg}');
    background-position: center center;
    background-repeat: no-repeat;
}

.ui-tabs {
    background-color: transparent;
    padding: 0;
    border-style: none;
}

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

.ui-widget-header {
    background: none;
    border: transparent 0px none;
    .push_dialog_container &, .feedback_dialog_container & {
        background: #000000;
    }

}

.ui-tabs {
    .ui-tabs-nav {
        li {
            background-color: $tabBackgroundColor;
            height: 30px;
            border: none;
            overflow: hidden;
            a {
                padding: 5px 8px;
                //font-size: 0.8em;
                font-size: $xmediumFontSize;
                font-weight: normal;
                color: $mediumTextColor; // more contrasted  color
            }
            &.ui-tabs-active a,
            &.ui-tabs-active {
                font-size: $mediumFontSize;
                color: $tabActiveTextColor;
                background-color: $tabActiveBackgroundColor; //$tabsNavBgActive;
                border: none;
            }

            &.ui-state-disabled a,
            &.ui-state-processing a {
                cursor: pointer;
                color: $mediumTextActiveColor;
            }
        }
    }
    .ui-tabs-panel {
        overflow-x: hidden;
        overflow-y: auto;
        display: block;
        border-width: 0;
        padding: 0px;
        background-color: $tabContentBackgroundColor;
        &.tabBox {
            height: 405px;
            overflow: auto;
            position: relative;
            padding: 10px;
        }
    }
    .ui-tabs-hide {
        display: none !important;
    }
}

.ui-tabs.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active a {
    cursor: pointer;
    color: $tabTextColor; //$workzoneColor2;
}

.ui-state-default,
.ui-widget-content .ui-state-default {
    background: none;
}

.ui-tabs li.ui-state-active a,
.ui-state-active a:link,
.ui-state-active a {
    color: $tabActiveTextColor;
    font-weight: bold;
    //font-size: 0.8em;
}

.ui-state-active,
.ui-widget-content .ui-state-active {
    background: none;
}

.ui-widget-content {
    background-image: none;
    background-color: transparent;
    color: $widgetContentColor;
}

.ui-dialog.ui-widget-content {
    background-color: $darkerBackgroundColor;
}

.ui-accordion .ui-accordion-content {
    padding: 0;
    // min-height: 120px;
    border: none !important;
    border-radius: 0;
}

.ui-accordion-icons .ui-accordion-header,
.ui-accordion-icons .ui-accordion-header a {
    overflow: hidden;
}

.ui-accordion-icons .ui-accordion-header a {
    padding: 2px 25px;
    white-space: nowrap;
}

.ui-state-active .ui-icon {
    background-image: url('#{$skinsImagesPath}#{$activeStateIcon}');
}

.ui-accordion .ui-accordion-content.loading {
    background-image: url('#{$iconsPath}#{$accordionLoaderImg}');
    background-position: center center;
    background-repeat: no-repeat;
}

.ui-accordion .ui-accordion-header,
.ui-accordion .ui-accordion-content {
    margin: 3px 0;
}

.ui-accordion .ui-accordion-header {
    border: none;
    background-repeat: repeat-x;
    margin-bottom: 0;
    height: 44px;
    line-height: 44px;
    /*
    background-color: $mediumBackgroundColor2;
    border-bottom: 1px solid $mediumBorderColor; //$accordionBorderColor;
    */
    border-radius: 0;
    &:hover {
        background-color: $accordionBgHeaderHover;
    }
    &.hidden {
        border: none;
        display:none;
    }
}

.ui-accordion .ui-accordion-header.header {
    padding-bottom: 0;
    padding-right: 0;
    padding-top: 0;
    margin-top: 0;
}

.ui-accordion .ui-accordion-header.header:hover {
    background-color: $accordionBgHeaderHover;
}

.ui-accordion .ui-accordion-content {
    background-color: $basketBg;
    border-top: none;
    margin-top: -1px;
    margin-bottom: 0;
}

.ui-accordion .ui-accordion-content.grouping {
    border: 1px solid #2f4a6f;
    border-top: none;
}

// override jqurey ui theme value:
.ui-corner-all,
.ui-corner-br {
    border-radius: $defaultBorderRadius;
}

.ui-corner-top {
    border-top-left-radius: $defaultBorderRadius;
    border-top-right-radius: $defaultBorderRadius;
}

.ui-corner-bottom {
    border-bottom-right-radius: $defaultBorderRadius;
    border-bottom-left-radius: $defaultBorderRadius;
}

.ui-corner-right {
    border-top-right-radius: $defaultBorderRadius;
    border-bottom-right-radius: $defaultBorderRadius;
}

.ui-corner-left {
    border-top-left-radius: $defaultBorderRadius;
    border-bottom-left-radius: $defaultBorderRadius;
}

.ui-dialog.ui-widget-content {
    border: $modalBorder;
    background: $modalBackground;
}

.ui-dialog.ui-widget-content, .ui-widget-overlay {
    z-index: 1999;
}

.ui-dialog.ui-widget-content.dialog-notification-box {
    // just less than the PREVIEWBOX and the EDITWINDOW z-index
    z-index: 1199  !important;
}

.ui-dialog-titlebar {
    min-height: 20px;
}

.ui-dialog-content.dialog-Small select,
.ui-dialog-content.dialog-Small input[type="text"],
.ui-dialog-content.dialog-Small textarea {
    width: 100%;
}

.ui-dialog-content.dialog-Small textarea {
    height: 60px;
}

.ui-dialog-content label {
    line-height: 18px;
}

.ui-dialog-content p {
    line-height: 18px;
}

.ui-autocomplete.ui-state-hover,
.ui-autocomplete.ui-widget-content .ui-state-hover,
.ui-autocomplete.ui-widget-header .ui-state-hover,
.ui-autocomplete.ui-state-focus,
.ui-autocomplete.ui-widget-content .ui-state-focus,
.ui-autocomplete.ui-widget-header .ui-state-focus {
    background-image: none;
    background-color: #515151;
    border: none;
    margin: 0;
    border-radius: 0;
}

.ui-autocomplete.ui-menu .ui-menu-item a.ui-state-hover,
.ui-autocomplete.ui-menu .ui-menu-item a.ui-state-active {
    margin: 0;
}

.ui-autocomplete li.list-item {
    width: 280px;
    min-height: 45px;
    display: block;
}

.ui-autocomplete li.list-item .icon {
    width: 42px;
}

.ui-autocomplete li.list-item .icon img {
    max-width: 32px;
    max-height: 32px;
    text-align: center;
    vertical-align: middle;
    margin: 5px;
}

.ui-autocomplete {
    min-height: 42px;
    max-height: 200px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 1px 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    padding-right: 20px;
}
