*{margin: 0;padding: 0;}

body {
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
	overflow: hidden;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 15px;
	cursor: url('../Customize BJH OS/Cursor/cursor.svg'), auto;
	background-color: black;
}

body img { -webkit-user-drag: none;}
a { color: white; text-transform: none;cursor: url('../Customize BJH OS/Cursor/cursor.svg'), auto;}

h5 {
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	font-weight: lighter; letter-spacing: 1.5px;
}

::-webkit-scrollbar {width: 5px; height: 5px;}
::-webkit-scrollbar-track {border-radius: 5px;background: transparent;}
::-webkit-scrollbar-thumb {background: linear-gradient(180deg,rgba(255, 140, 0, 0.55) 0%, rgba(133, 53, 0, 0.55) 100%);border-radius: 2px; transition: all 0.3s;}
::-webkit-scrollbar-thumb:hover {background: linear-gradient(180deg,rgba(255, 140, 0, 0.75) 0%, rgba(133, 53, 0, 0.75) 100%);border-radius: 50px;}
::-webkit-input-placeholder {color: rgb(216, 216, 216);}
:-ms-input-placeholder {color: rgb(216, 216, 216);}
::placeholder {color: rgb(216, 216, 216);}
.blank {
	background: rgba(0, 0, 0, 0.67);
	-webkit-backdrop-filter: blur(25px) contrast(120%);
	backdrop-filter: blur(25px) contrast(120%);
	width: 100%; height: 100%; ;
	top: 0; left: 0; pointer-events: none; padding: 15px;
	position:absolute; z-index: 1000000000000000000;
	visibility: visible; opacity: 1; font-weight: bold;
	transition: visibility 1.5s, opacity 1.5s ease-out; }

 .blank p{animation: blinkLoad 1s infinite; color: rgba(255, 255, 255, 0.65); transition: color 1.25s ease;}

 @keyframes blinkLoad {
	0%{color: rgba(255, 255, 255, 0.65)}
	50%{color: rgba(255, 255, 255, 0.85)}
	100%{color: rgba(255, 255, 255, 0.65)}
 }
.searchT {
    width: 135px;
    height: 32.5px;
    border-right:  none;
    border-left: none;
	margin-left: 65px;
	margin-top: -8px;
    border-top:  0.25px solid #f1f1f11e;
    border-bottom:  none;
    border-radius: 15px;
    background-color: rgba(241, 241, 241, 0.06);
    font-size: 13.5px;
    color: white;
    text-align: left;
    transition: all 1.3s;
	-webkit-transform: translateY(3px);
	transform: translateY(3px);
}
.searchT:focus-visible{outline: none; width: 235px; background-color: rgba(241, 241, 241, 0.125);border-radius: 10px;}
.searchT:hover{background-color: rgba(241, 241, 241, 0.125);}
.searchS {
	width: 77%;
	height: 15px;
	margin-top: 10px;
	border-right:  0.5px solid #f1f1f12a;
	border-left:  0.5px solid #f1f1f12a;
	border-top:  0.5px solid #f1f1f12a;
	border-radius: 5px;
	border-bottom: 2px solid rgb(255, 136, 0);
	background-color: rgba(44, 42, 35, 0.35);
	padding: 7px;
	padding-left: 27px;
	font-size: 13.5px;
	color: white;
}

.SearchQ {
	width: 76%;margin-left: -15px; margin-right: 5px; 
	border-right: none;
	border-radius: 4px; 
	border-left: 0.25px solid #f1f1f11e; 
	border-top: 0.25px solid #f1f1f11e;
	border-right: 0.25px solid #f1f1f11e;;
	border-bottom: 2px solid rgb(255, 136, 0);
	background-color: rgba(44, 42, 35, 0.35);
	padding: 5px;
	font-size: 12px; display: inline-block;
	color: white;
}

 .searchS, .SearchQ:focus-visible{outline: none; }
.switch {
	position: relative;
	display: inline-block;
	width: 45px;
	height: 24px;
	margin-right: 10px;
	-webkit-transform: translateY(-2px);
	transform: translateY(-2px);
}
  
.switch input { 
	opacity: 0;
	width: 0;
	height: 0;
}
  
.slider2 {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: transparent;
	border: 1px solid #ccc ;
	-webkit-transition: .4s;
	transition: .4s;
}
  
.slider2:before {
	position: absolute;
	content: "";
	height: 16px;
	width: 16px;
	left: 4px;
	bottom: 3px;
	background-color: white;
	-webkit-transition: .4s;
	transition: .4s;
}
  
input:checked + .slider2 {background-color: #f38021;border: none;}
input:focus + .slider2 {box-shadow: 0 0 1px #f38021;}
input:checked + .slider2:before {
	-webkit-transform: translateX(22px);
	-ms-transform: translateX(22px);
	transform: translateX(22px);
	bottom: 4px;
}

.slider2.round {border-radius: 34px;}
.slider2.round:before {border-radius: 50%;}


#switchP{
	display: none; pointer-events: all;
	background: rgba(0, 0, 0, 0.67);
	-webkit-backdrop-filter: blur(25px) contrast(120%);
	backdrop-filter: blur(25px) contrast(120%);
	width: 100%; height: 100%;overflow: hidden;
}

.Switch_Mobile{
	position: absolute;
	left: 50%; top: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	color: #FF8F00;
}
.Switch_Mobile {position: relative; padding: 1.5em; margin-bottom: 2em;}
.Switch_Mobile .img-ph img{width: 7rem; position: relative;}
.Switch_Mobile button{
	color: white;
    background-color: rgb(255, 123, 0);
    border-radius: 8px;
    padding: 10px;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    border: 1px solid #ccc;
    transition: all 0.5s;
    -webkit-backdrop-filter: blur(35px) contrast(200%);
          backdrop-filter: blur(35px) contrast(200%);
	width: calc(100% /2);
	margin-top: 1.5em;
}
.Switch_Mobile button:hover{
	-webkit-transform: scale(1.1);
		   transform: scale(1.1);
	background-color: rgba(66, 46, 26, 0.75);
	border: 0.5px solid rgba(241, 241, 241, 0.1647058824);
 }
 .Switch_Mobile button:active{scale: 0.90;}

@media screen and (max-width: 850px) {
	#switchP{display: block;}
	#DesktopVersion{display: none;}

	* {overflow: hidden;}
}

.popup {
	position: absolute;
	left: 50%;
	top: -25%;
	visibility: hidden;
	width: 490px;
	border-radius: 5px;
	padding: 13px 17px 20px;
	display: flex;
	transform: translateX(-50%);
	transition: all 0.25s ease;
	border-radius: 10px; z-index: 200;
	border: 1px solid #f1f1f138;
	background-color:  rgba(0, 0, 0, 0.65);
	-webkit-backdrop-filter: blur(55px);
	backdrop-filter: blur(55px);
	box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.25);
	color: white;
  }
  .popup.show {
	top: 1%;
	visibility: visible;
  }
  
  .popup .icon i {
	width: 40px;
	height: 40px;
	display: flex;
	color: #fff;
	margin-right: 15px;
	font-size: 1.2rem;
	align-items: center;
	justify-content: center;
	border-radius: 25px;
	background: #EA4D67;
  }
  .popup.online .icon i {
	background: #2ECC71;
  }
  .popup .title {
	font-size: 1.2rem;
  }
  .popup .desc {
	margin: 3px 0 10px;
	font-size: 1.04rem;
  }
  .popup .reconnect {
	cursor: pointer;
	font-weight: 500;
	font-size: 0.95rem;
	padding: 8px 13px;
	color: white;
	background-color: rgb(255, 123, 0);
	border-radius: 8px;
	padding: 10px;
	font-size: 16px;
	font-weight: bold;
	border: 1px solid #ccc;
	cursor: url('../Customize BJH OS/Cursor/cursor.svg'), auto;
	transition: all 0.5s;
  }
  .popup .reconnect:hover{
	background-color: #f1f1f138;
  }
  .popup.online .reconnect {
	pointer-events: none;
  }
  