:root{
    --xweb-max-width: 1280px;
    --xweb-background: #fdfdfd;
    --xweb-font: 14px;
}



.xweb-frame{
    display:block;
    background: var(--xweb-background);
    max-width: var(--xweb-max-width);
    border: 1px solid #dae5ed;
    margin: 0 auto;
}

.xweb-header-frame{
    display: inline-block;
    position: relative;
    width: 100%;
    height: 40px;
    border-bottom: 1px solid #dae5ed;
    font-family: Arial, sans-serif;
}

.xweb-header-title,
.xweb-tab-title{
    display: block;
    font-size: var(--xweb-font);
    width: 200px;
    padding-top: 10px;
    padding-bottom:10px;
}

.xweb-tab-title{
    position: absolute;
    top: 0;
    left: 10px;
}

.xweb-header-title{
    color: #2c2c2c;
    font-weight: 600;
    text-align: center;
    margin: 0 auto;
}

.xweb-tab-btn-return,
.xweb-tab-btn-edit{
    display:block;
    position: absolute;
    box-sizing: border-box;
    width:40px;
    height:40px;
    cursor:pointer;
}

.xweb-tab-btn-edit{
    top: 0;
    right: 0;
}

.xweb-tab-btn-return{
    top: 0;
    left: 0;
}

.xweb-tab-inframe{
    max-width: var(--xweb-max-width);
    height: auto;
    position: relative;
    overflow: hidden;
}

.xweb-tab-container{    
    display: block;
    position: absolute;
    background: var(--xweb-background);
    width:100%;
    max-width: var(--xweb-max-width);
    top: 0;
    left: 0;
    transition: transform 0.5s ease;
    box-sizing: border-box;
}

.xweb-tab-container.hidden{
    transform: translateX(-100%);
}

.xweb-content-container{
    display: block;
    max-width: var(--xweb-max-width);
    height:100%;
    max-height:320px;
    position: relative;
    overflow: hidden;
}

.xweb-tab-content{
    display: block;
    width:100%;
    max-width: var(--xweb-max-width);
    height:400px;
    position: absolute;
    top: 0;
    right: -100%;
    box-sizing: border-box;
    background: var(--xweb-background);
    transition: right 0.5s ease;
    
}

.xweb-tab-content.active{
    right: 0;
}

.xweb-tab-content-frame{
    display: block;
    width:100%;
    max-width: var(--xweb-max-width);
    box-sizing: border-box;
    padding: 10px;
}

.xweb-tab {
    display: inline-block;
    position: relative;
	width: 100%;
    max-width: var(--xweb-max-width);
	height: 40px;
	color: #84929d;
	border-bottom: 1px solid #dae5ed;
	padding: 10px 14px;
	cursor: pointer;
    box-sizing: border-box;
    z-index:99;
}

.xweb-tab.active {
}

.xweb-tab:hover {
	color: #52a2e0;
	background: #f8f9fa;
}

.xweb-tab span {
	font-family: Arial, sans-serif;
}


.xweb-tab-view {
	display: block;
	float: left;
	width: 340px;
	color: #4c4c4c;
	font-size: var(--xweb-font);
	overflow: hidden;
	text-overflow: ellipsis;
}