﻿/*input {
    box-sizing: border-box;
}

select {
    box-sizing: border-box;
}

button {
    box-sizing: border-box;
}*/

.kg-input {
    height: 32px;
    border-width: 0px;
    border-bottom-width: 1px;
    border-color: lightgray;
    border-style: solid;
    padding: 2px;
    font-family: Verdana;
    box-sizing: border-box;
}

.kg-input_invalid {
    border-color: red;
}

.kg-expression-input .kg-input {
    float: left;
    display: inline;
}

.kg-file-input .kg-input {
    float: left;
    display: inline;
}

.kg-query-input-editor {
    display: inline;
}

.kg-property .kg-query-input-editor .kg-input {
    float: left;
    display: inline;
    width: 244px;
    background: whitesmoke;
}

.kg-select {
    height: 32px;
    border-width: 0px;
    border-bottom-width: 1px;
    border-color: lightgray;
    border-style: solid;
    font-family: Verdana;
    box-sizing: border-box;
}

.kg-select_invalid {
    border-color: red;
}

.kg-select__item {
    color: black;
}

.kg-select__item_optional {
    color: darkgray;
}

.kg-measured-input {
}

.kg-measured-input__value {
    display: inline;
    box-sizing: border-box;
}

.kg-measured-input__unit {
    display: inline;
    margin-left: -5px;
}

.kg-measured-input__value_invalid {
    border-color: red;
}

.kg-measured-input__unit_invalid {
    border-color: red;
}

.kg-autocomplete {
    position: relative;
    display: inline;
}

.kg-autocomplete__input {
    height: 32px;
    border-width: 0;
    border-bottom-width: 1px;
    border-color: lightgray;
    border-style: solid;
    padding: 2px;
    font-family: Verdana;
    box-sizing: border-box;
}

.kg-autocomplete__more {
    position: absolute;
    top: 50%;    
    transform: translateY(-50%);
    padding: 0;
    border: none;
    display: block;
    background: url(/components/autocomplete/more.svg) no-repeat;
    background-position: bottom;
    background-size: 12px 12px;
    height: 24px;
    width: 12px;
}

.kg-autocomplete__more_hidden {
    display: none;
}

.kg-property-value__editor .kg-autocomplete__more {
    right: 10px;    
    background-color: whitesmoke;    
}

.kg-relation-new-value .kg-autocomplete__more {
    right: 5px;
    background-color: white;    
}

.kg-autocomplete__input_invalid {
    border-color: red;
}

.kg-autocomplete__item {
    color: black;
}

.kg-instance-form__save {
    color: white;
    background-color: rgb(27,163,225);
    border: none;
    height: 32px;
    width: 100px;
    font-family: Verdana;
}

.kg-instance-form__cancel {
    color: white;
    background-color: gray;
    border: none;
    height: 32px;
    float: right;
    width: 100px;
    font-family: Verdana;
}

.kg-instance {
}

.kg-instance__properties {
    padding: 0;
}

.kg-instance__new-property {
}

.kg-instance__property {
    display: block;
    margin-bottom: 4px;
}

.kg-property {
    width: 360px;
}

    .kg-property .kg-input {
        width: 276px;
    }

    .kg-property .kg-select {
        width: 276px;
    }

    .kg-property .kg-measured-input .kg-input {
        width: 228px;
    }

    .kg-property .kg-measured-input .kg-select {
        width: 48px;
    }

.kg-input[type="checkbox"] {
    width: 16px;
}

.kg-property .kg-autocomplete__input {
    width: 276px;
}

.kg-property__remove {
    background: url(/components/instance/remove-property.png) no-repeat;
    background-size: 16px 16px;
    background-position: center;
    border: 0;
    height: 16px;
    width: 24px;
    vertical-align: middle;
}

.kg-property__remove_hidden {
    visibility: hidden
}

.kg-property__label {
    font-size: x-small;
    color: darkgray;
    margin-bottom: -16px;
    font-family: Verdana;
}

.kg-property-value-attributes__attribute-label {
    font-size: x-small;
    color: darkgray;
    /*margin-bottom: -16px;*/
    font-family: Verdana;
}

.kg-property__error {
    border-color: indianred;
    border-width: 2px;
    border-radius: 4px;
}

.kg-property__value {
    margin-left: 25px;
}

.kg-property-value {
}

.kg-property-value__editor {    
    display: inline;
}

    .kg-property-value__editor .kg-expression-input {
        float: left;
    }

.kg-property-value__actions {
    display: inline;
}

.kg-property-list {
}

.kg-property-list__items {
    padding: 0;
}

.kg-property-list__item {
    display: block;
    margin-bottom: 2px;
}

.kg-property-list__new-item {
}

.kg-attribute-new-value {
}

.kg-attribute-new-value__value {
}

    .kg-attribute-new-value__value .kg-select {
        color: darkgray;
    }

.kg-relation-new-value {
}

    .kg-relation-new-value .kg-autocomplete__input {
        width: 244px;
    }

.kg-property-value .kg-autocomplete__input {
    width: 244px;
}



.kg-relation-new-value__value {
    float: left;
    display: inline;
    box-sizing: border-box;
}

.kg-relation-new-value__search {
    padding: 0;
    border-style: solid;
    border-width: 0px;
    border-bottom-width: 1px;
    border-color: lightgray;
    background: url(/components/instance/add-icon.png) no-repeat;
    background-position: center;
    background-size: 20px 20px;
    height: 32px;
    width: 32px;
    vertical-align: middle;
    margin-left: -1px;
}

.kg-relation-new-value__search_hidden {
    visibility: hidden;
}

.kg-expression-input__edit {
    padding: 0;
    border: solid 1px darkgray;
    background: url(/images/icons/commander.png) no-repeat;
    background-position: center;
    height: 32px;
    width: 32px;
    vertical-align: middle;
    margin-left: -1px;
}

.kg-query-input-editor__edit {
    padding: 0;
    border: none;
    background: url(/images/icons/edit-entity.png) no-repeat;
    background-position: center;
    height: 32px;
    width: 32px;
    vertical-align: middle;
}

.kg-file-input {
    display: inline;
}

.kg-file-input__select {
    padding: 0;
    border: none;    
    height: 32px;
    width: 32px;
    vertical-align: middle;
}

.kg-file-input__select_loading {
    background: url(/images/icons/loader2.gif) no-repeat center;
}

.kg-file-input__select_attachment {
    background: url(/images/icons/attachment.png) no-repeat center;    
}

.kg-instance-new-property {
}

    .kg-instance-new-property .kg-autocomplete__input {
        width: 329px;
        border-style: solid;
        border-color: #1BA3E1;
        border-width: 1px;
        height: 40px;
    }

    .kg-instance-new-property .kg-autocomplete__more {
        display: none !important;
    }

.kg-instance-new-property__value {
    float: left;
    display: inline;
    box-sizing: border-box;
}

.kg-instance-new-property__search {
    padding: 0;
    border-style: solid;
    border-width: 1px;
    border-color: #1BA3E1;
    background: url(/components/instance/search-property.png) no-repeat;
    background-position: center;
    background-size: 19px 15px;
    height: 40px;
    width: 32px;
    vertical-align: middle;
    margin-left: -1px;
}

.kg-instance-new-property .kg-autocomplete__input {
    padding-left: 4px;
}

.kg-property-list__value {
    display: inline;
}

    .kg-property-list__value .kg-input {
        width: 244px;
    }

    .kg-property-list__value .kg-select {
        width: 244px;
    }

    .kg-property-list__value .kg-autocomplete__input {
        width: 244px;
    }

.kg-property .kg-property_relation .kg-autocomplete__input {
    width: 244px;
}

.kg-property-list__remove-value {
    padding: 0;
    border: none;
    background: url(/components/instance/remove-value.png) no-repeat gainsboro;
    background-position: center;
    /*background-size: 24px 19px;*/
    height: 32px;
    width: 32px;
    vertical-align: middle;
    margin-left: -5px;
}

.kg-property-value__remove {
    display: none;
    padding: 0;
    border: none;
    background: url(/components/instance/remove-value.png) no-repeat;
    background-position: center;
    background-size: 12px 12px;
    height: 32px;
    width: 32px;
    vertical-align: middle;
    margin-left: -5px;
}

.kg-property-value__remove_visible {
    display: inline-block;
}

.kg-property-value__link {
    padding: 0;
    border: none;
    background: url(/components/instance/link.png) no-repeat;
    background-position: center;
    background-size: 19px 8px;
    height: 32px;
    width: 32px;
    vertical-align: middle;
    margin-left: -5px;
}

.kg-property-value__properties {
    padding: 0;
    border: none;
    background: url(/components/instance/properties.png) no-repeat;
    background-position: center;
    background-size: 17px 19px;
    height: 32px;
    width: 32px;
    vertical-align: middle;
    margin-left: -5px;
}

.kg-property-value__properties_clicked {
    padding: 0;
    border: none;
    background: url(/components/instance/properties_clicked.png) no-repeat;
    background-position: center;
    background-size: 17px 19px;
    height: 32px;
    width: 32px;
    vertical-align: middle;
    margin-left: -5px;
}

.kg-property-value__properties_hidden {
    visibility: hidden
}

.kg-instance-form {
    border-style: inset;
    border-width: 1px;
    width: 360px;
    border-color: lightgray;
    box-shadow: 0 0 10px darkgray;
    display: inline-block;
    margin: 20px;
    vertical-align: top;
}

.kg-instance-row {
    flex-direction: row;
}

.kg-instance-form__instance {
}

.kg-instance-form__header-container {
    border-bottom-style: solid;
    border-bottom-color: lightgray;
    border-bottom-width: 1px;
}

.kg-instance-form__header {
    display: inline-block;
    width: 315px;
    font-family: Verdana;
    margin-left: 5px;
    margin-top: 3px;
}

.kg-instance-form__close {
    padding: 0;
    border: none;
    background: url(/components/instance/close-form.png) no-repeat;
    background-position: center;
    background-size: 20px 20px;
    height: 32px;
    width: 32px;
    vertical-align: top;
}

.kg-instance-form__actions {
    border-top-style: solid;
    border-top-color: lightgray;
    border-top-width: 1px;
    padding: 10px;
    background-color: whitesmoke;
}

.kg-property-value__attributes {
    display: none;
    background-color: whitesmoke;
    border-top-style: solid;
    border-top-width: 2px;
    border-top-color: #1BA3E1;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-bottom-color: lightgray;
    box-shadow: inset 0 10px 10px -8px darkgray;
    padding: 8px 8px 8px 25px;
    box-sizing: border-box;
    margin-left: -25px;
}

.kg-property-value__attributes_visible {
    display: block;
    margin-top: -2px;
}

.kg-property-value__attributes .kg-input {
    width: 150px;
    background-color: whitesmoke;
}

.kg-property-value__attributes .kg-select {
    width: 150px;
    background-color: whitesmoke;
}

.kg-property-value__editor .kg-autocomplete__input {
    border-radius: 4px;
    background: whitesmoke;
    padding-right: 40px;
}
