.ui-account-period-selector{
    font-size:14px;
}

.ui-account-period-selector .modal-dialog{width:900px;}

.ui-account-period-selector .modal-body{
    position:relative;
    height:400px;
    padding:0  0 0 400px;
}
.ui-account-period-selector .account-period-bar-text{
    height:40px;
    line-height: 40px;
    background-color:#f3f4f8;
    color:#8592a3;
    padding:0 20px;
    font-size:14px;
}
/* ======================================== ui-account-period-available-list ======================================== */
.ui-account-period-selector .ui-account-period-available-list{
    position:absolute;
    left:0;
    top:0;
    bottom:0;
    width:400px;
    border-right:1px solid #dae1e7;
}

.ui-account-period-selector .account-period-text{
    position:relative;
    height:40px;
    line-height: 40px;
    font-size:16px;
    padding-left:27px;
}

.ui-account-period-selector .account-period-text:before{
    content:"";
    position:absolute;
    left:20px;
    top:0;
    bottom:0;
    width:3px;
    height:16px;
    background-color:#f08200;
    margin:auto;
}

.ui-account-period-selector .ui-account-period-available-list ul{
    height:320px;
    overflow: auto;
    padding:0 20px 20px 20px;
}
.ui-account-period-selector .ui-account-period-available-list ul li{
    height:32px;
    line-height: 32px;
    cursor: pointer;
    padding:0 10px;
    font-size:14px;
}

.ui-account-period-selector .ui-account-period-available-list ul li:hover,
.ui-account-period-selector .ui-account-period-available-list ul li.selected{
    background-color:#dae1e7;
}

/* ======================================== ui-account-period-selected-list ======================================== */
.ui-account-period-selector .ui-account-period-selected-list ul{
    height:360px;
    overflow: auto;
    padding:20px;
}
.ui-account-period-selector .ui-account-period-selected-list ul li{
    position:relative;
    height:32px;
    line-height: 32px;
    cursor: pointer;
    padding:0 40px 0 10px;
    border-left:1px solid #dae1e7;
    border-right:1px solid #dae1e7;
    font-size:14px;
}
.ui-account-period-selector .ui-account-period-selected-list ul li:after{
    content:"";
    position:absolute;
    right:20px;
    top:0;
    bottom:0;
    width:16px;
    height:16px;
    background:url(../../images/component/user_selector_check_press.png) no-repeat;
    background-size:contain;
    margin:auto;
}

.ui-account-period-selector .ui-account-period-selected-list ul li:first-child{border-top:1px solid #dae1e7;}
.ui-account-period-selector .ui-account-period-selected-list ul li:last-child{border-bottom:1px solid #dae1e7;}

.ui-account-period-selector .ui-account-period-selected-list ul li:hover{
    background-color:#dae1e7;
}