@import '../_vars.less';
@import '../bs/variables.less';
@import '../bs/mixins.less';

.adminRegion {
    position: relative;
    height: 100%;

    .form-group {
        margin-bottom: 5px;
    }

    .control-label {
        padding-right: 10px;
    }

    .maprow {
        display: flex;
    }

    .actions,
    .maprow {
        margin-left: -13%;
    }

    .map {
        flex: 3 3 70%;
        position: relative;
        min-height: 300px;
        max-height: 1200px;
        background-color: #eee;
    }

    .mapPanel {
        flex: 1 1 30%;
        min-width: 300px;
        padding: 0 2px 0 7px;
    }

    .regionInfo {
        margin-top: 8px;
    }

    .path {
        .current {
            color: #0ea300;
            cursor: default;
        }
    }

    .children {
        position: relative;
        display: inline-block;
        width: 100%;
        line-height: 19px;
        vertical-align: middle;
        white-space: nowrap;

        .expand {
            padding: 0 2px 0 5px;
            cursor: pointer;

            > .glyphicon {
                top: 0;
                color: #7b7b7b;
                font-size: 10px;
            }
        }

        &.expanded {
            white-space: normal;

            .expand::before {
                white-space: pre;
                content: '\A';
            }
        }

        &:not(.expanded) {
            .expand {
                position: absolute;
                top: 0;
                right: 0;
                bottom: 0;
                background-color: @body-bg;

                &::before {
                    white-space: pre;
                    content: '..., ';
                }
            }
        }
    }

    .dopparam {
        display: inline-block;
        margin: 0 6px 6px 0;

        > input[type='text'] {
            margin-left: 4px;
            margin-right: 2px;
        }

        > .btn-group {
            margin-left: 6px;
            margin-right: 4px;
        }
    }

    input.center,
    input.bbox {
        display: inline-block;
        text-align: center;
        cursor: default;
    }

    input.center {
        width: 150px;
    }

    input.bbox {
        width: 290px;
    }

    input.invalid {
        border-color: #f00;
    }

    .stats-head {
        font-size: @font-size-h4;

        .glyphicon {
            vertical-align: text-top;
        }
    }

    .stats-section {
        margin-bottom: 15px;
    }

    .sn {
        display: inline;
        color: @MainDarkColor;
    }

    a:hover > .sn {
        color: @link-hover-color;
    }

    .sc {
        display: inline;
    }

    .sc5 {
        display: inline;
        font-weight: bold;
    }

    .toggleStatByType {
        margin-top: 3px;
        cursor: pointer;
        color: darken(@link-hover-color, 30%);
        text-decoration: underline dotted darken(@link-hover-color, 30%);

        &:hover {
            color: @link-hover-color;
            text-decoration-color: @link-hover-color;
        }
    }

    .region {
        display: inline-block;
        white-space: nowrap;

        a.noPhotos {
            color: #8797a9;
        }

        .tltp-top {
            padding: 3px 1px;
        }

        .region-type-stat {
            display: inline-block;
            margin: 0 4px 1px;
            padding: 1px 1px 0;
            cursor: default;
            line-height: 13px;
            color: @MainLigthColor;
            border-bottom: 1px solid transparent;

            > a {
                cursor: inherit;
                color: @MainLigthColor;
                text-decoration: none;
            }
        }
    }

    .rytltp {
        margin-bottom: 5px;
        transform: translate(-50%, 2px);

        &.tltp-hotizontal-left {
            transform: translate(0, 2px);
        }

        &.tltp-animate-move {
            transform: translate(-50%, -5px);

            &.tltp-hotizontal-left {
                transform: translate(0, -5px);
            }
        }

        &::before {
            height: 5px;
            bottom: -5px;
        }
    }

    .rytltp-wrap:hover {
        > .rytltp.tltp-animate-move {
            transform: translate(-50%, 2px);

            &.tltp-hotizontal-left {
                transform: translate(0, 2px);
            }
        }
    }
}
