xn-directive-lookup/directive/style.css

xn-directive-lookup

.xn-account-layout{
    position: relative;
}
.xn-account-layout .account-input-box{
    position: relative;
    width: 100%;
}
.xn-account-layout .account-input-box .delete-icon{
    position: absolute;
    top: 8px;
    overflow: hidden;
    text-indent: -999px;
    right: 35px;
    width: 14px;
    height: 14px;
    line-height: 28px;
    display: block;
    text-align: center;
    cursor: pointer;
    background: url("https://cdn.xiniunet.com/img/lookupDelete.png")  center 50% no-repeat #fff;
    font-family: Arial;
    color: #999;
    border-radius: 50%;
}

.xn-account-layout .account-input-box .account-input{
    width: 100%;
    height: 30px;
    border-radius: 0;
    font-size: 14px;
    line-height: 22px;
    border: solid 1px #ddd;
    padding: 4px 32px 4px 5px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.xn-account-layout .account-input-focus .account-input{
    border: 1px solid #3399ff;
}
.xn-account-layout .account-input-box .expand{
    position: absolute;
    right: 0;
    top:0;
    width: 30px;
    height: 30px;
    border-left: 1px solid #ddd;
    display: block;
    text-align: center;
    cursor: pointer;
}
.xn-account-layout .account-input-box .expand::before {
    width: 10px;
    height: 10px;
    transform:rotate(-45deg);
    content: "";
    display: inline-block;
    border-left: 3px solid #ddd;
    border-bottom: 3px solid #ddd;
    margin-top: 8px;
}
.xn-account-layout .account-input-box .expand-active::before {
    transform:rotate(135deg);
    margin-top: 12px;
}
.xn-account-layout .account-list-layout{
    position: absolute;
    left: 0;
    height: auto;
    margin-top: -1px;
}
.xn-account-layout .account-list-layout .account-list{
    position: relative;
    bottom: -1px;
    width: 560px;
    min-height:122px;
    padding:0 10px 0px 10px;
    border: 1px solid #ddd;
    background-color: #fff;
    z-index: 99;
}
.xn-account-layout .account-list-layout .account-list .account-description{
    width:100%;
    height: 40px;
    line-height: 40px;
    margin: auto;
    border-bottom: 1px solid #e5e5e5;
    font-size: 14px;
    color: #666;
}
.xn-account-layout .account-list-layout .account-list .account-type-tabs{
    width:100%;
    margin: 10px auto;
    height: 30px;
    border-bottom: 1px solid #e5e5e5;
}
.xn-account-layout .account-list-layout .account-list .account-type-tab{
    float:left;
    padding: 0 15px;
    height: 30px;
    line-height: 30px;
    font-size: 14px;
    color: #333;
    text-align: center;
    border: 1px solid #ddd;
    margin-right: 10px;
    background-color: #eee;
    cursor: pointer;
}
.xn-account-layout .account-list-layout .account-list .account-type-tab:last-child{
    margin-right: 0px;
}
.xn-account-layout .account-list-layout .account-list .account-type-tab-active{
    border-bottom: 0px;
    background-color: #fff;
}
.xn-account-layout .account-list-layout .account-list .account-items-box{
    height: 330px;
    overflow-y: auto;
}
.xn-account-layout .account-list-layout .account-list .account-items-box .account-item{
    float: left;
    width: 215px;
    height: 30px;
    line-height: 30px;
    font-size: 14px;
    color: #666;
    cursor: pointer;
    margin-bottom:2px;
}
.xn-account-layout .account-list-layout .account-list .account-items-box .account-item:nth-child(2n){
    margin-left: 5px;
}
.xn-account-layout .account-list-layout .account-list .account-items-box .account-item:hover{
    background: #3399ff;
    color: #fff;
}
.xn-account-layout .account-list-layout .account-list .account-items-box .account-item-active{
    background: #3399ff;
    color: #fff;
}
.xn-account-layout .account-list-layout .account-list .account-items-box .account-item>span{
    display: inline-block;
    float: left;
}
.xn-account-layout .account-list-layout .account-list .account-items-box .account-item .account-name{
    margin-left: 24px;
    max-width: 150px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.xn-account-layout .account-match-layout{
    position: absolute;
    left: 0;
    height: auto;
    margin-top: 0px;
    width: 100%;
}
.xn-account-layout .account-match-layout .account-match-list{
    position: absolute;
    min-width: 300px;
    min-height:122px;
    padding: 0px 10px;
    border: 1px solid #ddd;
    background-color: #fff;
    z-index: 99;
}
.xn-account-layout .account-match-layout .account-match-list .account-match-box{
    height: 300px;
    overflow-y: auto;
}
.xn-account-layout .account-match-layout .account-match-list  .account-match-box .account-match-item{
    height: 30px;
    line-height: 30px;
    font-size: 14px;
    color: #666;
    cursor: pointer;
    margin-bottom:2px;
}
.xn-account-layout .account-match-layout .account-match-list .account-match-box .account-match-item>span{
    display: inline-block;
    float: left;
}
.xn-account-layout .account-match-layout .account-match-list .account-match-box .account-match-item:hover{
    background: #3399ff;
    color: #fff;
}
.xn-account-layout .account-match-layout .account-match-list .account-match-box .account-match-active{
    background: #3399ff;
    color: #fff;
}

.xn-account-layout .account-match-layout .account-match-list .account-match-box .account-match-item .account-match-name{
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.xn-account-layout .account-items-box::-webkit-scrollbar {
    width: 14px;
    height: 14px;
}
.xn-account-layout .account-items-box::-webkit-scrollbar-track,
.xn-account-layout .account-items-box::-webkit-scrollbar-thumb {
    border-radius: 999px;
    border: 5px solid transparent;
}
.xn-account-layout .account-items-box::-webkit-scrollbar-track {
    box-shadow: 1px 1px 5px rgba(0,0,0,.2) inset;
}
.xn-account-layout .account-items-box::-webkit-scrollbar-thumb {
    min-height: 20px;
    background-clip: content-box;
    box-shadow: 0 0 0 5px rgba(0,0,0,.2) inset;
}
.xn-account-layout .account-items-box::-webkit-scrollbar-corner {
    background: transparent;
}
.xn-account-layout .account-match-box::-webkit-scrollbar {
    width: 14px;
    height: 14px;
}
.xn-account-layout .account-match-box::-webkit-scrollbar-track,
.xn-account-layout .account-match-box::-webkit-scrollbar-thumb {
    border-radius: 999px;
    border: 5px solid transparent;
}
.xn-account-layout .account-match-box::-webkit-scrollbar-track {
    box-shadow: 1px 1px 5px rgba(0,0,0,.2) inset;
}
.xn-account-layout .account-match-box::-webkit-scrollbar-thumb {
    min-height: 20px;
    background-clip: content-box;
    box-shadow: 0 0 0 5px rgba(0,0,0,.2) inset;
}
.xn-account-layout .account-match-box::-webkit-scrollbar-corner {
    background: transparent;
}




.xn-bank-layout{
    position: relative;
}
.xn-bank-layout .bank-input-box{
    position: relative;
    width: 100%;
}
.xn-bank-layout .bank-input-box .delete-icon{
    position: absolute;
    top: 8px;
    overflow: hidden;
    text-indent: -999px;
    right: 35px;
    width: 14px;
    height: 14px;
    line-height: 28px;
    display: block;
    text-align: center;
    cursor: pointer;
    background: url("https://cdn.xiniunet.com/img/lookupDelete.png") center 50% no-repeat #fff;
    font-family: Arial;
    color: #999;
    border-radius: 50%;
}

.xn-bank-layout .bank-input-box .bank-input{
    width: 100%;
    height: 30px;
    border-radius: 0;
    font-size: 14px;
    line-height: 22px;
    border: solid 1px #ddd;
    padding: 4px 32px 4px 5px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.xn-bank-layout .bank-input-focus .bank-input{
    border: 1px solid #3399ff;
}
.xn-bank-layout .bank-input-box .expand{
    position: absolute;
    right: 0;
    top:0;
    width: 30px;
    height: 30px;
    border-left: 1px solid #ddd;
    display: block;
    text-align: center;
    cursor: pointer;
}
.xn-bank-layout .bank-input-box .expand::before {
    width: 10px;
    height: 10px;
    transform:rotate(-45deg);
    content: "";
    display: inline-block;
    border-left: 3px solid #ddd;
    border-bottom: 3px solid #ddd;
    margin-top: 8px;
}
.xn-bank-layout .bank-input-box .expand-active::before {
    transform:rotate(135deg);
    margin-top: 12px;
}
.xn-bank-layout .bank-list-layout{
    position: absolute;
    left: 0;
    height: auto;
    margin-top: -1px;
}
.xn-bank-layout .bank-list-layout .bank-list{
    position: relative;
    bottom: -1px;
    width: 400px;
    min-height:122px;
    padding:0 10px 0px 10px;
    border: 1px solid #ddd;
    background-color: #fff;
    z-index: 99;
}
.xn-bank-layout .bank-list-layout .bank-list .bank-description{
    width:100%;
    height: 40px;
    line-height: 40px;
    margin: auto;
    border-bottom: 1px solid #e5e5e5;
    font-size: 14px;
    color: #666;
}
.xn-bank-layout .bank-list-layout .bank-list .bank-tabs{
    width:100%;
    margin: 10px auto;
    height: 30px;
    border-bottom: 1px solid #e5e5e5;
}
.xn-bank-layout .bank-list-layout .bank-list .tab-item{
    float:left;
    padding: 0 15px;
    height: 30px;
    line-height: 30px;
    font-size: 14px;
    color: #333;
    text-align: center;
    border: 1px solid #ddd;
    margin-right: 10px;
    background-color: #eee;
    cursor: pointer;
}
.xn-bank-layout .bank-list-layout .bank-list .tab-item:last-child{
    margin-right: 0px;
}
.xn-bank-layout .bank-list-layout .bank-list .tab-active{
    border-bottom: 0px;
    background-color: #fff;
}
.xn-bank-layout .bank-list-layout .bank-list .bank-items-box{
    height: 330px;
    overflow-y: auto;
}
.xn-bank-layout .bank-list-layout .bank-list .bank-items-box .bank-item{
    float: left;
    width: 179px;
    height: 30px;
    line-height: 30px;
    font-size: 14px;
    color: #666;
    cursor: pointer;
    margin-bottom:2px;
}
.xn-bank-layout .bank-list-layout .bank-list .bank-items-box .bank-item:nth-child(2n){
    margin-left: 5px;
}
.xn-bank-layout .bank-list-layout .bank-list .bank-items-box .bank-item>span{
    display: inline-block;
    float: left;
}

.xn-bank-layout .bank-match-layout{
    position: absolute;
    left: 0;
    height: auto;
    margin-top: 0px;
    width: 100%;
}
.xn-bank-layout .bank-match-layout .bank-match-list{
    position: absolute;
    min-width: 300px;
    min-height:122px;
    padding: 0px 10px;
    border: 1px solid #ddd;
    background-color: #fff;
    z-index: 99;
}
.xn-bank-layout .bank-match-layout .bank-match-list .bank-match-box{
    height: 300px;
    overflow-y: auto;
}
.xn-bank-layout .bank-match-layout .bank-match-list  .bank-match-box .bank-match-item{
    height: 30px;
    line-height: 30px;
    font-size: 14px;
    color: #666;
    cursor: pointer;
    margin-bottom:2px;
}
.xn-bank-layout .bank-match-layout .bank-match-list .bank-match-box .bank-match-item>span{
    display: inline-block;
    float: left;
}

.xn-bank-layout .bank-match-layout .bank-match-list .bank-match-box .bank-match-item .bank-match-name{
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.xn-bank-layout .bank-name{
    width:100%;
    height: 30px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.xn-bank-layout .bank-name:hover{
    background: #3399ff;
    color: #fff;
}

.xn-bank-layout .bank-active{
    background: #3399ff;
    color: #fff;
}

.xn-bank-layout .bank-name .bank-icon{
    margin-left: 5px;
    float: left;
    width: 20px;
    margin-right: 5px;
    height: 30px;
    overflow: hidden;
    background: url("https://cdn.xiniunet.com/img/bank-icon.png") left 5px no-repeat;
}

.xn-bank-layout .bank-name:hover .bank-icon{
    background-position: -50px 5px;
}
.xn-bank-layout .bank-active .bank-icon{
    background-position: -50px 5px;
}

.xn-bank-layout .bank-name .bank-icon12{ background-position: 0 -45px; }
.xn-bank-layout .bank-name .bank-icon16{ background-position: 0 -95px; }
.xn-bank-layout .bank-name .bank-icon14{ background-position: 0 -145px; }
.xn-bank-layout .bank-name .bank-icon6{ background-position: 0 -195px; }
.xn-bank-layout .bank-name .bank-icon10{ background-position: 0 -245px; }
.xn-bank-layout .bank-name .bank-icon17{ background-position: 0 -295px; }
.xn-bank-layout .bank-name .bank-icon18{ background-position: 0 -345px; }
.xn-bank-layout .bank-name .bank-icon5{ background-position: 0 -395px; }
.xn-bank-layout .bank-name .bank-icon8{ background-position: 0 -445px; }
.xn-bank-layout .bank-name .bank-icon2{ background-position: 0 -495px; }
.xn-bank-layout .bank-name .bank-icon122{ background-position: 0 -545px; }
.xn-bank-layout .bank-name .bank-icon9{ background-position: 0 -595px; }
.xn-bank-layout .bank-name .bank-icon11{ background-position: 0 -645px; }
.xn-bank-layout .bank-name .bank-icon24{ background-position: 0 -695px; }
.xn-bank-layout .bank-name .bank-icon13{ background-position: 0 -745px; }
.xn-bank-layout .bank-name .bank-icon1{ background-position: 0 -795px; }
.xn-bank-layout .bank-name .bank-icon19{ background-position: 0 -845px; }
.xn-bank-layout .bank-name .bank-icon4{ background-position: 0 -895px; }
.xn-bank-layout .bank-name .bank-icon127{ background-position: 0 -945px; }

.xn-bank-layout .bank-name:hover .bank-icon12{ background-position: -50px -45px; }
.xn-bank-layout .bank-name:hover .bank-icon16{ background-position: -50px -95px; }
.xn-bank-layout .bank-name:hover .bank-icon14{ background-position: -50px -145px; }
.xn-bank-layout .bank-name:hover .bank-icon6{ background-position: -50px -195px; }
.xn-bank-layout .bank-name:hover .bank-icon10{ background-position: -50px -245px; }
.xn-bank-layout .bank-name:hover .bank-icon17{ background-position: -50px -295px; }
.xn-bank-layout .bank-name:hover .bank-icon18{ background-position: -50px -345px; }
.xn-bank-layout .bank-name:hover .bank-icon5{ background-position: -50px -395px; }
.xn-bank-layout .bank-name:hover .bank-icon8{ background-position: -50px -445px; }
.xn-bank-layout .bank-name:hover .bank-icon2{ background-position: -50px -495px; }
.xn-bank-layout .bank-name:hover .bank-icon122{ background-position: -50px -545px; }
.xn-bank-layout .bank-name:hover .bank-icon9{ background-position: -50px -595px; }
.xn-bank-layout .bank-name:hover .bank-icon11{ background-position: -50px -645px; }
.xn-bank-layout .bank-name:hover .bank-icon24{ background-position: -50px -695px; }
.xn-bank-layout .bank-name:hover .bank-icon13{ background-position: -50px -745px; }
.xn-bank-layout .bank-name:hover .bank-icon1{ background-position: -50px -795px; }
.xn-bank-layout .bank-name:hover .bank-icon19{ background-position: -50px -845px; }
.xn-bank-layout .bank-name:hover .bank-icon4{ background-position: -50px -895px; }
.xn-bank-layout .bank-name:hover .bank-icon127{ background-position: -50px -945px; }

.xn-bank-layout .bank-active .bank-icon12{ background-position: -50px -45px; }
.xn-bank-layout .bank-active .bank-icon16{ background-position: -50px -95px; }
.xn-bank-layout .bank-active .bank-icon14{ background-position: -50px -145px; }
.xn-bank-layout .bank-active .bank-icon6{ background-position: -50px -195px; }
.xn-bank-layout .bank-active .bank-icon10{ background-position: -50px -245px; }
.xn-bank-layout .bank-active .bank-icon17{ background-position: -50px -295px; }
.xn-bank-layout .bank-active .bank-icon18{ background-position: -50px -345px; }
.xn-bank-layout .bank-active .bank-icon5{ background-position: -50px -395px; }
.xn-bank-layout .bank-active .bank-icon8{ background-position: -50px -445px; }
.xn-bank-layout .bank-active .bank-icon2{ background-position: -50px -495px; }
.xn-bank-layout .bank-active .bank-icon122{ background-position: -50px -545px; }
.xn-bank-layout .bank-active .bank-icon9{ background-position: -50px -595px; }
.xn-bank-layout .bank-active .bank-icon11{ background-position: -50px -645px; }
.xn-bank-layout .bank-active .bank-icon24{ background-position: -50px -695px; }
.xn-bank-layout .bank-active .bank-icon13{ background-position: -50px -745px; }
.xn-bank-layout .bank-active .bank-icon1{ background-position: -50px -795px; }
.xn-bank-layout .bank-active .bank-icon19{ background-position: -50px -845px; }
.xn-bank-layout .bank-active .bank-icon4{ background-position: -50px -895px; }
.xn-bank-layout .bank-active .bank-icon127{ background-position: -50px -945px; }



.xn-bank-layout .bank-items-box::-webkit-scrollbar {
    width: 14px;
    height: 14px;
}
.xn-bank-layout .bank-items-box::-webkit-scrollbar-track,
.xn-bank-layout .bank-items-box::-webkit-scrollbar-thumb {
    border-radius: 999px;
    border: 5px solid transparent;
}
.xn-bank-layout .bank-items-box::-webkit-scrollbar-track {
    box-shadow: 1px 1px 5px rgba(0,0,0,.2) inset;
}
.xn-bank-layout .bank-items-box::-webkit-scrollbar-thumb {
    min-height: 20px;
    background-clip: content-box;
    box-shadow: 0 0 0 5px rgba(0,0,0,.2) inset;
}
.xn-bank-layout .bank-items-box::-webkit-scrollbar-corner {
    background: transparent;
}
.xn-bank-layout .bank-match-box::-webkit-scrollbar {
    width: 14px;
    height: 14px;
}
.xn-bank-layout .bank-match-box::-webkit-scrollbar-track,
.xn-bank-layout .bank-match-box::-webkit-scrollbar-thumb {
    border-radius: 999px;
    border: 5px solid transparent;
}
.xn-bank-layout .bank-match-box::-webkit-scrollbar-track {
    box-shadow: 1px 1px 5px rgba(0,0,0,.2) inset;
}
.xn-bank-layout .bank-match-box::-webkit-scrollbar-thumb {
    min-height: 20px;
    background-clip: content-box;
    box-shadow: 0 0 0 5px rgba(0,0,0,.2) inset;
}
.xn-bank-layout .bank-match-box::-webkit-scrollbar-corner {
    background: transparent;
}