/* Copyright CloudLinux Zug GmbH 2010-2017 All Rights Reserved
 *
 * Licensed under CLOUD LINUX LICENSE AGREEMENT
 * http://cloudlinux.com/docs/LICENSE.TXT
 */
@import "grid";

:host {
    display: block;
}
/deep/ html {
    &[data-style="retro"] {
        .break-word {
            word-break: break-word;
        }
    }
}
thead {
    td, th{
        border-width: 1px;
    }

    th a{
        vertical-align: middle;
        cursor: pointer;
    }
}

.warning {
    color: red;
}

table.grouped_grid_da td {
    padding: 5px;
}

table {
    th, td {
        &.left-align {
            &>div, &>a, & {
                text-align: left;
            }
        }
        &.right-align {
            &>div, &>a, & {
                text-align: right;
            }
        }
        &.center-align {
            &>div, &>a, & {
                text-align: center;
            }
        }
    }
    th, th div, th a {
        text-align: left;
    }

    td {
        text-align: left;
        i, span {
            vertical-align: middle;
        }
        &.nowrap {
            white-space: nowrap;
        }
    }

    th:first-child, td:first-child {
        padding-left: 16px;
        position: relative;
        ui-checkbox {
            margin-right: 4px;
        }
    }

    thead {
        tr.grouped_row {
            height: 33px;
            th {
                height: 33px;
            }
        }

    }

    .btn-clear {
        color: #b5bbc1;
        transition:  0.2s color;
        width: 27px;
        min-width: 27px;
        height: 31px;

        &:hover {
            color: @disabledColor;
        }

        &.btn-blue {
            color: @mainColor;
        }

        &:focus, &:active {
            outline: none;
        }
    }

    tbody {
        td {
            .as_link {
                cursor: pointer;
                font-size: 13px;
                color: @mainColor;
            }
            .circle {
                width: 8px;
                height: 8px;
                display: inline-block;
                border-radius: 50px;
                margin-right: 5px;
                &.status-stopped {
                    background-color: #f06565;
                }
                &.status-started {
                    background-color: #3bb23e;
                }
            }
        }
        tr {
            position: relative;
        }
    }
}

.grouped_header {
    font-family: @notoFont;
    font-weight: 700;
    font-size: 11px;
    color: #4e5665;
}

.tools-inner {
    display: flex;
    align-items: center;
    margin-bottom: 25px;
    .caption {
        display: flex;
        align-items: center;
        width: 100%;
        h2 {
            display: inline-block;
            font-weight: bold;
        }
        .action {
            display: inline-flex;
            align-items: center;
            padding: 0 10px;
            border-right: solid 1px #eeeeee;
            margin-right: 13px;
            &:hover {
                cursor: pointer;
            }
            &:before {
                .arrow-icon(#fff);
                display: inline-flex;
                align-items: center;
                justify-content: center;
                color: #fff;
                width: 29px;
                height: 29px;
                background-color: #2b98f0;
                border-radius: 50%;
                margin-right: 8px;
                font-size: 20px;
            }
        }
    }
    .tools {
        text-align: right;
        width: 100%;
        & > * {
            &:not(:last-child) {
                padding-right: 20px;
            }
        }
    }
}

.load_more_navigation {
    text-align: center;
    .load_more_button  {
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 20px;
        border: solid 1px @mainColor;
        color: @mainColor;
        width: 175px;
        padding: 10px 0;
        &:hover {
            border-color: darken(@mainColor, @percent-of-darkness);
            color: darken(@mainColor, @percent-of-darkness);
        }
    }
}

.pagination {
    a {
        cursor: pointer;
    }
}

.table-relative-frame {
    position: relative;
}

tr ui-button.nav-ui-button {
    visibility: hidden;
}

tr:hover ui-button.nav-ui-button {
    visibility: visible;
}