﻿/*
 * This file contains additional jQuery UI styles which could not be 
 * generated using the ThemeRoller
 */

.ui-front {
    z-index: 10000;
}

.ui-button {
    outline: none;
}

    .ui-button {
        background: #8c8c8f;
        color: #ffffff;
        border: 1px solid #8c8c8f;
        font-size: 11px;
        padding: .5em 1em;
    }

    .ui-dialog .ui-dialog-buttonpane button {
        font-size: 11px;
    }

.ui-dialog-buttonset > .ui-button:hover {
    border: 1px solid #ed1941;
    background: #ed1941;
}

.ui-widget-header.ui-dialog-titlebar .ui-icon {
    background-image: url(images/ui-icons_ffffff_256x240.png);
}

.ui-dialog, .ui-dialog .ui-widget-content {
    background: #FFF;
}

    .ui-dialog .ui-widget-content, .ui-dialog .ui-widget-header {
        border: 0;
    }

.ui-widget-header .ui-icon {
    background-image: url(images/ui-icons_ed1941_256x240.png);
}

#ui-datepicker-div {
    border: solid 1px #45484d;
}

.ui-datepicker-year {
    margin-left: 3px !important;
}

.ui-datepicker-trigger {
    vertical-align: bottom;
    background: none !important;
    border: none !important;
    cursor: pointer;
}

.ui-widget-content {
    border: 0;
}

/*For boderless dialogs*/
.ui-dialog .ui-widget-header {
    background: none;
    color: #45484d;
    font-size: 20px;
    padding-left: 15px;
    padding-bottom: 0;
}

.ui-dialog {
    border: none;
    padding: 0;
}

.ui-widget-overlay {
    background: grey;
}

/* For custom close icon in dialogs*/
.ui-dialog .ui-dialog-titlebar-close {
    border: 1px solid #ffffff;
    background-color: #ffffff;
}

    .ui-dialog .ui-dialog-titlebar-close > .ui-icon {
        background: #ffffff;
        background-image: url('images/close3.png');
        border: 1px solid #ffffff;
    }

.ui-autocomplete {
    border: 1px solid #cccccc;
}

    .ui-autocomplete .ui-autocomplete-category {
        font-weight: bold;
    }

    .ui-autocomplete.sbc-combobox-category {
        max-height: 18em;
        overflow-x: hidden;
        overflow-y: auto;
    }

.ui-autocomplete-input:-ms-input-placeholder {
    color: rgba(255,255,255,0.5);
    opacity: 0.5;
}

.ui-datepicker {
    min-width: 17em;
    width: auto;
}

/* Thresholdslider styles*/
.ui-threshold-slider {
    padding: 35px 0 0 0;
}

    .ui-threshold-slider .ui-slider-tooltip {
        position: absolute;
        background: #8c8c8f;
        color: #FFF;
        text-align: center;
        padding: 5px 10px;
        -webkit-transform: translate(-50%, 0);
        -moz-transform: translate(-50%, 0);
        -ms-transform: translate(-50%, 0);
        -o-transform: translate(-50%, 0);
        transform: translate(-50%, 0);
        top: -30px;
        left: 50%;
        font-size: 12px;
        outline: none;
    }

        .ui-threshold-slider .ui-slider-tooltip:after {
            content: ' ';
            display: block;
            width: 0;
            height: 0;
            left: 50%;
            position: absolute;
            bottom: -6px;
            border-style: solid;
            border-width: 7px 7.5px 0 7.5px;
            border-color: #8c8c8f transparent transparent transparent;

            -webkit-transform: translate(-50%, 0);
            -moz-transform: translate(-50%, 0);
            -ms-transform: translate(-50%, 0);
            -o-transform: translate(-50%, 0);
            transform: translate(-50%, 0);

            outline: none;
        }


.ui-threshold-slider .ui-slider {
        background: #FF5052;
        -ms-border-radius: 0;
        border-radius: 0;
        border: 0;
    }

        .ui-threshold-slider .ui-slider .ui-slider-handle {
            transform: translate(-50%, -50%);
            margin-left: 0;
            width: 10px;
            height: 23px;
            font-size: 0;
            outline: none;
            top: 50%;
            border: none;
            background: #8c8c8f !important;
            -ms-border-radius: 0;
            border-radius: 0;
            cursor: ew-resize;
            overflow: visible;
        }


    .ui-threshold-slider .ui-slider-range {
        background: #ffcb46;
        border-radius: 0;
    }

    .ui-threshold-slider .ui-slider-range-right {
        float: right;
        height: 100%;
        background: #99cc68;
        border-radius: 0;
    }

    .ui-threshold-slider .ui-slider-labels {
        position: relative;
        margin-top: 10px;
        height: 1.5em;
    }

        .ui-threshold-slider .ui-slider-labels > div {
            display: inline-block;
            position: absolute;
            font-weight: bold;
            overflow: hidden;
            -moz-text-overflow: ellipsis;
            text-overflow: ellipsis;
        }

            .ui-threshold-slider .ui-slider-labels > div.ui-slider-label-center {
                text-align: center;
                color: #ffcb46;
            }

            .ui-threshold-slider .ui-slider-labels > div.ui-slider-label-left {
                text-align: left;
                color: #FF5052;
            }

            .ui-threshold-slider .ui-slider-labels > div.ui-slider-label-right {
                text-align: right;
                right: 0;
                color: #99cc68;
            }

    .ui-threshold-slider .ui-slider-handle.ui-state-active {
        border: 0 !important;
    }

    .ui-threshold-slider.ui-state-disabled,
    .ui-threshold-slider.ui-state-disabled .ui-slider.ui-state-disabled {
        opacity: 1;
        filter: Alpha(Opacity=100);
    }

    
    .ui-threshold-slider.ui-state-disabled .ui-slider .ui-slider-handle {
        cursor: default;
    }

 /*drop down styles*/
.ui-menu .ui-menu-item:hover, .ui-menu .ui-menu-item:hover a, .ui-menu .ui-menu-item:hover > div {
    background: #f6f6f6 url(images/ui-bg_flat_100_f6f6f6_40x100.png) 50% 50% repeat-x;
    border: none;
}

.ui-menu .ui-menu-item:hover {
    border: 1px solid #cdd5da;
    font-weight: bold;
    color: #80899c;
}

.lookupdialog.ui-dialog .ui-dialog-titlebar-close {
    font-size: 0;
}