@import "resect.less";
@import "mixins.less";
@import "from.less";
@import "ico.less";
@import "popup.less";

//color
@blue-high :   #72d1d4;
@blue-center:  #ccebec;
@blue-lower:   #d5f3f4;
@blue-lower-1: #f2fbfc;

@gray-high :   #f1f5f5;
@gray-center :   #fdffff;

.scroll-bar();

.circle {
    .img-circle();
}
.head-box {
    .img-circle();
    .size(72px,72px);
    border:4px solid @gray-high;
    overflow: hidden;
    cursor: pointer;
    &:hover {
        border:4px solid #ffffff;
    }
}
.room-head-box {
    .size(100px,100px);
    border-radius: 4px;
}
.Integral {
    color: #a8ada;
    span {
        vertical-align: middle;
    }
    .level,
    .level2,
    .level3,
    .level4,
    .level5 {
        background: url("../images/role/level_02.png") no-repeat;
        .size(50px,15px);
        display: inline-block;
        padding-left: 16px;
        color: #ffffff;
        strong {
            .scale(0.82);
            display: block;
            .text-border();
        }
    }
    .level2 {
        background: url("../images/role/level_04.png") no-repeat;
        strong {
            .text-border(@color: #0094b8);
        }
    }
    .level3 {
        background: url("../images/role/level_06.png") no-repeat;
        strong {
            .text-border(@color: #9c75c9);
        }
    }
    .level4 {
        background: url("../images/role/level_08.png") no-repeat;
        strong {
            .text-border(@color: #f22522);
        }
    }
    .level5 {
        background: url("../images/role/level_10.png") no-repeat;
        strong {
            .text-border(@color: #da6200);
        }
    }
}
.search {
    background-color: #ffffff;
    border-radius: 10px;
    border:1px solid #ffffff;
    height: 24px;
    margin-top: 20px;
    padding: 0px 5px;
    .transition(all .5s ease-in);
    &:hover {
        border-color: @blue-high;
        .box-shadow(0px 0px 3px @blue-high);
    }
    input {
        .placeholder(@color: #a8adad);
        width: 160px;
        border: none;
        vertical-align: middle;
        &:focus,
        &:active,
        &.active {
            border-color: transparent;
            .box-shadow(none);
        }
    }
    span {
        cursor: pointer;
    }
}
.user-set {
    .size(562px,352px);
    color: #687677;
    -webkit-user-select: none;
    .popup-content {
        .popup-box {
            #box .box();
        }
    }
    .set-box {
        width: 128px;
        padding: 10px 2px;
        border-right:1px solid #e6ecec;
        #box .box(@Orientation: vertical);
        #box .align(@align: center);
        background-color: #f5fbfb;
        .title {
            font-size: 14px;
            color: #000000;
            text-align: center;
            padding-bottom: 10px;
        }
        .btn {
            margin: 15px 0px;
        }
        .set-btn-box {
            width: 100%;
            li {
                width: 100%;
                text-align: center;
                height: 28px;
                line-height: 28px;
                margin-bottom: 4px;
                cursor: pointer;
                color: #193b3c;
                border-radius: 4px;
                color: #255255;
                &:hover {
                    color: #193b3c;
                    background-color: #72d1d5;
                }
                &.active {
                    background-color: #72d1d5;
                }
            }
        }
    }
    .set-content {
        #box .flex();
        padding: 14px 24px;
        display: none;
        table {
            width: 100%;
        }
        label {
            color: #4e5859;
        }
        .title {
            color: #687677;
            padding-bottom: 8px;
        }
    }
}
.room-set {
    .user-info {
        textarea {
            height: 88px;
        }
    }
}
.user-info {
    td {
        padding: 8px 0px;
        &.ico-box {
            padding: 0px;
            text-align: right;
            .air-ico {
                margin-right: 10px;
            }
        }
        .autograph-text {
            padding-bottom: 10px;
        }
    }

}
.user-list-box {
    border:1px solid #aec9da;
    .thead {
        margin-bottom: 1px;
    }
    th {
        padding: 3px 0px;
        border-right: 1px solid #d5f3f5;
        font-weight: bold;
        color: #5f6468;
        position: relative;
        span {
            display: none;
            position: absolute;
            right: 15px;
            top: 9px;
        }
        &:hover {
            background-color: #e6f5f5;
            #gradient .vertical(@start-color: #f3fcfc; @end-color: #e6f5f5; @start-percent: 0%; @end-percent: 100%);
            cursor: default;
            span {
                display: block;
            }
        }

    }
    .user-list {
        height: 204px;
        overflow-x: hidden;
        overflow-y: auto;
        td {
            text-align: center;
            padding: 5px 0px;
            color: #193b3c;
        }
        tr {
            &:hover,
            &.active {
                background-color: #d5f3f4;
            }

        }
    }
}
.paging-box {
    display: table;
    text-align: right;
    width: 100%;
    padding-top: 12px;
    a {
        color: #193b3c;
        padding-right: 10px;
        &:hover {
            color: @blue-high;
        }
    }
}
.system-set {
    .title {
        color: #4e5859;
        font-weight: bold;
        span {
            display: inline-block;
            background-color: #f9fdfe;
            padding-right: 10px;
            position: relative;
            z-index: 1;
        }
        &:after {
            content: "";
            border-bottom: 1px solid #d8e0e3;
            display: block;
            position: relative;
            top: -8px
        }
    }
    .block {
        padding-left: 28px;
        li {
            padding-bottom: 10px;
            &.subTitle {
                padding-bottom: 15px;
            }
        }
    }
    .box {
        padding-bottom: 10px;
    }
}
.auto-set,
.video-set {
    table {
        width: 80%;
    }
    td {
        vertical-align: text-top;
        padding: 5px 0px;
    }
    input {
        margin:12px 0px 9px 0px;
    }
    .btn {
        font-size: 14px;
    }
    .audio-ico {
        margin-right: 5px;
    }
}
.video-set {
    .video-box {
        background-color: #6fcdcf;
        height: 220px;
    }
}
.admin-list-box {
    &.set-content {
        padding: 0px;
        .user-set & .title {
            padding-bottom: 0px;
        }
    }
    .user-list {
        .cancel {
            padding: 1px 12px;
        }
    }
    .title {
        height: 31px;
        color: #333333;
        background-color: #b4f0f2;
        border-bottom: 1px solid #c5eced;
        display: table;
        width: 100%;
        padding-left: 10px;
        padding-right: 10px;
        .text {
            display: table-cell;
            vertical-align: middle;
            text-align: left;
            color: #333333;
            font-size: 14px;
        }
        .block {
            display: table-cell;
            vertical-align: middle;
            text-align: right;
            width: 30%;
        }
        .search {
            margin-top: 0px;
            padding: 0px 7px;
            height: 23px;
            border:1px solid #7dd4d7;
            input {
                padding: 0px;
                width: 86%;
                margin-left: 0px;
                &:focus,
                &:active,
                &.active {
                    border-color: transparent;
                    .box-shadow(none);
                }
            }
            .search-ico {
                margin-right: 0px;
            }
        }
    }
    .user-list-box {
        border: none;
        .thead {
            tr {
                background-color: #f5fbfb;
                border-bottom: 1px solid #f2f4f4;
            }
            th {
                border-right: none;
                &:hover {
                    background-color: transparent;
                    #gradient .vertical(@start-color: transparent; @end-color: transparent; @start-percent: 0%; @end-percent: 100%);
                    cursor: default;
                }
            }
        }
        .user-list {
            height: 220px;
        }
    }
}
.thumb-image-box {
    span {
        color: #000000;
        display: block;
        text-align: center;
        margin: auto;
    }
    .thumb-area-Box {
        background-color: #ffffff;
        margin: auto;
        overflow: hidden;
        position: relative;
        border: 1px solid #68bebf;
        box-sizing: content-box;
        border-radius: 4px;
        .thumb-area {
            img {
                max-width: none;
                position: absolute;
            }
        }
    }
    .text {
        height: 25px;
        line-height: 25px;
        font-weight: bold;
    }
    .room-head-100 {
        .size(100px,100px);
    }
    .room-head-60 {
        .size(60px,60px);
    }
    .room-head-68 {
        .img-circle();
        .size(68px,68px);
    }
    .room-head-30 {
        .size(30px,30px);
    }
}
.image-edit-box {
    height: 249px;
    margin-top: 10px;
    border: 1px solid #68bebf;
    position: relative;
    &.normal {
        background: url("../images/controls/image-edit-bg.png") repeat;
    }
    #box .box(@Orientation: vertical);
    #box .align(@align: center);
    &.loading {
        .loadding-ico;
    }
    .image-tip {
        position: absolute;
        color: #089296;
        text-align: center;
        width: 100%;
        bottom: 19px;
    }
}
.image-placeholder {
    #box .flex();
    position: relative;
    width: 100%;
    .changeMyHead& {
        .photo-Frame {
            .size(150px,150px);
            margin-top: -75px;
            margin-left: -75px;
            .img-circle();
        }
    }
    .photo-Frame {
        display: block;
        top: 50%;
        left: 50%;
        margin-top: -50px;
        margin-left: -50px;
        border: 1px solid #2382c2;

        span {
            &:nth-child(1),
            &:nth-child(3),
            &:nth-child(6),
            &:nth-child(8) {
                display: none;
            }
        }
    }
}
.photo-Frame {
    border: 1px solid #2382c2;
    position: absolute;
    z-index: 2;
    cursor: move;
    display: none;
    .size(100px,100px);
    left: 2px;
    top: 2px;
    border-radius: 4px;
    box-sizing: content-box;
    span {
        position: absolute;
        display: block;
        .size(6px,6px);
        background-color: #2382c2;
        cursor: e-resize;
        z-index: 2;
        &:nth-child(1) {
            left: -3px;
            top: -3px;
            cursor: se-resize;
        }
        &:nth-child(2) {
            left: 50%;
            margin-left: -3px;
            top: -3px;
            cursor: ns-resize;
        }
        &:nth-child(3) {
            right: -3px;
            top: -3px;
            cursor: nesw-resize;
        }
        &:nth-child(4) {
            left: -3px;
            top: 50%;
        }
        &:nth-child(5) {
            right: -3px;
            top: 50%;
        }
        &:nth-child(6) {
            left: -3px;
            bottom: -3px;
            cursor: nesw-resize;
        }
        &:nth-child(7) {
            left: 50%;
            margin-left: -3px;
            bottom: -3px;
            cursor: ns-resize;
        }
        &:nth-child(8) {
            right: -3px;
            bottom: -3px;
            cursor: se-resize;
        }
    }
}
.image-edit {
    position: relative;
    margin: auto;
    display: none;
    width: 100%;
    height: 238px;
    overflow: hidden;
    #box .flex();
    text-align: center;
    img {
        max-width: none;
    }
    .mask-box {
        width: 100%;
        height: 100%;
        border: 384px solid rgba(0, 0, 0, .35);
        position: absolute;
        z-index: 1;
        top: -384px;
        left: -384px;
        box-sizing: content-box;
    }
}
.room-info-box {
    height: 180px;
}
.room-info {
    color: #193b3c;
    padding: 19px 14px;
     ul {
         display: table;
         width: 100%;
     }
     li {
         display: table-cell;
         vertical-align: top;
     }
    .room-image {
        .size(100px,100px);
        display: block;
        margin-right: 10px;
    }
    .room-name {
        font-weight: bold;
        width: 80%;
    }
    .room-ico {
        text-align: right;
        .air-ico {
            margin-right: 5px;
        }
    }
    .info {
        width: 80%;
    }
    .block {
        margin-bottom: 4px;
    }
    table {
        td {
            padding: 3px 0px;
        }
    }
}

.room-child {
    height: 352px;
    label {
        color: #b4b4b4;
    }
    .user-input {
        color: #193b3c;
        padding-bottom: 7px;
    }
    .system-set {
        padding: 10px 15px;
        .block {
            height: 261px;
            overflow-x: hidden;
            overflow-y: auto;
            padding-top: 5px;
            li{
                padding-bottom: 8px;
            }
        }
    }
    input[type=text] {
        .size(45px,20px);
        margin: 0px 3px;
        border-color: #bed2d3;
        color: #8c9091;
    }
}

.create-room {
    height: 180px;
    color: #333333;
    strong {
        font-weight: bold;
    }
    .tip1,
    .tip2 {
        text-align: center;
        font-weight: bold;
    }
    .tip1 {
        color: #3d9fa2;
        padding-top: 30px;
        font-size: 16px;
    }
    .tip {
        padding-top: 30px;
        text-align: left;
        width: 327px;
        margin: auto;
        .pink {
            color: #fd5e86;
        }
        span {
            vertical-align: middle;
            color: #000000;
        }
    }
    .tip2 {
        color: #647474;
        padding-top: 36px;
        span {
            color: #fc86c3;
            font-weight: normal;
        }
    }
    .pink {
        color: #fd5e86;
    }
    .btn-box {
        text-align: center;
        position: relative;
        .pink {
            position: absolute;
            top: 9px;
        }
    }
    &.fail .btn-box {
        text-align: right;
    }

}