/**
 * @package    Status
 * @subpackage Status
 * @since      1.0.0
 * @version    1.0.0
 * @author     Ehsan Zare <darksider.legend@gmail.com>
 * @link       https://code-path.com
 * @copyright  (c) 2021 Code-path web developing team
 */

/*-------------------------------------------------------------------------*/
/* Status (top)
/*-------------------------------------------------------------------------*/
.section-status {
	padding: 35px 0;
}

/* Status: Ajax
/*---------------------------------------------------------------*/
.section-status [__statusAjax__] {
	width: 100%;
	height: 90px;
	padding: 0 !important;

	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;

	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;

	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
}

/* Status: Button large
/*---------------------------------------------------------------*/
.section-status .btn-large-holder {
	top: -146.5px; /* (button_height / 2) + status_padding_top */
	left: 0;
	right: 0;
	margin: 0 auto;
	position: absolute;
}

/* Status: Toggler
/*---------------------------------------------------------------*/
.section-status .toggler-group {
	width: 100%;
	top: 1.5rem;
	left: 0;
	right: 0;
	margin: 0;
	text-align: center;
}

/* Status: Realm
/*---------------------------------------------------------------*/
.section-status .realm {
	width: 100%;
	height: auto;
	padding: 3.5rem 0 0 0;
	min-height: 90px;
	text-align: center;
	font-family: var(--font-family-primary);
	text-shadow: 0 0 5px rgba(8, 11, 16, 0.6);
}

/* Realm: Name
/*-----------------------------------------------------*/
.section-status .realm .realm-name {
	color: #b8daff;
	font-size: 1.875rem;
	line-height: 1.2;
	font-family: var(--font-family-secondary);
	text-transform: uppercase;
}

/* Realm: Status
/*-----------------------------------------------------*/
.section-status .realm .realm-status {
	color: #6c7c8d;
	font-size: 1rem;
	font-style: italic;
}

.section-status .realm.is-online .realm-status span  {color: #76bd5d;}
.section-status .realm.is-offline .realm-status span {color: #bd5d5d;}

/* Realm: Online
/*-----------------------------------------------------*/
.section-status .realm .realm-online {
	color: #6c7c8d;
	font-size: 1.25rem;
} .section-status .realm .realm-online span {color: #b8daff;}

/* Realm: List
/*-----------------------------------------------------*/
.section-status .realm .realm-list {
	color: #7a8793;
	z-index: 9;
	font-size: 1.25rem;
	font-style: italic;
} .section-status .realm .realm-list span {color: #b1c6d9; font-style: initial;}

/* Realm: Uptime | Desc | Time
/*-----------------------------------------------------*/
.section-status .realm .realm-uptime,
.section-status .realm .realm-desc,
.section-status .realm .realm-time {
	color: #8291a1;
	font-size: 1.25rem;
	font-style: italic;
}

/* Status: Responsive
/*---------------------------------------------------------------*/
@media screen and (min-width: 992px) { /* Desktop */
	/* Status: Toggler
	/*---------------------------------------------------------------*/
	.section-status .toggler-group {
		top: -1rem;
		text-align: right;
	}

	/* Status: Realm
	/*---------------------------------------------------------------*/
	.section-status .realm {
		padding: 0;
	}

	/* Realm: Name | Status | Online
	/*-----------------------------------------------------*/
	.section-status .realm .realm-name,
	.section-status .realm .realm-status,
	.section-status .realm .realm-online {
		text-align: right;
		padding-right: 2rem;
	}

	/* Realm: List
	/*-----------------------------------------------------*/
	.section-status .realm .realm-list {
		text-align: center;
	}

	/* Realm: Uptime | Desc | Time
	/*-----------------------------------------------------*/
	.section-status .realm .realm-uptime,
	.section-status .realm .realm-desc,
	.section-status .realm .realm-time {
		text-align: left;
		padding-left: 2rem;
	}
}

/*-------------------------------------------------------------------------*/
/* Status (side)
/*-------------------------------------------------------------------------*/
.sidebox-status {
	-webkit-box-shadow: none;
	box-shadow: none;

	background-image: none;
	background-color: transparent;
}

/* Status: Head
/*---------------------------------------------------------------*/
.sidebox-status .sidebox-head {
	display: none;
}

/* Status: Body
/*---------------------------------------------------------------*/
.sidebox-status .sidebox-body {
	padding: 0;
}

.sidebox-status .sidebox-body::before {
	display: none;
}

/* Status: Toggler
/*---------------------------------------------------------------*/
.sidebox-status .toggler-group {
	top: 5px;
	left: 10px;
}

.sidebox-status .toggler-group .toggler {
	width: 15px;
	height: 15px;
}

/* Status: Realm
/*---------------------------------------------------------------*/
.sidebox-status .realm {
	margin: 0 0 var(--margin-primary) 0 !important;
	padding: 2rem;
	text-align: center;
}

.sidebox-status .realm::before {
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	content: '';
	opacity: 0.6;
	position: absolute;
}

.sidebox-status .realm.is-online::before {
	box-shadow: inset 0 0 0 1px rgba(72, 184, 255, 0.22), inset 0 0 22px 5px rgba(72, 193, 255, 0.14);
	-moz-box-shadow: inset 0 0 0 1px rgba(72, 184, 255, 0.22), inset 0 0 22px 5px rgba(72, 193, 255, 0.14);
	-webkit-box-shadow: inset 0 0 0 1px rgba(72, 184, 255, 0.22), inset 0 0 22px 5px rgba(72, 193, 255, 0.14);
}

.sidebox-status .realm.is-offline::before {
	box-shadow: inset 0 0 0 1px rgba(255, 72, 72, 0.22), inset 0 0 22px 5px rgba(255, 72, 72, 0.14);
	-moz-box-shadow: inset 0 0 0 1px rgba(255, 72, 72, 0.22), inset 0 0 22px 5px rgba(255, 72, 72, 0.14);
	-webkit-box-shadow: inset 0 0 0 1px rgba(255, 72, 72, 0.22), inset 0 0 22px 5px rgba(255, 72, 72, 0.14);
}

/* Realm: Grid system
/*-----------------------------------------------------*/
.sidebox-status .realm .realm-row {
	width: 100%;
	height: auto;
}

.sidebox-status .realm .realm-row.row-1   {}
.sidebox-status .realm .realm-row.row-2   {margin: 1rem 0;}
.sidebox-status .realm .realm-row.row-2 * {vertical-align: middle;}
.sidebox-status .realm .realm-row.row-3   {}

/* Realm: Name
/*-----------------------------------------------------*/
.sidebox-status .realm .realm-row .realm-name {
	color: #baddf4;
	font-size: 1.25rem;
	line-height: 100%;
	font-family: var(--font-family-secondary);
	text-shadow: 0 0 4px rgba(162, 218, 255, 0.2);
	text-transform: uppercase;
}

/* Realm: Status
/*-----------------------------------------------------*/
.sidebox-status .realm .realm-row .realm-status {
	display: inline-block;
	font-size: 1.0625rem;
	font-family: var(--font-family-primary);
	text-transform: uppercase;
}

.sidebox-status .realm.is-online .realm-row .realm-status  {color: #62a747; text-shadow: 0 0 4px rgba(118, 201, 51, 0.25);}
.sidebox-status .realm.is-offline .realm-row .realm-status {color: #9e3830; text-shadow: 0 0 4px rgba(201, 51, 51, 0.25);}

/* Realm: Players
/*-----------------------------------------------------*/
.sidebox-status .realm .realm-row .realm-players {
	color: #5d6971;
	margin: 0 0 0 1rem;
	padding: 0 0 0 1rem;
	display: inline-block;
	font-size: 1rem;
	font-family: var(--font-family-primary);
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
}

.sidebox-status .realm .realm-row .realm-players::before {
	width: 1px;
	height: 120%;
	top: -10%;
	left: 0;
	content: '';
	opacity: 0.2;
	position: absolute;
	box-shadow: 0 0 0 1px rgba(162, 151, 138, 0.13);
	-moz-box-shadow: 0 0 0 1px rgba(162, 151, 138, 0.13);
	-webkit-box-shadow: 0 0 0 1px rgba(162, 151, 138, 0.13);
	background-color: #688a9e;
}

.sidebox-status .realm .realm-row .realm-players span {
	color: #92acbf;
}

/* Realm: Bar
/*-----------------------------------------------------*/
.sidebox-status .realm .realm-row .realm_bar {
	margin: 0;
}

/* Status: Realmlist
/*---------------------------------------------------------------*/
.sidebox-status .realmlist {
	color: #6a7278;
	padding: 1rem;
	font-size: 1rem;
	text-align: center;
	font-family: var(--font-family-primary);
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
}