﻿/***********************/
/* STANDARD MULTISELECT*/
/***********************/
.phoenix-multi-select.k-multiselect,
.phoenix-multi-select,
.k-multiselect {
    width: 100%;
    border-radius: 2px;
}

    .phoenix-multi-select.k-multiselect .k-multiselect-wrap,
    .phoenix-multi-select .k-multiselect-wrap,
    .k-multiselect .k-multiselect-wrap {
        background-color: var(--inputfield-background);
        border-color: var(--inputfield-border);
        border-radius: 2px;
        min-height: 4rem;
        box-shadow: none;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }

        .phoenix-multi-select.k-multiselect .k-multiselect-wrap .k-input,
        .phoenix-multi-select .k-multiselect-wrap .k-input,
        .k-multiselect .k-multiselect-wrap .k-input {
            height: 3.8rem;
            display: flex;
            width: auto;
            flex-grow: 1;
            flex-shrink: 1;
            min-width: 50px;
        }

.phoenix-multi-select.k-multiselect.k-state-hover,
.phoenix-multi-select.k-state-hover,
.k-multiselect.k-state-hover {
    box-shadow: var(--small-shadow);
}

.phoenix-multi-select.k-multiselect.k-state-focused,
.phoenix-multi-select.k-state-focused,
.k-multiselect.k-state-focused {
    box-shadow: var(--small-shadow);
}

.phoenix-multi-select li,
.k-multi-select li {
    max-width: 90%;
}

.phoenix-multi-select li span,
.k-multi-select li span {
    overflow: hidden;
    text-overflow: ellipsis;
}
/***************/
/*Invalid Input*/
/***************/
.is-invalid {
    border-color: var(--alert-border);
}

.invalid-feedback {
    color: var(--alert-font);
}
/*************/
/*Placeholder*/
/*************/
.k-multiselect-wrap > .k-input {
    color: var(--placeholder-font);
    opacity: 1;
    font-weight: 300;
    font-style: italic;
    font-size: 1.8rem;
    line-height: 2.2rem;
    text-indent: 1rem;
}

.k-multiselect-wrap > .k-input:focus {
    color: var(--value-mutable-font);
    font-style: normal;
}
/******************/
/*Selected Options*/
/******************/
[id^=PartialExamExamAssignedRooms_] ul,
#GeneralInfoAssignedTags ul,
#FreetextAssignedAnswerTags ul {
    padding: 0;
}

[id^=PartialExamExamAssignedRooms_] li.k-button,
#GeneralInfoAssignedTags li.k-button,
#FreetextAssignedAnswerTags li.k-button,
.phoenix-multi-select.k-multiselect .k-multiselect-wrap li.k-button,
.phoenix-multi-select .k-multiselect-wrap li.k-button,
.k-multiselect .k-multiselect-wrap li.k-button {
    background-color: var(--multiselect-option-background);
    border-color: var(--multiselect-option-background);
    color: var(--multiselect-option-font);
    text-transform: none;
    padding: 0 2px 0 8px;
}

[id^=PartialExamExamAssignedRooms_] li.k-button:hover,
#GeneralInfoAssignedTags li.k-button:hover,
#FreetextAssignedAnswerTags li.k-button:hover,
.phoenix-multi-select.k-multiselect .k-multiselect-wrap li.k-button:hover,
.phoenix-multi-select .k-multiselect-wrap li.k-button:hover,
.k-multiselect .k-multiselect-wrap li.k-button:hover {
    background-color: var(--multiselect-option-hover-background);
    border-color: var(--multiselect-option-hover-background);
    color: var(--multiselect-option-hover-font);
}

[id^=PartialExamExamAssignedRooms_] span.k-select,
#GeneralInfoAssignedTags span.k-select,
#FreetextAssignedAnswerTags span.k-select,
.phoenix-multi-select.k-multiselect .k-multiselect-wrap span.k-select,
.phoenix-multi-select .k-multiselect-wrap span.k-select,
.k-multiselect-wrap span.k-select {
    padding: 0;
    margin: 0;
}

[id^=PartialExamExamAssignedRooms_] li.k-button,
#GeneralInfoAssignedTags li.k-button,
#FreetextAssignedAnswerTags li.k-button,
#GeneralInfoExamAssignedRooms li.k-button {
    text-transform: none;
    border-radius: 25px;
}

[id^=PartialExamExamAssignedRooms_] li.k-button {
    margin: 2px;
}

#EditBlueprintRuleForm .k-multiselect-wrap .k-select,
#Details #DetailsArea .k-multiselect-wrap .k-select,
#CreateMediumForm .k-multiselect-wrap .k-select {
    position: initial !important;
}

#GeneralInfoAssignedTags ul,
#CreateMediumForm .k-multiselect-wrap ul {
    overflow: auto !important;
    max-height: 90px;
}

#Details #DetailsArea .k-multiselect-wrap ul {
    overflow: auto !important;
    /*max-height: 90px;*/
}