@import url(//fonts.googleapis.com/css?family=Montserrat:400,500,600,700,800);

body {
	background-color: rgba(18, 19, 23, 1.0);
	background-image: url(../img/pattern.png);
	background-repeat: repeat;
	width: 100%;
	height: 100%;
	margin: 0;
	color: rgba(255, 255, 255, 0.9);
    font-family: Montserrat, Tajawal, sans-serif;
    font-style: normal;
	font-weight: 500;
    line-height: 1.5;
	-webkit-transition: 0;
	-o-transition: 0;
	transition: 0;
}

a, a:focus, a:hover {
	text-decoration: none;
	color: #ffffff;
}

::-webkit-resizer {
	background-color: #666;
}

::-webkit-scrollbar {
	width: 12px;
	height: 3px;
}

::-webkit-scrollbar-button {
	display: none;
	background-color: #000;
}

::-webkit-scrollbar-corner {
	background-color: #2f3136;
}

::-webkit-scrollbar-thumb {
	height: 50px;
	background-color: #202225;
}

::-webkit-scrollbar-track {
	background-color: #fff;
}

::-webkit-scrollbar-track-piece {
	background-color: #2f3136;
}

.header {
	position: relative;
	background-color: rgba(26, 28, 35, 1.0);
	width: 100%;
	height: 66px;
	-webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.3);
	box-shadow: 0px 1x 3px 0px rgba(0, 0, 0, 0.3);
	z-index: 100;
}

.logo-image {
	position: absolute;
	background-image: url(../img/logo.png);
	background-repeat: no-repeat;
	background-size: 40px 40px;
	width: 40px;
	height: 40px;
	top: 13px;
	left: 16px;
	opacity: 0.9;
}

.logo-name {
	position: absolute;
	height: 40px;
	top: 13px;
	left: 66px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	font-size: 15px;
	font-weight: 500;
	color: #ffffff;
	opacity: 0.9;
}

.top-bar {
	display: none;
	position: absolute;
	top: 22px;
	right: 21px;
	width: 25px;
	height: 23px;
}

.nav-icon {
	position: absolute;
	width: 25px;
	height: 23px;
	position: relative;
	-webkit-transform: rotate(0deg);
	-ms-transform: rotate(0deg);
	    transform: rotate(0deg);
	-webkit-transition: .5s ease-in-out;
	-o-transition: .5s ease-in-out;
	transition: .5s ease-in-out;
	cursor: pointer;
}

.nav-icon span {
	display: block;
	position: absolute;
	height: 3px;
	width: 25px;
	background: #ffffff;
	border-radius: 1px;
	left: 0;
	-webkit-transform: rotate(0deg);
	-ms-transform: rotate(0deg);
	    transform: rotate(0deg);
	-webkit-transition: .25s ease-in-out;
	-o-transition: .25s ease-in-out;
	transition: .25s ease-in-out;
	opacity: 0.9;
}

.nav-icon span:nth-child(1) {
	top: 0px;
}

.nav-icon span:nth-child(2),#nav-icon span:nth-child(3) {
	top: 10px;
}

.nav-icon span:nth-child(4) {
	top: 20px;
}

.nav-icon.open span:nth-child(1) {
	top: 8px;
	width: 0%;
	left: 50%;
}

.nav-icon.open span:nth-child(2) {
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	    transform: rotate(45deg);
}

.nav-icon.open span:nth-child(3) {
	-webkit-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	    transform: rotate(-45deg);
}

.nav-icon.open span:nth-child(4) {
	top: 8px;
	width: 0%;
	left: 50%;
}

.nav-bar {
	position: absolute;
	height: 66px;
	top: 0px;
	right: 8px;
	margin: 0;
	padding: 0;
	opacity: 1;
}

.nav-bar > li {
	position: relative;
	display: block;
	padding: 23px 9px 22px;
	float: left;
	vertical-align: baseline;
	font-size: 14px;
}

.nav-bar > li > a {
	color: #9d9d9d;
}

.nav-bar > li > a:hover {
	color: #ffffff;
	-webkit-transition: 0.3s ease;
    -o-transition: 0.3s ease;
	transition: 0.3s ease;
}


.nav-bar > li > .li-premium {
	background: url(../img/premium.gif);
	color: rgba(255, 214, 0, 1.0);
	text-shadow: rgba(255, 214, 0, 0.5) 1px 1px 10px;
    border-radius: 30px;
}

.nav-bar > li > .li-premium:hover {
	color: rgba(255, 240, 120, 1.0);
	text-shadow: none;
}

.nav-bar > .isloggedmobile {
	display: none;
}

.flag {
    height: 24px;
    border-radius: 5px;
    margin: -2px 20px;
}

.nav-btn {
	background-color: rgba(255, 255, 255, 0.9);
    margin-top: -5px;
    color: rgba(26, 28, 35, 1.0);
	height: 30px;
    border-radius: 30px;
    padding: 0px 20px;
	font-style: normal;
    font-weight: 600;
    font-size: 13px;
	line-height: 1;
	border: none;
}

.nav-btn:hover {
	border-radius: 10px;
	-webkit-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s;
	cursor: pointer;
}

.lang-dropdown-toggle {
	background-color: transparent;
    margin: -2px 0px 0px 0px;
    padding: 0px 10px 0px 10px;
    border: 0;
    outline: 0;
}

.lang-dropdown-toggle:hover {
	opacity: 0.8;
	cursor: pointer;
}

.lang-dropdown-toggle img {
	height: 24px;
	border-radius: 5px;
}

.lang-dropdown-menu {
	position: absolute;
	display: none;
	background-color: rgba(26, 28, 35, 1.0);
	padding: 10px;
	margin: 10px 0px 0px -7px;
	border-radius: 10px;
	z-index: 100;
}

.lang-dropdown-menu.active {
	display: block;
}

.lang-dropdown-menu ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.lang-dropdown-menu li {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	padding: 0;
}

.lang-dropdown-menu li img {
	height: 24px;
	border-radius: 5px;
	margin: 7px;
}

.lang-dropdown-menu li img:hover {
	opacity: 0.8;
}

.mobile-hidden {
	display: none;
}

.user-avatar {
	position: relative;
	background-color: rgba(32, 34, 37, 1.0);
	width: 60px;
	height: 60px;
	top: 32px;
	left: calc(50% - 33px);
	border-radius: 100%;
	border: 3px solid rgba(32, 34, 37, 1.0);
	-webkit-box-shadow: 0px 3px 1px 0px rgba(0, 0, 0, 0.2);
	box-shadow: 0px 3x 1px 0px rgba(0, 0, 0, 0.2);
}

.username-center {
	position: relative;
	width: 100%;
	margin: 45px 0px 0px 0px;
	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;
}

.username {
	position: relative;
	display: inline-block;
	background-color: rgba(32, 34, 37, 1.0);
	height: 20px;
	border-radius: 20px;
	font-size: 14px;
	margin: 0px 10px;
	padding: 5px 15px;
	-webkit-box-shadow: 0px 3px 1px 0px rgba(0, 0, 0, 0.2);
	box-shadow: 0px 3x 1px 0px rgba(0, 0, 0, 0.2);
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}

.placeholder {
	position: relative;
	width: 100%;
	height: 70px;
}

.dashboard-box-title {
	position: relative;
	width: 100%;
	font-size: 18px;
	text-align: center;
}

.dashboard-box {
	position: relative;
    background-color: rgba(18, 19, 23, 1.0);
	min-height: calc(100% - 66px);
}

.dashboard-box .left {
	position: absolute;
	background-color: rgba(26, 28, 35, 1.0);
	width: 300px;
	height: 100%;
	user-select: none;
	overflow-x: auto;
}

.dashboard-box .guild-select {
	position: relative;
	width: calc(100% - 30px);
	margin: 35px 0px 0px 0px;
}

.dashboard-box .guild-select .select-box {
	width: 100%;
	height: 40px;
	padding: 10px 20px 10px 10px;
	position: relative;
	cursor: pointer;
	font-size: 13px;
	font-weight: bold;
}

.dashboard-box .guild-select .select-box:hover {
	background-color: rgba(18, 19, 23, 1.0);
}

.dashboard-box .guild-select .current-selection {
	display: flex;
	align-items: center;
	gap: 10px;
	height: 100%;
}

.dashboard-box .guild-select .current-selection .icon-container {
	width: 40px;
	height: 40px;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 5px;
}

.dashboard-box .guild-select .current-selection img {
	width: 40px;
	height: 40px;
	border-radius: 100%;
}

.dashboard-box .guild-select .selected {
    flex: 1;
    display: flex;
    align-items: center;
    height: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.dashboard-box .guild-select .selected .selected-option {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.dashboard-box .guild-select .guildOptionsList {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	list-style: none;
	margin: 0;
	padding: 0;
	background-color: rgba(18, 19, 23, 1.0);
	width: 100%;
}

.dashboard-box .guild-select .guildOption {
    padding: 10px 15px 10px 15px;
    display: flex;
    align-items: center;
    cursor: pointer;
    gap: 15px;
}

.dashboard-box .guild-select .guildOption:hover {
	background-color: rgba(28, 29, 33, 1.0);
}

.dashboard-box .guild-select .guildOption img {
	width: 40px;
	height: 40px;
	border-radius: 100%;
}

.dashboard-box .guild-select .guildOption span {
	overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
	max-width: calc(100% - 60px);
}

.dashboard-box .server-placeholder, .support-placeholder, .admin-placeholder {
	display: flex;
    align-items: center;
	margin: 20px 0px 0px 0px;
	padding: 10px 20px;
	font-size: 10px;
	text-transform: uppercase;
	border-bottom: 1px solid rgba(150, 150, 150, 0.1);
}

.dashboard-box .icon {
	display: inline-block;
	margin: 0px 7px 0px 10px;
	font-size: 14px;
}

.dashboard-box .select-menu {
	width: calc(100% - 20px);
	padding: 10px;
	color: rgba(255, 255, 255, 0.85);
	font-size: 14px;
	cursor: pointer;
}

.dashboard-box .select-menu.disabled {
	color: rgba(200, 200, 200, 0.1);
	cursor: default;
}

.dashboard-box .select-menu:hover {
	background-color: rgba(18, 19, 23, 1.0);
}

.dashboard-box .select-menu.disabled:hover {
	background-color: transparent;
	cursor: default;
}

.dashboard-box .right {
	position: absolute;
	right: 0px;
	width: calc(100% - 300px);
	height: 100%;
	overflow-x: auto;
}

.dashboard-box #logs {
	background-color: rgba(20, 20, 20, 1.0);
	height: calc(100% - 76px);
	padding: 5px;
	color: rgba(255, 255, 255, 0.8);
	font-family: Courier New, Courier, monospace;
	font-size: 12px;
	border-radius: 5px;
	overflow: auto;
	word-break: break-word;
}

.dashboard-box #logs .error {
	color: rgba(255, 0, 0, 1.0);
}

.dashboard-box #logs .warn {
	color: rgba(255, 255, 0, 1.0);
}

@-webkit-keyframes content {
	from {
		opacity: 0;
		-webkit-transform: translateY(5%);
		        transform: translateY(5%);
	}
	
	to {
		opacity: 1;
		-webkit-transform: translateY(0%);
		        transform: translateY(0%);
	}
}

@keyframes content {
	from {
		opacity: 0;
		-webkit-transform: translateY(5%);
		        transform: translateY(5%);
	}
	
	to {
		opacity: 1;
		-webkit-transform: translateY(0%);
		        transform: translateY(0%);
	}
}

.index-box {
	position: relative;
	width: 100%;
    height: calc(100% - 66px);
	padding: 0px 0px 66px 0px;
	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;
}

.index-info {
	position: absolute;
	width: 90%;
	left: 5%;
	text-align: center;
}

.index-bot-icon {
	position: relative;
	background-image: url(../img/logo.png);
	background-repeat: no-repeat;
	background-size: 120px 120px;
	left: calc(50% - 60px);
	width: 120px;
	height: 120px;
	margin: 0px 0px 30px 0px;
}

.index-title {
	position: relative;
	width: 100%;
	font-size: 26px;
	font-weight: 700;
	text-align: center;
}

.index-description {
	position: relative;
	width: 100%;
	font-size: 14px;
	font-weight: 300;
	text-align: center;
	padding-top: 20px;
	padding-bottom: 20px;
}

.index-buttons {
	position: relative;
	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;
}

.index-invite-button {
	background-image: -webkit-gradient(linear, left top, right top, from(#4c5bfc), to(#9e41fe));
	background-image: -o-linear-gradient(left, #4c5bfc, #9e41fe);
	background-image: linear-gradient(to right, #4c5bfc, #9e41fe);
}

.index-login-button {
	background-color: rgba(255, 255, 255, 1.0);
	color: rgba(0, 0, 0, 1.0);
}

.index-button {
	position: relative;
	border-radius: 20px;
	margin: 10px;
	padding: 8px 20px 8px 20px;
	font-weight: 600;
	font-size: 14px;
	-webkit-box-shadow: 1px 1px 2px 2px rgba(0, 0, 0, 0.2);
	box-shadow: 1px 1px 2px 2px rgba(0, 0, 0, 0.2);
}

.index-button:hover {
	border-radius: 10px;
	-webkit-transition: 0.5s;
	-o-transition: 0.5s;
	transition: 0.5s;
}

.functions-box-title {
	position: relative;
	width: 100%;
	font-size: 18px;
	text-align: center;
}

.functions-list-box {
	position: relative;
	width: 90%;
	left: 5%;
}

.functions-list-left {
	position: relative;
	background-image: -webkit-gradient(linear, left top, right top, from(#5865f2), to(#424eb5));
	background-image: -o-linear-gradient(left, #5865f2, #424eb5);
	background-image: linear-gradient(to right, #5865f2, #424eb5);
	width: 100%;
	margin: 100px 0px 100px 0px;
	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;
	border-radius: 10px;
}

.functions-list-left, .last {
	margin: 100px 0px 40px 0px;
}

.functions-list-left-image {
	position: relative;
	width: 50%;
	text-align: center;
}

.functions-list-left-image-settings {
	margin-top: -30px;
	max-width: 60%;
	border-radius: 5px;
	-webkit-box-shadow: -5px 3px 15px 0px rgba(0, 0, 0, 0.4);
    box-shadow: -5px 3px 15px 0px rgba(0, 0, 0, 0.4);
	-webkit-transform: scale(1) perspective(1000px) rotateX(23deg) rotateY(23deg) rotate(-15deg) translateX(15px) translateY(-10%);
	transform: scale(1) perspective(1000px) rotateX(23deg) rotateY(23deg) rotate(-15deg) translateX(15px) translateY(-10%);
}

.functions-list-left-info {
	position: relative;
	width: 50%;
	padding: 20px 50px;
	text-align: center;
}

.functions-list-left-title {
	position: relative;
	width: 100%;
	font-size: 18px;
	font-weight: 600;
}

.functions-list-left-description {
	position: relative;
	width: 100%;
	font-size: 14px;
	font-weight: 300;
}

.functions-list-right {
	position: relative;
	background-image: -webkit-gradient(linear, left top, right top, from(#424eb5), to(#5865f2));
	background-image: -o-linear-gradient(left, #424eb5, #5865f2);
	background-image: linear-gradient(to right, #424eb5, #5865f2);
	width: 100%;
	margin: 100px 0px 100px 0px;
	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;
	border-radius: 10px;
}

.functions-list-right, .last {
	margin: 100px 0px 40px 0px;
}

.functions-list-right-image-hidden {
	display: none;
}

.functions-list-right-info {
	position: relative;
	width: 50%;
	padding: 20px 50px;
	text-align: center;
}

.functions-list-right-title {
	position: relative;
	width: 100%;
	font-size: 18px;
	font-weight: 600;
}

.functions-list-right-description {
	position: relative;
	width: 100%;
	font-size: 14px;
	font-weight: 300;
}

.functions-list-right-image {
	position: relative;
	width: 50%;
	text-align: center;
}

.functions-list-right-image-settings {
	margin-top: -30px;
	max-width: 60%;
	border-radius: 5px;
	-webkit-box-shadow: 5px 3px 15px 0px rgba(0, 0, 0, 0.4);
    box-shadow: 5px 3px 15px 0px rgba(0, 0, 0, 0.4);
	-webkit-transform: scale(1) perspective(1000px) rotateX(23deg) rotateY(-23deg) rotate(15deg) translateX(-15px) translateY(-10%);
	transform: scale(1) perspective(1000px) rotateX(23deg) rotateY(-23deg) rotate(15deg) translateX(-15px) translateY(-10%);
}

.commands-box-title {
	position: relative;
	width: 100%;
	font-size: 18px;
	text-align: center;
}

.commands-list-box {
	position: relative;
	width: 90%;
	left: 5%;
	padding: 40px 0px 40px 0px;
}

.commands-table {
	width: 100%;
	background-image: -webkit-gradient(linear, left top, right top, from(rgba(66, 78, 181, 1.0)), to(rgba(88, 101, 242, 1.0)));
	background-image: -o-linear-gradient(left, rgba(66, 78, 181, 1.0), rgba(88, 101, 242, 1.0));
	background-image: linear-gradient(to right, rgba(66, 78, 181, 1.0), rgba(88, 101, 242, 1.0));
	border-radius: 10px;
	border-spacing: 0;
    border-collapse: separate;
}

.commands-table tr th {
	background-color: rgba(0, 0, 0, 0.3);
	padding: 15px 12px 15px 12px;
	font-size: 14px;
	font-weight: 600;
}

.commands-table tr td {
	padding: 7px 12px 7px 12px;
	font-size: 14px;
	font-weight: 300;
}

.commands-table tr:nth-child(even) {
	background-color: rgba(0, 0, 0, 0.1);
}

.command-mark {
	background-color: rgba(255, 255, 255, 0.9);
	width: -webkit-fit-content;
	width: -moz-fit-content;
	width: fit-content;
	padding: 4px 7px 4px 7px;
	color: rgba(66, 78, 181, 1.0);
    border-radius: 5px;
}

.th-left {
	text-align: left;
	width: 30%;
}

.th-right {
	text-align: left;
	width: 70%;
}

.left-server-settings-box {
	width: 50%;
	text-align: left;
}

.server-settings-word-filter {
	background-color: rgba(255, 255, 255, 0.8);
	width: 100%;
	height: 60px;
	resize: none;
	border: 0;
	border-radius: 5px;
	color: rgba(0, 0, 0, 0.8);
	padding: 5px;
}

.privacy-box-title {
	position: relative;
	width: 100%;
	font-size: 18px;
	text-align: center;
}

.privacy-box {
	position: relative;
    width: 90%;
    left: 5%;
    padding: 40px 0px 40px 0px;
	font-size: 14px;
}

.terms-box-title {
	position: relative;
	width: 100%;
	font-size: 18px;
	text-align: center;
}

.terms-box {
	position: relative;
    width: 90%;
    left: 5%;
    padding: 40px 0px 40px 0px;
	font-size: 14px;
}

.footer {
	position: relative;
	width: 100%;
	padding: 20px 0px 20px 0px;
	text-align: center;
	color: rgba(255, 255, 255, 0.6);
	font-size: 13px;
}

.footer a {
	color: rgba(255, 255, 255, 0.6);
}

.footer a:hover {
	color: rgba(255, 255, 255, 1.0);
}

@media screen and (max-width: 1000px) {
	body {
		zoom: 0.9;
	}
	
    .logo-name {
		display: none;
	}
	
	.top-bar {
		display: block;
	}
	
	.nav-bar {
		background-color: rgba(26, 28, 35, 1.0);
		width: 100%;
		height: auto;
		top: 66px;
		right: 0px;
		display: none;
		opacity: 0;
	}
	
	.nav-bar > li {
		position: relative;
		display: block;
		padding: 23px 20px 22px;
		float: initial;
		vertical-align: baseline;
		text-align: center;
		font-size: 14px;
	}

	.lang-dropdown-menu {
		position: relative;
		margin: 10px 0px 0px 0px;
	}

	.lang-dropdown-menu ul {
		list-style: none;
		margin: 0;
		padding: 0;
		-webkit-box-pack: center;
		    -ms-flex-pack: center;
		        justify-content: center;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
	}

	.support-title, .administration-title {
		display: none;
	}

	.button-title {
		display: none;
	}
	
	.functions-list-left {
		display: block;
	}
		
	.functions-list-left-image {
		width: 100%;
	}
	
	.functions-list-left-info {
		width: calc(100% - 100px);
		padding: 50px;
	}
	
	.functions-list-right {
		display: block;
	}
	
	.functions-list-right-image-hidden {
		position: relative;
		width: 100%;
		text-align: center;
		display: block;
	}
	
	.functions-list-right-info {
		width: calc(100% - 100px);
		padding: 50px;
	}
	
	.functions-list-right-image {
		display: none;
	}
	
	.tabs ul li label {
		padding: 5px;
		border-radius: 5px;
	}

	.tabs ul li label span {
		display: none;
	}

	.tabs .slider {
		display: none;
	}

	.tabs .content {
		margin-top: 20px;
	}

	.tabs .content section h2 {
		display: none;
	}
}