// Color variables (appears count calculates by raw css)
@color10: #dddddd; // Appears 7 times
@color11: #ffffff; // Appears 2 times

// Width variables (appears count calculates by raw css)
@width11: 150px; // Appears 3 times
@width12: 170px; // Appears 2 times

// Height variables (appears count calculates by raw css)
@height10: 500px; // Appears 2 times
@height11: 30px; // Appears 2 times
@height12: 20px; // Appears 3 times
@height13: 50px; // Appears 2 times

.leftsection {
    display: inline-block;
    height:@height10;
    overflow:auto!important;
    text-align: center;
    vertical-align: top;
    overflow: hidden;
    width:@width11;
    li {
        border-bottom:1px solid @color10;
        height: @height13;
        line-height: @height13;
        list-style: none;
        padding-left: 5px;
    }
}
.classcity {
    border-bottom:1px solid @color10;
    padding-left:10px;
    
    a {
        border-bottom: none;
        border:1px solid @color10;
        color:#333333;
        display: inline-block;
        height: @height13;
        line-height: @height13;
        text-align: center;
        text-decoration: none;
        width:100px;
        &:active {
            border-bottom: none;
            border:1px solid rgba(137, 228, 210, 1);
        }
    }
}
#citycontent {
    border: 1px solid @color10;
    height: auto;
    margin:0 auto;
    width:688px;
}

#searchdiv {
    display: inline-block;
    height: @height12;
    margin-right: 100px;
    position:relative;
    width: @width12;

    .search {
    color: #999999;
    font-size: 16px;
    position: absolute;
    right:-160px;
    top:17px;
    }
    
    #search {
    border-radius:20px;
    border:1px solid @color10;
    height:@height12;
    outline: none;
    padding-left:10px;
    width:@width12*2;
}
}

   
.hot {
    color:rgba(137, 228, 210, 1);
}
.rightsection {
    display: inline-block;
    height:@height10;
    margin-left: 10px;
    overflow: auto;
    width:500px;
}
.selectedcity {
    border-bottom: 1px solid @color10;
    line-height: @height13;
    margin-bottom: 10px;
    p {
        display: inline-block;
        font-size: 16px;
        margin-right: 40px;
        text-align: center;
        width:@width11;
    }
}
.topsection {
    border-bottom: 1px solid @color10;
    line-height: @height13;
    
    p {
        display: inline-block;
        font-size: 16px;
        margin-right: 40px;
        text-align: center;
        width:@width11;
    }
    
    img{
        width:15px;
        height:15px;
        margin-left: 10px;
        opacity: 0.3;
    }
}
.selectedcity>span {
    background:rgba(137, 228, 210, 1);
    color:@color11;
    display: inline-block;
    height:@height11;
    line-height: @height11;
    margin-left: 20px;
    padding-left: 20px;
    padding-right: 20px;
    text-align: center;
}
.deletecity {
    display: inline-block;
    margin-left: 5px;
}
.button {
    background:rgba(137, 228, 210, 1);
    border-radius:10px;
    border:none;
    color: @color11;
    height:@height11;
    line-height: @height11;
    width:80px;
    margin-left: 85px;
}
.citycontent {
    display: inline-block;
    width: 50%;
    input[type='checkbox'] {
        height:@height12;
        margin-top:10px;
        vertical-align: middle;
        width:20px;
    }
    span {
        vertical-align: middle;
    }
    label {
        vertical-align: middle;
    }
}