﻿
/* Custom styling of the chosen dropdown box, and making other controls follow the same style */

/*Specific styling of the main project dropdown*/
#LogoHeaderContent_ProjectDropDown_chosen.chosen-container .chosen-results li.group-result:first-child {
    color: #3e429a;
}

.recent-project li:first-child + li.group-option:not(.highlighted),
.recent-project li:first-child + li.group-option + li.group-option:not(.highlighted),
.recent-project li:first-child + li.group-option + li.group-option + li.group-option:not(.highlighted),
.recent-project li:first-child + li.group-option + li.group-option + li.group-option + li.group-option:not(.highlighted),
.recent-project li:first-child + li.group-option + li.group-option + li.group-option + li.group-option + li.group-option:not(.highlighted) {
    color: #3e429a;
}

#LogoHeaderContent_ProjectDropDown_chosen.chosen-container .chosen-results li.highlighted {
    color: #fff !important;
}
/*-------------------------------------------*/

div.chosen-input-container input[type=text]:not(.ui-spinner-input) {
    border: 1px solid #aaa;
    border-radius: 2px;
    height: 21px;
    padding: 0 0 0 8px;
    background-color: #fff;
    color: #444;
    background-clip: padding-box;
    line-height: 21px;
}

div.chosen-input-container input.ui-spinner-input {
    border: 1px #aaa solid !important;
}

div.chosen-drop div.chosen-search input[type=text] {
    border-radius: 2px;
}

div.chosen-input-container span.ui-spinner {
    /*bottom: 1px;*/
}

div.chosen-input-container input[type=text].ui-spinner-input {
    height: 19px;
    /*line-height: 24px;*/
    /*padding: 0 0 0 8px;*/
    border-radius: 2px;
    color: #444;
}

div.chosen-input-container textarea {
    border: 1px solid #aaa;
    border-radius: 2px;
    padding: 0 0 0 8px;
    color: #444;
    background-clip: padding-box;
    overflow-y: auto;
}
    div.chosen-input-container textarea:not(:disabled) {
        background-color: #fff;
    }

div.chosen-input-container select[size="5"], div.chosen-input-container select.select-list {
    border: 1px solid #aaa;
    border-radius: 2px;
    padding: 0 0 0 8px;
    background-color: #fff;
    color: #444;
    background-clip: padding-box;
    overflow-y: auto;
}
div.chosen-input-container input[type=text]:disabled {
    background-color: transparent !important;
}
div.chosen-input-container input[type=text]:disabled, div.chosen-input-container textarea:disabled {
    /*background-color: transparent !important; //tb//commented out. Response box in request details page not greying out while this is active*/
    border-color: #ccc !important;
    color: #999 !important;
}

div.chosen-input-container .fieldValueRow .ui-corner-all {
    border-bottom-right-radius: 2px;
        border-bottom-left-radius: 2px;
        border-top-right-radius: 2px;
        border-top-left-radius: 2px;
        border-color: #aaaaaa;
}

div.chosen-input-container .fieldValueRow input[type=text], div.chosen-input-container .fieldValueRow textarea,
div.chosen-input-container .keyValueRow input[type=text], div.chosen-input-container .keyValueRow textarea {
    padding: 0px 0px 0px 8px !important;
    width: calc(100% - 10px) !important;
}

div.chosen-container-multi ul.chosen-choices {
    border-radius: 2px;
}

/* used to position the chosen dropdown above the box instead of going off the bottom of the visible screen */
.chosen-with-drop.chosen-container-active .chosen-single.flipped {
    border-bottom-left-radius: 2px;
    border-bottom-right-radius: 2px;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
}
.chosen-container-single .chosen-drop.flipped {
    border-radius: 2px 2px 0 0;
    border-top: 1px solid #aaa;
}

/*required to prevent massive white-space in IE when triggering chosen:updated */
.chosen-container .chosen-drop {
    overflow-y: auto;
    max-height: 400px;
}

.chosen-container-single .chosen-single abbr.search-choice-close:hover{
    background-position: center !important;
    background-image: url(../Icons/EntypoPlus/circle-with-cross-grey.svg) !important;
}

.chosen-container-single .chosen-single abbr.search-choice-close {
    top: 4px;
    width: 16px;
    height: 16px;
    /*https://vectr.com*/
    background-image: url(../Icons/EntypoPlus/circle-with-cross-grey2.svg) !important;
    background-position: center;
    background-size: contain;
}

div.chosen-container-single > a.chosen-single {
    border-radius: 2px;
}