.ubd-chars {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
width: 700px;
margin: 20px auto;
font-family: "Play";
font-size: 14px;
color: #fff;
padding: 0 50px;
}
.ubd-char-box {
flex: 0 0 220px;
height: 120px;
background: linear-gradient(to right, #16222A 0%, #3A6073 51%, #16222A 100%);
display: flex;
flex-flow: column nowrap;
align-items: center;
padding: 4px;
box-sizing: border-box;
border-radius: 3px;
margin-bottom: 10px;
cursor: pointer;
transition: all 0.5s ease-in-out 0s;
}
.ubd-char-box:hover {
background: linear-gradient(to right, #16222A 0%, #3A6073 98%, #16222A 100%);
}
.char-lev-wrapper {
flex: 0 0 25px;
width: 100%;
text-align: right;
text-shadow: -3px 3px 3px rgba(0,0,0,.7);
}
.char-bs {
flex: 0 0 40px;
width: 40px;
background-size: 40px;
background-repeat: no-repeat;
box-shadow: -3px 3px 5px 0 rgba(0,0,0,.7);
}
.char-name {
padding-top: 15px;
text-shadow: -3px 3px 3px rgba(0,0,0,.7);
}
.ubd-char-box.selected {
box-shadow: 0 0 15px 0 rgba(255,255,255,.7);
}
.ubd-select-core .selected,
.ubd-select-rp .selected {
box-shadow: 0 0 15px 3px rgba(255,255,255,1);
}
.unbind-table {
width: 720px;
margin: 20px auto;
font-family: "Play";
font-size: 14px;
color: #fff;
display: flex;
flex-flow: column nowrap;
}
.unbind-tr {
flex: 0 0 100px;
padding: 0;
display: flex;
flex-flow: row nowrap;
margin-bottom: 5px;
overflow: hidden;
position: relative;
}
.unbind-tr a {
font-family: "Play";
font-size: 14px;
font-weight: 400;
color: #23f791;
}
.ubd-row1 {
width: 720px;
height: 100px;
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
position: absolute;
}
.ubd-row2 {
width: 720px;
height: 100px;
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
position: absolute;
right: -720px;
}
.ubd-select-core,
.ubd-select-rp {
display: flex;
flex-flow: row nowrap;
width: 110px;
justify-content: space-between;
}
.ubd-select-core input {
display: none;
}
.ubd-select-core>.ub-stone-pic,
.ubd-select-rp>.ub-stone-pic {
width: 50px;
height: 50px;
background-size: 50px;
background-repeat: no-repeat;
background-position: center;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.ubd-select-rp>.ub-stone-pic {
cursor: auto;
}
.tr-binded,
.tr-unbinded,
.tr-broken {
background: linear-gradient(to right, #16222A 0%, #20323d 30%, #3A6073 51%, #20323d 70%, #16222A 100%);
}
.tr-binded:hover,
.tr-unbinded:hover,
.tr-broken:hover {
background: linear-gradient(to right, #16222A 0%, #3A6073 98%, #16222A 100%);
}
.unbind-td {
padding: 7px;
flex: 0 0 auto;
height: 85px;
display: flex;
flex-flow: column nowrap;
justify-content: center;
}
.ubd-name {
flex: 1 0 50%;
padding-left: 20px;
}
.ubd-mglass, .ubd-action {
flex: 0 0 80px;
}
.ubd-action {
cursor: pointer;
}
.ubd-confirm {
padding-right: 20px;
}
.ubd-confirm button {
margin: 3px;
background: #0f0f11;
box-shadow: none;
width: 105px;
}
.ubd-confirm button:hover {
color: #fff;
box-shadow: inset 0 0 2px 1px rgba(255,255,255,0.7);
}
.item-name {
text-shadow: -3px 3px 5px rgba(0,0,0,.9);
font-weight: 700;
}
.bind-txt {
color: gray;
text-shadow: -3px 3px 5px rgba(0,0,0,.9);
}
.force_name {
color: #30bad9;
}
.coreSlot {
box-shadow: -3px 3px 5px 0 rgba(0,0,0,.7);
width: 24px;
height: 24px;
margin-top: 4px;
margin-right: 4px;
display: inline-block;
background-size: 24px;
position: relative;
}
.extended::after {
	text-shadow: -3px 3px 5px rgba(0,0,0,.9);
	content: "+";
	color: #fff;
	position: absolute;
	bottom: -12px;
	right: -3px;
	font-size: 30px;
	font-weight: 500px;
}
.remove-slot::before {
	content: "";
	background-size: 24px;
	background-repeat: no-repeat;
	width: 24px;
	height: 24px;
	display: inline-block;
	vertical-align: middle;
	position: absolute;
}
.show-details,
.ubind-action {
background-repeat: no-repeat;
background-size: 64px;
width: 64px;
height: 64px;
margin: 0 auto;
}
#item-tooltip {
font-family: "Play";
font-size: 14px;
color: #fff;
z-index: 9999;
position: absolute;
display: none;
top: 0px;
left: 0px;
border: 1px solid #888;
box-shadow: 0 1px 2px #555;
min-width: 300px;
max-width: 400px;
background: rgba(0,0,0,.7);
padding: 8px;
display: flex;
flex-flow: column nowrap;
align-items: center;
}
#item-tooltip hr {
color: #888;
height: 1px;
width: 80%;
margin: 20px auto;
}
#ubd-wrapper {
overflow: hidden;
width: 720px;
margin: 0 auto;
}
.ub-iterm-desc {
display: block;
}
.ub-stone-pic::after {
content: ""; 
display: block;
width: 40px;
height: 40px;
background-size: 36px;
background-position: center;
background-repeat: no-repeat;
}

.ustone-count {
position: absolute;
bottom: 3px;
right: 5px;
font-family: "Play";
font-size: 14px;
color: #fff;
text-shadow: -3px 3px 5px rgba(0,0,0,.9);
}




.ub-alert {
width: 100%;
height: 100%;
z-index: 100000;
background-color: rgba(0,0,0,.7);
position: absolute;
top: 0;
left: 0;
}
.ub-alert-main {
font-family: "Play";
font-size: 17px;
padding: 8px;
background-color: #000;
box-shadow: 0 0 2px 5px rgba(255, 255, 255, .9);
color: #fff;
display: flex;
flex-flow: column nowrap;
align-content: center;
justify-content: center;
}


/*UNBIND MODAL*/

.ub-alert {
	display: none;
}