.title{
	display:flex;

	}

.title .left{
	flex:1 1 auto;
	font-size: 24px;
	font-weight: 700;
	}


.title .left span{
	display:inline-block;
	font-size: 16px;
	line-height: 29px;
	color:var(--gray5);
	margin-left: 12px;
	}
	

.title .left span a{
	display:inline-block;
	font-size: 16px;
	line-height: 29px;
	color:var(--gray7);
	margin-left: 0px;
	}
	
.title .right{
	display:flex;
	}

.title .dt{
	display:none;
	}


.title .right span{
	display:inline-block;
	color:var(--gray4);
	height:24px;
	line-height: 24px;
	margin-right: 8px;
	}


.title .right a.addwide {
    display: inline-block;
	height:24px;
    border-radius: 24px;
    color: var(--white);
    transition:.2s;
    background-color: var(--black);
    border:1px solid var(--black);
    font-size: 16px;
    font-weight: 500;
    text-align: center;
    line-height: 23px;
    padding:0 20px;
	}
.title .right a.addwide:hover{
	background-color: var(--brand);
	border:1px solid var(--brand);
	color: var(--white);
	}
	
	
.title .right a.add {
    display: inline-block;
	width:74px;
	height:24px;
    border-radius: 24px;
    color: var(--white);
    transition:.2s;
    background-color: var(--black);
    border:1px solid var(--black);
    font-size: 16px;
    font-weight: 500;
    text-align: center;
    line-height: 23px;
	}
.title .right a.add:hover{
	background-color: var(--brand);
	border:1px solid var(--brand);
	color: var(--white);
	}


.title .right a.close {
    display: inline-block;
	width:24px;
	height:24px;
    border-radius: 24px;
    color: var(--white);
    transition:.2s;
    background-color: var(--black);
    border:1px solid var(--black);
    background-image: url(../svg/close.svg);
    background-repeat: no-repeat;
    background-position: left center;
    margin-left: 4px;
	}
	
.title .right a.close:hover{
	background-color: var(--brand);
	border:1px solid var(--brand);
	color: var(--white);
	}
	


.title .right a.upgrade {
    display: inline-block;
	width:100px;
	height:24px;
    border-radius: 24px;
    color: var(--white);
    transition:.2s;
    background-color: var(--black);
    border:1px solid var(--black);
    font-size: 16px;
    font-weight: 500;
    text-align: center;
    line-height: 23px;
	}
.title .right a.upgrade:hover{
	background-color: var(--brand);
	border:1px solid var(--brand);
	color: var(--white);
	}
	

.ti-switch-on{
	display:inline-block;
	font-size: 14px;
	color:var(--black);
	padding:0 8px;
	}
.ti-switch{
	display:inline-block;
	font-size: 14px;
	color:var(--gray4);
	padding:0 8px;
	}
.ti-switch:hover{
	text-decoration: underline;
	}

	
	
/*
.title .right a.close {
    display: inline-block;
	width:24px;
	height:24px;
    border-radius: 24px;
    color: var(--white);
    transition:.2s;
    background-color: var(--teal5);
    border:1px solid var(--teal5);
    font-size: 23px;
    text-align: center;
    line-height: 21px;
	}
	
.title .right a.close:hover{
	background-color: var(--teal6);
	border:1px solid var(--teal6);
	color: var(--white);
	}
*/





.subtitle{
	display:flex;
	background-color: var(--white);
	}
	
.subtitle .left{
	flex: 1 1 auto;
	}
.subtitle .left a{
	display:inline-block;
	line-height: 31px;
	font-size: 16px;
	padding:0 10px;
	color:var(--gray4);
	border-bottom: 1px solid var(--white);
	}
.subtitle .left a:hover{
	border-bottom: 1px solid var(--gray3);
	}
.subtitle .left a.selected{
	color:var(--gray8);
	}
.subtitle .left a.selected:hover{
	border-bottom: 1px solid var(--white);
	}



.subtitle .left div{
	display:inline-block;
	line-height: 31px;
	font-size: 16px;
	padding:0 10px;
	color:var(--gray4);
	border-bottom: 1px solid var(--white);
	}
.subtitle .left div:hover{
	border-bottom: 1px solid var(--white);
	}
.subtitle .left div.selected{
	color:var(--gray8);
	}
.subtitle .left div.selected:hover{
	border-bottom: 1px solid var(--white);
	}



.subtitle .right{
	flex: 0 0 auto;
	text-align: right;
	}


.subtitle .dt{
	display:none;
	}
@media only screen and (min-width: 768px){
.subtitle .dt{
	display:block;
	}
}









.title .left{
	display:flex;
	}
	
.title .left h2{
	display:inline-block;
	font-weight: 700;
	max-width: 240px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	}
	

@media only screen and (min-width: 1088px){
.title .left h2{
	max-width: 400px;
	}
}

.title .left a.subtitle{
	font-size: 18px;
	line-height: 30px;
	}

	
.arrows2 {
    display: flex;
    height: 32px;
    width: 69px;
    margin-right: 10px;
	}
	
a.arrowleft {
    display: inline-block;
    line-height: 30px;
    height: 30px;
    width: 30px;
    border: 1px solid var(--gray2);
    border-radius: 1px;
    background-image: url(../svg/arrow_left.svg);
    background-repeat: no-repeat;
    background-position: left center;
    margin-right: 5px;
	}
	
a.arrowleft:hover{
	border: 1px solid var(--gray5);
	}


div.arrowleft{
	display:inline-block;
	line-height: 30px;
	height:30px;
	width:30px;
	border:1px solid var(--gray2);
	border-radius: 1px;
	margin-right: 5px;
	}
	
	
a.arrowright {
    display: inline-block;
    line-height: 30px;
    height: 30px;
    width: 30px;
    border: 1px solid var(--gray2);
    border-radius: 1px;
    background-image: url(../svg/arrow_right.svg);
    background-repeat: no-repeat;
    background-position: left center;
	}

a.arrowright:hover{
	border: 1px solid var(--gray5);
	}

div.arrowright{
	display:inline-block;
	line-height: 30px;
	height:30px;
	width:30px;
	border:1px solid var(--gray2);
	border-radius: 1px;
	}



@media only screen and (min-width: 1088px){
.title .dt{
	display:inline-block;
	}
}




.rangebtns{
	display: inline-block;
	padding: 10px 0;
	text-align: right;
	line-height: 32px;
	}
.title_range{
	color:var(--gray4);
	}
.title_range a {
	display: inline-block;
	padding: 0 6px;
	line-height: 32px;
	font-size: 16px;
	color:var(--gray4);
	}
.title_range a:hover {
	text-decoration: underline;
	}
.title_range div {
	display: inline-block;
	padding: 0 6px;
	line-height: 32px;
	font-size: 16px;
	color:var(--gray7);
	}