// @import "../lib/css/iob/selectID";
@import "commons";
/** hosts tab **********************/
/**/

#tab-hosts {
    // todo combine it with other tabs
    .host {
        background-color: white;
        width: 100%;
        height: 100px;
        min-width: 300px;
        position: relative;
        margin-top: 10px;
        border-radius: 3px;

        @media screen and (max-width: 700px) {
            height: 150px;
        }
        @media screen and (min-width: 701px) {
            height: 100px;
        }
        .image {
            float: left;
            width: 100px;
            background: #e2e2e2;
            height: 100%;
            padding: 10px;
            border-bottom-left-radius: 3px;
            border-top-left-radius: 3px;
            img {
                max-height: 50px;
            }
            .hosts-led {
                position: relative;
                height: 8px;
                width: 50px;
                border-radius: 5px;
                top: 15px;
                left: 8px;
                box-shadow: #555d0d 0 0 1px 1px, #446f44 0 0 0, inset #e44949 0 0 0;
            }
        }
        .system {
            padding: 5px 10px;
            margin-left: 100px;
            overflow: hidden;
            span {
                font-weight: 700;
            }
            .title-val {
                font-weight: normal;
                min-width: 100px;
            }
            ul {
                list-style-position: inside;

                list-style-type: none;
                height: 60px;
                margin: 0;
                width: 300px;
                font-size: 0.8rem;
                @media screen and (max-width: 700px) {
                    height: 120px;
                    -moz-column-count: 1;
                    -webkit-column-count: 1;
                    column-count: 1;
                }
                @media screen and (min-width: 701px) {
                    height: 60px;
                    -moz-column-count: 2;
                    -webkit-column-count: 2;
                    column-count: 2;
                }
            }
            .nameHost {
                font-size: 1.5rem;
                font-weight: 700;
            }

        }
        .icon {
            position: absolute;
            right: 0;
            top: 0;
            bottom: 0;
            width: 40px;
            padding: 8px 0;
            background-color: #e2e2e2;
            i:hover {
                opacity: 0.5;
                cursor: pointer;
            }
            i {
                transition: 0.5s;
            }
        }
    }
    .main-toolbar-table {
//        margin-left: 0.3rem;
        &>div {
            display: inline-block;
            width: 100%;
        }
        a.btn-small {
            line-height: @admin-small-buttons-size;
            height: @admin-small-buttons-size;
            width: @admin-small-buttons-size;
            i {
                margin-left:    -0.5px;
                font-size:      1.2rem;
                line-height:    @admin-small-buttons-size;
            }
        }

        .filter-input {
            display:        inline-table;
            padding-left:   6px;
            margin-left:    20px;
            // font-size:      14px;
            height:         24px;
            width:          10rem;
            &::placeholder {
                color: @admin-filter-placeholder-color;
            }
        }

        .filter-clear {
            width:          18px;
            height:         18px;
            border:         0;
            i {
                font-size:  0.8rem;
                line-height: 1.2rem;
            }
        }

        .main-toolbar-table-types-tools {
            display: inline-block;
        }
    }
    .hosts-table {
        width: 100%;
        //.new-iob-list-table;
        // font-size: @list-font-size !important;
        font-weight: normal;
        font-family: @iob-font;

        background:         @iob-background !important;
        white-space:        nowrap;
        table-layout:       fixed;
        border-collapse:    collapse;
        border-spacing:     0;
        padding:            0;
        margin:             0 0 0 1px;
        overflow:           auto;

        font-size: 0.9em;

        @media screen and (max-width: 1078px) and (min-width: 900px) {
            .tab-hosts-header-type {
                display: none;
            }
        }
        @media screen and (max-width: 900px) and (min-width: 800px) {
            .tab-hosts-header-type {
                display: none;
            }
            .tab-hosts-header-title {
                display: none;
            }
        }
        @media screen and (max-width: 800px) and (min-width: 700px) {
            .tab-hosts-header-type {
                display: none;
            }
            .tab-hosts-header-title {
                display: none;
            }
            .tab-hosts-header-os {
                display: none;
            }
        }
        @media screen and (max-width: 700px) {
            .tab-hosts-header-type {
                display: none;
            }
            .tab-hosts-header-title {
                display: none;
            }
            .tab-hosts-header-os {
                display: none;
            }
            .tab-hosts-header-events {
                display: none;
            }
        }
        .hosts-led {
            margin-left: 0.8rem;
        }
        .hosts-icon {
            text-align: center;
            img {
                max-height: 30px;
            }
            width: 4rem;
        }
        .tab-hosts-header-led {
            width: 4rem;
        }
        .tab-hosts-header-icon {
            width: 4rem;
        }
        .tab-hosts-header-type {
            width: 6rem;
        }
        .tab-hosts-header-title {
            width: 8rem;
        }
        .tab-hosts-header-os {
            width: 6rem;
        }
        .tab-hosts-header-available {
            width: 8rem;
        }
        .tab-hosts-header-installed {
            width: 8rem;
        }
        .tab-hosts-header-events {
            width: 6rem;
        }
        .tab-hosts-header-restart {
            width: 6rem;
        }
        .updateReady {
            font-weight: bold;
            color: #06960E !important;
        }

        .grid-hosts {
            & > tr:nth-child(2n) {
                background-color: @even-bg-color;
            }
        }

        th, td, tr, td {
            border: @td-border;
            padding: 0 0.5rem 0 0.5rem;
            overflow: hidden;
        }
        &>tbody>tr>td>b {
            font-weight: normal;
            color: #008;
        }
        th {
            padding-left: @line-indent;
        }
        &>tbody>tr {
            height: 35px;
            border: 0;
        }
        .hosts-host-filtered-out {
            padding-left: 2rem;
        }
        .hosts-version-available-updatable {
            float: left;
            padding-top: 4px;
        }
    }
    #hosts {
        .hosts-host-filtered-out>div {
            padding: 2rem;
            font-size: 20px;
        }
    }
    .small-button-empty, .small-button {
        width:      24px;
        margin:     0 1px 0 0;
        display:    inline-block;
        position:   relative;
        z-index:    1;
        border:     0;
        border-radius: 2px;
    }
    .small-button {
        height:     24px;
        background: @tiles-tile-background;
        color:      @admin-sidemenu-main-items-color;
        padding:    1px 0 0 0;
        cursor:     pointer;
        i {
            //font-size: 14px;
        }
        &:hover {
            background: @main-active-color;
            color: @admin-sidemenu-color;
        }
        &.disabled {
            opacity: 0.5;
            pointer-events: none;
        }
    }
}
#tab-host-dialog-edit {
    .tab-host-dialog-edit-color-icon {
        float: left;
        padding-right: 4px;
    }
    .tab-host-dialog-edit-color {
        width: calc(~"100% - 50px");
    }
    .tab-host-dialog-edit-icon-clear,
    .tab-host-dialog-edit-color-clear {
        float: right;
        z-index: 0;
    }
    .tab-host-dialog-edit-upload{
        position: absolute;
        left: 80px;
        height: 3rem;
        line-height: 3rem;
        a{
            height: 3rem;
            width: 4rem;
            i{
                line-height: 50px;
            }
        }
    }
    .tab-host-dialog-edit-icon{
        position: absolute;
        left: 170px;
        img.treetable-icon{
            height: 50px;
            width: 50px;
            max-height: 50px;
        }
    }
}