* {
	margin: 0;
	padding: 0;
	-webkit-user-select: none;
}

body {
	border-radius: 10px;
	overflow: hidden !important;
    /*background-color: #000;*/
	
}


:root { 
	--background: #150118;  /* 150118*/
	--background2: #231c24; /* 231c24*/
	--background3: #2C272D; /* 2C272D*/
	--background4: #3C373D; /* 2C272D*/
}


@font-face {
	font-family: 'Montserrat';
	src: url('assets/fonts/Montserrat-ExtraBoldItalic.ttf') format('woff2');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Montserrat-Italic';
	src: url('assets/fonts/Montserrat-Italic.ttf') format('woff2');
	font-weight: normal;
	font-style: italic;
}

@font-face {
	font-family: 'Montserrat-SemiBold';
	src: url('assets/fonts/Montserrat-SemiBold.ttf') format('woff2');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Montserrat-ExtraLight';
	src: url('assets/fonts/Montserrat-ExtraLight.ttf') format('woff2');
	font-weight: normal;
	font-style: normal;
}


.main {
	/*width: 1100px;
	height: 620px;
	border-radius: 23px;*/

	position: absolute;

	width: 1451px;
	height: 882px;
	left: calc(50% - 1451px/2 + 0.5px);
	top: calc(50% - 882px/2);

	background: var(--background);
	border-radius: 20px;
}


.main .launcher {
	width: 100%;
	height: 100%;
	overflow: hidden;
}



input::selection,
textarea::selection {
  background: #d84bff9b;
  color: white;
}


.main .launcher .tools {
	display: flex;
	position: absolute;
	
	top: 45.0px;
	right: 31.0px;
}

.main .launcher .tools .item {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 50px;
	cursor: pointer;
	border-radius: 10px;
	transition: background-color 0.2s ease;
}

.main .launcher .tools .item img {
	height: 30px;
}

.main .launcher .tools .item:hover {
	background-color: var(--background3);
}


.launcher .nickname {
	position: absolute;

	top:35px;
	left:870px;
	
	display: flex;
	justify-content: center;
	align-items: center;
}


.launcher .nickname input {
	border: none;
	outline: none;

	height: 58px;
	width: 268px;

	padding-left: 10px;
	padding-right: 10px;
	/*border-radius: 3px;*/

	font-family: 'Montserrat-SemiBold';
	font-style: normal;
	font-weight: 600;
	font-size: 22px;
	line-height: 32px;

	text-align: center;
	letter-spacing: 0.04em;
	color: #FFFFFF;
	background: var(--background2);
	border: 1.1px solid rgba(255, 255, 255, 0.029);

	cursor: pointer;
 	margin-right: 35px;

	transition: background-color 0.2s ease;
	border-radius: 10px;
}

.launcher .nickname .item input:hover {
	background-color: var(--background3);
}

.launcher .nickname .item input::placeholder { 
	color: white; 
}


.launcher .menu {
    position: absolute;
    top:40px;
	left:300px;
	
    display: flex; 
    justify-content: space-between;
    align-items: center;
}

.launcher .menu .text {
	align-items: center;
	display: flex;
	justify-content: center;

	width: 140px;
	height: 48px;

	text-align: center;
	background: var(--background2);
	border: 1.1px solid rgba(255, 255, 255, 0.029);

	font-family: 'Montserrat-SemiBold';
	font-style: normal;
	font-weight: 700;
	font-size: 22px;
	line-height: 27px;
	letter-spacing: 0.04em;
	color: white;

	cursor: pointer;
 	margin-right: 38px;
	transition: background-color 0.2s ease;
	border-radius: 10px;
}

.launcher .menu .text:hover {
	background-color: var(--background3);
}



.launcher .social {
    position: absolute;
	left:40px;
    top:182px;
	
    display: flex; 
    justify-content: space-between;
    align-items: center;
}

.launcher .social .box {
	position: relative;
	width: 64px;
	height: 64px;
	/*left: 40px;
	top: 182px;*/
	margin-right: 15px;

	box-sizing: border-box;
	background: rgba(255, 255, 255, 0.05);
    border: 1px solid #986DA1;

	border-radius: 50%;
	cursor: pointer;
	overflow: hidden;
	transition: border 0.2s ease;
}

.launcher .social .image {
	position: relative;
	width: 34px;
	height: 34px;
	left: 14px;
	top: 15px;
	background-size: contain;
}

.launcher .social .box:hover {
	background: rgba(255, 255, 255, 0.138);
}



.launcher .server {
	position: relative;
    left: 40px; 
    top: 287px;
    
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 508px;
    height: auto;
    gap: 8px;
    background: var(--background2);
	border: 1.1px solid rgba(255, 255, 255, 0.029);

	padding-bottom: 25px;
	border-radius: 10px;
}


.launcher .server .heading {
	font-family: 'Montserrat-Italic';
	font-style: italic;
	font-weight: 600;
	font-size: 22px;
	line-height: 27px;
	letter-spacing: 0.04em;
	color: #FFFFFF;

	margin-top: 20px;
    margin-bottom: 20px;
	padding-left: 20px;
}


.launcher .server .server2 {
	position: relative;
	left: 20px;

	flex-direction: column;
	align-items: flex-start;
	padding: 16px 0px;

	width: 467px;
	height: 64px;
	background: var(--background3);
	border: 1.1px solid rgba(255, 255, 255, 0.029);
	border-radius: 10px;
}

.launcher .server .name {
	padding-left: 20px;
	height: 37px;

	font-family: 'Montserrat-SemiBold';
	font-style: normal;
	font-weight: 600;
	font-size: 22px;
	line-height: 27px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #C62CF9;
}


.launcher .server .online {
	position: relative;
	display: flex;
	justify-content: right;
	align-items: right;

	margin-top: -55px;
	left: -132px;

    font-family: 'Montserrat-SemiBold';
    font-style: normal;
    font-weight: 600;
    font-size: 22px;
    line-height: 27px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #FFFFFF;
	transform: translateZ(0);
}

.launcher .server .bulb-wrapper {
	position: relative;
	top: -20px;
	left: 360px;
}

.launcher .server .bulb-wrapper .bulb {
	width: 13px;
	height: 13px;
	border-radius: 50%;
	background-color: rgb(140, 218, 98);
	position: absolute;
}

.launcher .server .bulb-wrapper .bulb.blurred {
	filter: blur(5px);
	opacity: 0.7;
}


.launcher .server .box_play {
	position: absolute;

	box-sizing: border-box;

	display: flex;
	flex-direction: row;
	align-items: center;
	
	padding: 13px;
	gap: 10px;

	width: 47px;
	height: 50px;

	top: 23px;
	left: 400px;

	background: rgba(255, 255, 255, 0.1);
	border: 1.1px solid rgba(255, 255, 255, 0.029);


	cursor: pointer;
	transition: transform 0.2s ease;
	border-radius: 5px;
}

.launcher .server .box_play:hover {
	transform: scale(1.03)
}

.launcher .server .box_play .icon_play {

	position: absolute;
	width: 30px;
	height: 30px;

	left: 10.0px;
	top: 10.0px;

	background: #986DA1;
	transform: rotate(0deg);

	clip-path: polygon(
		3% 0%,      
		3% 0%,        
		90% 50%,    
		90% 50%,      
		3% 100%,     
		3% 100%   
	);
}



.launcher .server .bonus {
	position: relative;
	width: 467px;
	height: 115px;
	left: 20px;

	margin-top: 14px;

	background: #C62CF9;
	border: 1.1px solid rgba(255, 255, 255, 0.029);
	
	border-radius: 10px;
}


.launcher .server .bonus .img {
	position: relative ;
	width: 234px;
	height: 115px;
	left: 234px;
	top: 1px;

	background: url(assets/images/bonus.svg);
	background-repeat: no-repeat;

	border-radius: 10px;
	background-size: cover;
	background-position: center;
}


.launcher .server .bonus .text {
	position: absolute;
	width: 290px;
	height: 51px;
	left: 20px;
	top: 20px;

	font-family: 'Montserrat-Italic';
	font-style: italic;
	font-weight: 600;
	font-size: 19.4876px;
	line-height: 24px;
	letter-spacing: 0.04em;

	color: #FFFFFF;
}



.launcher .news-heading  {
	position: absolute;
	width: 366px;
	height: 29px;
	left: 572px;
	top: 199px;

	font-family: 'Montserrat-Italic';
	font-style: italic;
	font-weight: 700;
	font-size: 22px;
	line-height: 27px;
	letter-spacing: 0.04em;
	color: #FFFFFF;

	transform: translateZ(0);
}


.launcher .news {
	position: absolute;
	left: 570px;
	top: 243px;
	
	width: 857px;
	height: 381px;

	overflow-y: auto;
}


.launcher .news::-webkit-scrollbar {
	width: 5px;
}

.launcher .news::-webkit-scrollbar-track {
	background: transparent;
}

.launcher .news::-webkit-scrollbar-thumb {
 	background-color: rgba(255, 255, 255, 0.082);
  	border-radius: 2px;
}


.launcher .news-box {
    position: relative; 
	margin-bottom: 10px; 
}

.launcher .news-box:last-child {
	margin-bottom: 0px;
}


.launcher .news-box .image {
	position: relative;
	width: 840px;
	height: 183px;

	object-fit: cover;
	opacity: 0.80;
	cursor: pointer;
	border: 1.1px solid rgba(255, 255, 255, 0.029);
	border-radius: 10px;
}

.launcher .news-box .text2 {
	position: absolute;
	left: 20.0px;
    top: 145px;

	font-family: 'Montserrat-SemiBold';
	font-style: normal;
	font-weight: 600;
	font-size: 22px;
	line-height: 27px;
	letter-spacing: 0.04em;

	color: #FFFFFF;
	text-shadow: 0px 0px 25px rgba(0, 0, 0, 0.95);

	max-width: 95%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis; 
}





.launcher .logo {
	position: absolute;
	width: 61px;
	height: 51px;
	left: 40px;
	top: 40px;

	background: url(assets/images/logo.svg);
}

.launcher .logo .text {
	/* Exsellent */

	position: absolute;
	width: 135px;
	height: 21px;
	left: 70px;
	top: 0px;


	font-family: 'Montserrat';
	font-style: italic;
	font-weight: 800;
	font-size: 22px;
	line-height: 27px;
	text-transform: uppercase;

	color: #C62CF9;
}

.launcher .logo .text2 {

	position: absolute;
	width: 145px;
	height: 21px;
	left: -1px;

	font-family: 'Montserrat-Italic';
	font-style: italic;
	font-weight: 400;
	font-size: 22px;
	line-height: 27px;
	letter-spacing: 0.04em;
	text-transform: uppercase;

	color: #FFFFFF;
}

.launcher .logo .move_box {
	position: absolute;
	width: 280px;
	height: 130px;
	left: -40px;
	top: -40px;

	/*background: #ffffff4a;*/

	-webkit-app-region: drag;
}


.launcher .status_panel {
	position: absolute;
	width: 1370px;
	height: 144px;
	left: 40px;
	top: 737px;
	background: var(--background2);
	border: 1.1px solid rgba(255, 255, 255, 0.029);

	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	
}

.launcher .status_panel .text {
	position: absolute;
	
	height: 27px;
	left: 117px;
	top: 35px;

	font-family: 'Montserrat-SemiBold';
	font-style: normal;
	font-weight: 600;
	font-size: 22px;
	line-height: 27px;
	letter-spacing: 0.04em;

	color: #FFFFFF;
}


.launcher .status_panel .text_progress {
	position: relative ;
	display: flex;
	justify-content: right;

	left: -40px;
	top: 35px;
}

.launcher .status_panel .text_progress .item {
	position: relative;
	margin-left: 90px;
}

.launcher .status_panel .text_progress .item .progress_text {
	font-family: 'Montserrat-SemiBold';
	font-style: normal;
	font-weight: 600;
	font-size: 22px;
	line-height: 27px;
	letter-spacing: 0.04em;

	color: #986DA1;
}

.launcher .status_panel .text_progress .item .image {
	position: relative;
	width: 37px;
	height: 37px;

	margin-left: -50px;
	top: -33px;
}





.launcher .status_panel .progress_bar_background {
	position: absolute;
	width: 1214px;
	height: 15px;
	left: 117px;
	top: 76px;
	background: var(--background3);
	border: 1.1px solid rgba(255, 255, 255, 0.029);
	border-radius: 10px;
}

.launcher .status_panel .progress_bar_background .progress_bar {
	width: 0%;
	height: 15px;
	left: 117px;
	top: 76px;
	background: #C62CF9;
	border-radius: 10px;
}


.launcher .status_panel .progress_button {
	position: absolute;
	width: 71px;
	height: 71px;
	left: 20px;
	top: 36px;
	cursor: pointer;
}


.launcher .status_panel .progress_button .ellipse {
	position: absolute;
	width: 71px;
	height: 71px;
	/*left: -3px;
	top: -4px;*/
	border-radius: 50%;

	background: 
		radial-gradient(closest-side, #2e282f 85%, transparent 90% 100%),
		conic-gradient(#C62CF9 var(--progress, 0%), #2e282f 0);
}


.launcher .status_panel .progress_button .ellipse_bar {
	position: absolute;
	width: 71px;
	height: 71px;
	left: 0px;
	top: 0px;
	border-radius: 50%;

	background: #C62CF9;
}


.launcher .status_panel .progress_button .pause {
	position: absolute;

	width: 32px;
	height: 32px;

	left: 20.0px;
	top: 20.0px;

	background: url(assets/images/pause.svg);
	background-repeat: no-repeat;
	background-size: contain;

	transition: opacity 0.2s ease;
}

.launcher .status_panel .progress_button .pause:hover {
	opacity: 0.5;
}


.launcher .status_panel .progress_button .install {
	position: absolute;

	width: 40px;
	height: 40px;

	left: 15.8px;
	top: 14.0px;

	background: url(assets/images/install.svg);
	background-repeat: no-repeat;
	background-size: contain;

	transition: opacity 0.2s ease;
}


.launcher .status_panel .progress_button .install:hover {
	opacity: 0.5;
}


.launcher .status_panel .progress_button .check {
	position: absolute;
	width: 44px;
	height: 44px;

	left: 14.0px;
	top: 14.0px;

	background: url(assets/images/setting.svg);
	background-repeat: no-repeat;
	background-size: contain;

	animation: spin 2.5s linear infinite;
}	

@keyframes spin {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}



.launcher .status_panel .progress_button .play {
	position: absolute;
	width: 34px;
	height: 34px;

	left: 19.0px;
	top: 20.0px;

	background: url(assets/images/icon-accept.svg);
	background-repeat: no-repeat;
	background-size: contain;
}



#notification-container {
	position: absolute;
	display: flex;
	justify-content: right;
	align-items: right;

    top: 23px;
    left: 930px; 
	
    z-index: 9999;
    flex-direction: column-reverse;
    gap: 10px;

	min-width: 400px;
	width: 500px;
}

.notification {

   	padding: 15px 20px;
	border-radius: 10px;

    opacity: 0;
	text-align: center;

	color: #FFFFFF;

	font-family: 'Montserrat-SemiBold';
	font-style: normal;
	font-weight: 600;
	font-size: 20px;
	line-height: 27px;
	letter-spacing: 0.04em;
	animation: slideIn 0.8s forwards, fadeOut 0.8s 5.5s forwards;
}


.launcher .notification.success {
	filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.81));
    backdrop-filter: blur(2.4px);
	background: rgba(68, 255, 47, 0.451);
	background-blend-mode: soft-light;
}

.notification.error {
	filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.81));
    backdrop-filter: blur(2.4px);
	background: rgba(255, 47, 47, 0.451);
	background-blend-mode: soft-light;

}

.notification.warning {
	filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.81));
    backdrop-filter: blur(2.4px);
	background: rgba(47, 179, 255, 0.451); /*(255, 193, 47, 0.674);*/
	background-blend-mode: soft-light;
}

.notification.info {
	filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.81));
    backdrop-filter: blur(2.4px);
	background: rgba(106, 124, 135, 0.451);
	background-blend-mode: soft-light;
}


@keyframes slideIn {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeOut {
    to {
        opacity: 0;
        transform: translateX(100%);
    }
}



.notification-box {
	position: absolute;
	top: 50%;
	left: 50%;

	margin-top: -80px;
	margin-left: -540px;

	padding: 20px;
	z-index: 4;
	max-width: 610px;

	background: var(--background2);
	border: 1.1px solid rgba(255, 255, 255, 0.029);
	border-radius: 10px;
}

.notification-content {
    text-align: center;

	font-family: 'Montserrat-SemiBold';
	font-style: normal;
	font-weight: 700;
	font-size: 20px;
	line-height: 27px;
	letter-spacing: 0.04em;
	color: white;
	
	opacity: 0;
	transform: translateY(30%);
    animation: slideIn 0.3s forwards;
}

.notification-content p {
    margin-bottom: 20px;	
}

.notification-content .buttons button {
	
	padding: 10px 20px;
    margin: 0 10px;

	font-family: 'Montserrat-SemiBold';
	font-style: normal;
	font-weight: 700;
	font-size: 20px;
	line-height: 27px;
	letter-spacing: 0.04em;
	color: white;
   
    border: none;
    cursor: pointer;

	background: var(--background3);
	border: 1.1px solid rgba(255, 255, 255, 0.029);
	border-radius: 10px;
	transition: background-color 0.2s ease;
}

.notification-content .buttons button:hover{
    background-color: var(--background4);
}

.notification-overlay {

	position: absolute;
	top: 50%;
	left: 50%;

	margin-top: -441px;
	margin-left: -725px;

    width: 1451px;
    height: 883px;
	border-radius: 20px;
	
	background:#00000058;
	z-index: 3;
}



.launcher .auto_login {
	position: absolute;

	top:105px;
	left:870px;

	display: flex;
	justify-content: center;
	align-items: center;

	background: var(--background2);
	border: 1.1px solid rgba(255, 255, 255, 0.029);
	border-radius: 10px;
	transition: background-color 0.2s ease;
}


.launcher .auto_login input {
	border: none;
	outline: none;

	height: 58px;
	width: 315px;
	margin-right: 57px;

	padding-left: 10px;
	padding-right: 10px;

	font-family: 'Montserrat-SemiBold';
	font-style: normal;
	font-weight: 600;
	font-size: 22px;
	line-height: 32px;

	text-align: center;
	letter-spacing: 0.04em;
	color: #FFFFFF;

	background: #00000000;
	cursor: pointer;
	border-radius: 10px;
}

.launcher .auto_login:hover {
	background-color: var(--background3);
}


.launcher .auto_login .item input::placeholder { 
	color: white; 
}

.launcher .auto_login .show_image {
	position: absolute;

	width: 28px;
	height: 28px;

	left: 347px;
	top: 16px;

	cursor: pointer;
	transition: opacity 0.3s ease;
}

.launcher .auto_login .show_image:hover {
	opacity: 0.5;
}