/*--------------------------------------------------------------
>>> APPEARANCE:
----------------------------------------------------------------
/*--------------------------------------------------------------
# BUTTONS
--------------------------------------------------------------*/
.satus-section--appearance {
	position: relative;

	width: 100%; max-width: 900px;
	height: 100%;
	margin: auto;
}
.satus-section--appearance .satus-button {
	position: absolute;
	display: block;

	transition: transform .5s, box-shadow .5s;
	transform: scale(1);
	text-align: center;

	border: 1px solid var(--it-appearance-shadow-color);
	border-radius: 3px; 
	background: var(--satus-section-background);
	box-shadow: 0 0 2px 0 rgb(0 0 0 / 0%);
}
.satus-section--appearance .satus-button:hover {
	z-index: 9;

	transition-duration: .25s;
	transform: scale(1.03) translate(-8px, -4px);

	box-shadow: 1px 1px 0 0 var(--main-appearance-shadow, var(--it-appearance-shadow-color)), 2px 2px 0 0 var(--main-appearance-shadow, var(--it-appearance-shadow-color)), 3px 3px 0 0 var(--main-appearance-shadow, var(--it-appearance-shadow-color)), 4px 4px 0 0 var(--main-appearance-shadow, var(--it-appearance-shadow-color)), 5px 6px 4px 0 rgba(0, 0, 0, .1);
}
.satus-section--appearance .satus-button--header {
	top: 16px;
	left: 16px;
	font-size: 11px;
	width: calc(100% - 32px);
	height: 29px;
	min-height: auto;
}
.satus-section--appearance .satus-button--header:hover {
	transform: scale(1.03) translate(-9px, -4px);
}
.satus-section--appearance .satus-button--player {
	top: 53px;
	left: 8px;
	width: calc(70% - 32px);
	height: 96px;
	min-height: auto;
	font-size: 17px;
	color: #eee;
	border-color: #333;
	background-color: #444;
}

.satus-section--appearance .satus-button--player .label {
	color: #fff;
}

.satus-section--appearance .satus-button--player:hover {
	transform: scale(1.03) translate(-7px, -4px);

	box-shadow: 1px 1px 0 0 #333, 2px 2px 0 0 #333, 3px 3px 0 0 #333, 4px 4px 0 0 #333, 5px 6px 4px 0 rgba(0, 0, 0, .1);
}

.satus-section--appearance .satus-button--details {
	top: 157px;
	left: 16px;
	font-size: 14px;
	width: calc(39.5% - 32px);
	height: 40px;
	min-height: auto;
}

.satus-section--appearance .satus-button--detailButton {
	top: 157px;
	left: 112px;
	font-size: 14px;
	width: calc(40% - 32px);
	height: 40px;
	min-height: auto;
}

.satus-section--appearance .satus-select--description {
	top: 199px;
	left: 16px;
	font-size: 14px;
	width: calc(70% - 32px);
	height: 42px;
	min-height: auto;
	
	display: justify;
	padding: 19px;
	position: absolute;
	transition: transform .5s, box-shadow .5s;
	transform: scale(1);
	text-align: center;

	border: 1px solid var(--it-appearance-shadow-color);
	border-radius: 3px; 
	background: var(--satus-section-background);
	box-shadow: 0 0 2px 0 rgb(0 0 0 / 0%);

}

.satus-section--appearance .satus-button--comments {
	top: 243px;
	left: 16px;
	width: calc(70% - 32px);
	height: 50px;
	min-height: auto;
}

.satus-section--appearance .satus-switch--popupAd {
	top: 297px;
	left: 16px;
	font-size: 9px;
	width: calc(44% - 32px);
	min-height: auto;
	height: 23px;  
		
	padding:5px;
	position: absolute;
	transition: transform .5s, box-shadow .5s;
	transform: scale(1);
	text-align: center;

	border: 1px solid var(--it-appearance-shadow-color);
	border-radius: 3px; 
	background: var(--satus-section-background);
	box-shadow: 0 0 2px 0 rgb(0 0 0 / 0%);
	i {opacity:0.7; filter:grayscale(0.9)}
} 

.satus-section--appearance .satus-button--sidebar {
	top: 53px;
	left: calc(70% - 8px);
	width: calc(30% - 8px);
	height: 220px;
}
/*--------------------------------------------------------------
# CUSTOM PLAYER SIZE
--------------------------------------------------------------*/
.satus-section--custom-player-size {
	position: relative;

	display: flex;
	visibility: hidden;
	overflow: hidden;

	height: 0;
	padding: 0 8px;

	transition: 400ms;

	background: rgba(var(--satus-light), .04);
	box-shadow: inset 0 3px 4px -4px, inset 0 -3px 4px -4px;

	flex-wrap: nowrap;
	align-items: center;
}

.satus-select--player-size[data-value='custom']+.satus-section--custom-player-size {
	visibility: visible;

	height: 68px;
	padding: 16px 8px;
}

.satus-section--custom-player-size>.satus-text-field {
	width: auto;
	min-width: unset;

	text-align: center;

	flex: 1;
}

.satus-section--custom-player-size>span {
	margin: 0 8px;

	content: 'x';
}

