:root {
    --main-border-color: rgb( 138, 136, 134);
    --main-disabled-border-color: rgb( 233, 232, 231);
    --main-text-color: rgb( 50, 49, 48);
    --main-disabled-text-color: rgb( 161, 159, 157);
    --main-background-color: rgb( 255 255 255);
    --main-disabled-background-color: rgb( 233, 232, 231);
    --main-hover-background-color: rgb( 243, 242, 241);
    --main-validation-failed-color: rgb(255, 0, 0);
}

.vue-ModalPopUp {
    margin: 200px auto;
    background: var(--main-background-color);
    border-radius: 2px;
    padding: 2px;
    box-shadow: 0 0 10px #555;
}

.vue-ModalPopUpHeader {
    background: var(--main-background-color);
    border-bottom: 1px solid var(--main-border-color);
    padding: 5px;
}

.vue-ModalPopUpBackground {
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    background-color: var(--main-border-color);
    background-color: rgb( 138, 136, 134);
    /*IE*/
    background-color: rgba(0, 0, 0, 0.35);
    width: 100%;
    height: 100%;
    overflow: auto;
}

.vue-text-input {
    height: 25px;
    color: var(--v2-theme-text-color);
    background-color: white !important;
    border: var(--v2-scaled-border-width) solid var(--v2-theme-border-strong-color) !important;
    padding: 0 0 0 8px !important;
    margin: 0 !important;
    border-radius: 2px;
    box-shadow: none !important;
}

.vue-disabled-text-input {
    color: var(--v2-theme-text-disabled-color);
    background-color: var(--v2-theme-background-disabled-color) !important;
    border: none !important;
}

.vue-text-input.validation-failed {
    border: var(--v2-scaled-border-width) solid var(--v2-theme-validation-failed-color) !important;
    box-shadow: 0 0 1px var(--v2-theme-validation-failed-color) !important;
}

.vue-textarea {
    box-sizing: border-box;
    color: var(--v2-theme-text-color);
    background-color: var(--v2-theme-background-color) !important;
    border: var(--v2-scaled-border-width) solid var(--v2-theme-border-strong-color) !important;
    padding: 8px !important;
    margin: 0 !important;
    border-radius: 2px;
    box-shadow: none !important;
    resize: both;
}

.vue-disabled-textarea {
    box-sizing: border-box;
    color: var(--v2-theme-text-disabled-color);
    background-color: var(--v2-theme-background-disabled-color) !important;
    border: none !important;
}

.vue-textarea.validation-failed {
    border: var(--v2-scaled-border-width) solid var(--v2-theme-validation-failed-color) !important;
    box-shadow: 0 0 1px var(--v2-theme-validation-failed-color) !important;
}

.vue-collapsible-textarea {
    height: 25px;
    color: var(--main-text-color);
    color: rgb( 50, 49, 48);
    /*IE*/
    background-color: var(--main-background-color) !important;
    background-color: #ffffff !important;
    /*IE*/
    border: 1px solid var(--main-border-color) !important;
    border: 1px solid rgb( 138, 136, 134) !important;
    /*IE*/
    padding: 0 5px !important;
    margin: 0 !important;
    border-radius: 2px;
    box-shadow: none !important;
    -webkit-transition: all 0.5s;
    /* Safari */
    transition: all 0.5s;
}

.vue-collapsible-textarea:focus {
    height: 200px;
}

.vue-list-element {
    min-height: 25px;
    background-color: var(--main-background-color);
    background-color: #ffffff;
    /*IE*/
    border-top: 1px solid var(--main-hover-background-color);
    border-top: 1px solid rgb( 243, 242, 241);
    /*IE*/
    padding: 5px;
    border-radius: 2px;
    box-shadow: none;
}

.vue-list-element:last-child {
    border-bottom: 1px solid var(--main-hover-background-color);
    border-bottom: 1px solid rgb( 243, 242, 241);
    /*IE*/
}

.vue-list-element.list-hover:hover {
    background-color: var(--main-hover-background-color);
    background-color: rgb( 243, 242, 241);
    /*IE*/
}

.vue-button {
    height: 25px;
    background-color: var(--main-background-color);
    background-color: #ffffff;
    /*IE*/
    border: 1px solid var(--main-border-color);
    border: 1px solid rgb( 138, 136, 134);
    /*IE*/
    padding: 0 5px;
    margin: 0 3px;
    border-radius: 2px;
    box-shadow: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.vue-button:hover,
.vue-clickable-icon:hover,
.vue-clickable-icon-with-Border:hover {
    background-color: var(--main-hover-background-color);
    background-color: rgb( 243, 242, 241);
    /*IE*/
}

.vue-disabled-button {
    background-color: var(--main-disabled-background-color) !important;
    background-color: rgb( 233, 232, 231) !important;
    /*IE*/
    border: 1px solid var(--main-disabled-border-color) !important;
    border: 1px solid rgb( 233, 232, 231) !important;
    /*IE*/
    cursor: default !important;
}

.vue-disabled-icon-button {
    opacity: 0.4;
    filter: alpha(opacity=40);
}

.vue-span {
    color: var(--main-text-color);
    color: rgb( 50, 49, 48);
    /*IE*/
}

.vue-disabled-span {
    color: var(--main-disabled-text-color);
    color: rgb( 161, 159, 157);
    /*IE*/
}

.vue-icon {
    background-color: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
}

.vue-clickable-icon {
    background-color: var(--main-background-color);
    background-color: #ffffff;
    /*IE*/
    border-radius: 2px;
    box-shadow: none;
    cursor: pointer;
}

.vue-clickable-icon-with-Border {
    background-color: var(--main-background-color);
    background-color: #ffffff;
    /*IE*/
    border: 1px solid var(--main-border-color);
    border: 1px solid rgb( 138, 136, 134);
    /*IE*/
    border-radius: 2px;
    box-shadow: none;
    cursor: pointer;
}


/*IE*/

@media all and (-ms-high-contrast: none),
(-ms-high-contrast: active) {
    .vs__clear,
    .vs__open-indicator {
        width: 15px !important;
    }
}

.vs__clear,
.vs__open-indicator {
    fill: var(--main-text-color);
    fill: rgb( 50, 49, 48);
    /*IE*/
    background-color: var(--main-background-color) !important;
    background-color: #ffffff !important;
    /*IE*/
    border: none !important;
}

.vs--disabled .vs__clear,
.vs--disabled .vs__open-indicator {
    fill: var(--main-disabled-text-color);
    fill: rgb( 161, 159, 157);
    /*IE*/
}

.vs__dropdown-toggle {
    color: var(--v2-theme-text-color);
    background-color: var(--v2-theme-background-color) !important;
    border: var(--v2-scaled-border-width) solid var(--v2-theme-border-strong-color) !important;
    border-radius: 2px !important;
    cursor: pointer !important;
}

.validation-failed .vs__dropdown-toggle {
    border: var(--v2-scaled-border-width) solid var(--v2-theme-validation-failed-color) !important;
    box-shadow: 0 0 1px var(--v2-theme-validation-failed-color) !important;
}

.vs--open .vs__dropdown-toggle {
    border-bottom-color: transparent !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important
}

.vs__dropdown-menu {
    border: 1px solid var(--main-border-color) !important;
    border: 1px solid rgb( 138, 136, 134) !important;
    /*IE*/
    border-radius: 0 0 2px 2px !important;
    border-top-style: none !important;
}

.vs__selected {
    background-color: var(--main-background-color) !important;
    background-color: #ffffff !important;
    /*IE*/
    border-radius: 2px !important;
    color: var(--main-text-color);
    color: rgb( 50, 49, 48);
    /*IE*/
}

.vs__deselect {
    border: none !important;
    height: auto !important;
}

.vs--disabled .vs__clear,
.vs--disabled .vs__dropdown-toggle,
.vs--disabled .vs__open-indicator,
.vs--disabled .vs__search,
.vs--disabled .vs__selected {
    cursor: default !important;
    background-color: var(--main-disabled-background-color) !important;
    background-color: rgb( 233, 232, 231) !important;
    /*IE*/
}

.vs--disabled .vs__dropdown-toggle,
.vs--disabled .vs__search,
.vs--disabled .vs__selected {
    border: 1px solid var(--main-disabled-border-color) !important;
    border: 1px solid rgb( 233, 232, 231) !important;
    /*IE*/
    color: var( --main-disabled-text-color) !important;
    color: rgb( 161, 159, 157) !important;
    /*IE*/
}

[v-cloak] {
    display: none;
}