/************************/
/*STANDARD DROPDOWN LIST*/
/************************/
.phoenix-drop-down-list.k-dropdown,
.phoenix-drop-down-list,
.k-dropdown {
    width: 100%;
    border-radius: 2px;
}

.phoenix-drop-down-list.k-dropdown .k-dropdown-wrap,
.phoenix-drop-down-list .k-dropdown-wrap,
.k-dropdown .k-dropdown-wrap {
    height: 4rem;
    background-color: var(--inputfield-background);
    border-color: var(--inputfield-border);
    border-radius: 2px;
}

.phoenix-drop-down-list.k-dropdown .k-state-default,
.k-dropdown .k-state-default {
    padding-left: 10px;
    color: var(--default-font);
    background-color: var(--inputfield-background);
}

.phoenix-drop-down-list.k-dropdown .k-state-default.k-state-hover,
.k-dropdown .k-state-default.k-state-hover {
    color: var(--default-font);
    background-color: var(--inputfield-background);
    box-shadow: var(--small-shadow);
}

.phoenix-drop-down-list.k-dropdown .k-state-default.k-state-focused,
.k-dropdown .k-state-default.k-state-focused {
    color: var(--default-font);
    background-color: var(--inputfield-background);
    box-shadow: var(--small-shadow);
}

.phoenix-drop-down-list.k-dropdown .k-state-default .k-input,
.k-dropdown .k-state-default .k-input {
    color: var(--default-font);
    font-style: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 3.8rem;
    border-radius: 2px;
    text-indent: .5rem;
    line-height: 2;
}

.private {
    color: var(--primary);
}

.public {
    color: var(--accent-1);
}

.k-dropdown .k-dropdown-wrap span.k-select {
    background-color: var(--inputfield-border);
}
/***********************************/
/*Dropdown List in add-item-wrapper*/
/***********************************/
.add-item-wrapper > .k-dropdown {
    flex: 0 1 100%;
    width: calc(100% - 32px);
}

/*****************************************************/
/*Custom Dropdownlist for _GridFilterTemplates.cshtml*/
/*****************************************************/
[id^="PhoenixCustomDropdown_"],
.phoenix-custom-drop-down {
    width: 100%;
    height: 40px;
    background-color: var(--inputfield-background);
    border: 1px solid var(--inputfield-border);
    border-radius: 2px;
    margin-bottom: 10px;
}

[id^="SelectionWrapper_"]:hover,
.phoenix-custom-drop-down .selection-wrapper:hover {
    box-shadow: var(--small-shadow);
}

[id^="#SelectionWrapper_"],
.phoenix-custom-drop-down .selection-wrapper {
    width: 100%;
    display: flex;
}

[id^="SelectedOption_"],
.phoenix-custom-drop-down .selected-option {
    width: calc(100% - 38px);
    padding: 5px;
    display: flex;
    align-items: center;
}

[id^="DropdownButton_"],
.phoenix-custom-drop-down .dropdown-button {
    width: 38px;
    height: 38px;
    background-color: var(--inputfield-border);
}

[id^="SelectionWrapper_"]:hover,
[id^="SelectedOption_"]:hover,
[id^="DropdownButton_"],
[id^="OptionWrapper_"],
.phoenix-custom-drop-down .selection-wrapper,
.phoenix-custom-drop-down .selected-option,
.phoenix-custom-drop-down .dropdown-button,
.phoenix-custom-drop-down .option-wrapper {
    cursor: pointer;
}

[id^="OptionWrapper_"],
.phoenix-custom-drop-down .option-wrapper {
    margin-top: 2px;
    display: none;
    z-index: 1000;
    background-color: var(--inputfield-background);
    border: 1px solid var(--inputfield-border);
    box-shadow: var(--small-shadow);
    position: relative;
}

[id^="OptionWrapper_"] > div,
.phoenix-custom-drop-down .option-wrapper > div {
    height: 40px;
    padding: 5px;
    display: flex;
    align-items: center;
}

[id^="OptionWrapper_"] > div:nth-child(odd),
.phoenix-custom-drop-down .option-wrapper > div:nth-child(odd) {
    background-color: var(--item-alternate-background);
}

[id^="OptionWrapper_"] > div:hover,
.phoenix-custom-drop-down .option-wrapper > div:hover {
    background-color: var(--item-hover-background);
}

/****************************************/
/*DropDownList for ClozeGapQuestionTexts*/
/****************************************/
div[id^="ddl_ClozeGapDropdownListAlternativeLook_"].k-popup.k-list-container,
div[id^="ddl_CandidatesAnswer_"].k-popup.k-list-container {
    padding: 0;
}

.phoenix-drop-down-list-alternative-1.k-dropdown,
.phoenix-drop-down-list-alternative-1.k-dropdown > span.k-dropdown-wrap,
.phoenix-drop-down-list-alternative-1.k-dropdown > span.k-dropdown-wrap > span.k-input {
    max-width: 500px;
    height: 23px;
    border-color: var(--inputfield-border);
    background-color: transparent;
    position: relative;
    overflow: unset;
    text-overflow: unset;
}

.phoenix-drop-down-list-alternative-1.k-dropdown > span.k-dropdown-wrap > span.k-input > span {
    position: relative;
    width: 100%;
    overflow: hidden;
    display: inline-block;
    text-overflow: ellipsis;
}

.phoenix-drop-down-list-alternative-1.k-dropdown > span.k-dropdown-wrap > span.k-input {
    line-height: 1.4rem;
    text-indent: 5px;
}

.phoenix-drop-down-list-alternative-1.k-dropdown > span.k-dropdown-wrap > span.k-select span {
    vertical-align: super;
}

.phoenix-drop-down-list-alternative-1.k-dropdown > span.k-dropdown-wrap > span.k-input .phoenix-placeholder {
    line-height: 1.4rem;
    text-indent: 5px;
    font-size: initial;
}

.phoenix-drop-down-list-alternative-1.k-dropdown > span.k-dropdown-wrap {
    padding-right: 18px;
    background-color: var(--white);
}

.phoenix-drop-down-list-alternative-1.k-dropdown > span.k-state-default.k-state-focused,
.phoenix-drop-down-list-alternative-1.k-dropdown > span.k-dropdown-wrap > span.k-input:hover {
    box-shadow: none;
}

.phoenix-drop-down-list-alternative-1.k-dropdown > span.k-dropdown-wrap > span.k-select {
    width: 18px;
    height: 21px;
    background: var(--inputfield-background);
    border-radius: 2px;
    justify-content: right;
}

.phoenix-drop-down-list-alternative-1.k-dropdown > span.k-dropdown-wrap:hover {
    box-shadow: var(--small-shadow);
}

.phoenix-drop-down-list-alternative-1.k-dropdown {
    height: 23px;
    border-color: transparent;
    background-color: transparent;
}

.phoenix-drop-down-list-alternative-1.k-dropdown-width {
    min-width: 140px;
    width: auto;
}

.k-animation-container .k-list-container.phoenix-drop-down-list-alternative-1 .phoenix-placeholder {
    font-size: initial;
}

.k-animation-container .k-list-container.phoenix-drop-down-list-alternative-1 .k-list-scroller ul[id^="ddl_ClozeGapDropdownListAlternativeLook_"].k-list > li {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: normal;
    padding: 2px 5px;
    background-color: var(--white);
    min-height: 23px;
}

.k-animation-container .k-list-container.phoenix-drop-down-list-alternative-1 .k-list-scroller ul[id^="ddl_ClozeGapDropdownListAlternativeLook_"].k-list > li > span {
    position: relative; 
    width: 100%; 
    overflow: hidden;
    display: inline-block; 
    text-overflow: ellipsis;
    max-width: 500px !important;
}

.k-animation-container .k-list-container.phoenix-drop-down-list-alternative-1 .k-list-scroller ul[id^="ddl_ClozeGapDropdownListAlternativeLook_"].k-list > li span[value$="_not-equal"] {
    color: red;
}

.k-animation-container .k-list-container.phoenix-drop-down-list-alternative-1 .k-list-scroller ul[id^="ddl_ClozeGapDropdownListAlternativeLook_"].k-list > li.k-state-selected.k-state-focused,
.k-animation-container .k-list-container.phoenix-drop-down-list-alternative-1 .k-list-scroller ul[id^="ddl_ClozeGapDropdownListAlternativeLook_"].k-list > li.k-state-selected {
    background-color: var(--white);
    color: var(--default-font);
}

.k-animation-container .k-list-container.phoenix-drop-down-list-alternative-1 .k-list-scroller ul[id^="ddl_ClozeGapDropdownListAlternativeLook_"].k-list > li.k-state-hover,
.k-animation-container .k-list-container.phoenix-drop-down-list-alternative-1 .k-list-scroller ul[id^="ddl_ClozeGapDropdownListAlternativeLook_"].k-list > li.k-state-hover.k-state-focused.k-state-selected,
.k-animation-container .k-list-container.phoenix-drop-down-list-alternative-1 .k-list-scroller ul[id^="ddl_ClozeGapDropdownListAlternativeLook_"].k-list > li.k-state-hover.k-state-focused {
    background-color: var(--item-hover-background);
    border-color: transparent;
}