@import url('https://fonts.googleapis.com/css2?family=PT+Sans:wght@400;700&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css');

body{
	margin: 0;
	padding: 0;
	height: 100vh;
	background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  font-family: 'PT Sans', sans-serif !important;
	background-image: url('https://mxdhardware.com/wp-content/uploads/2022/02/kali-linux-bg.webp');
}

/*Linux Desktop*/
.desktop-apps{
  z-index: 1;
  display: flex;
  width: 100%;
  height: 100vh;
  position: fixed;
  flex-wrap: wrap;
  flex-direction: column;
  align-content: flex-start;
  padding: 65px 14px 12px;
}

.app{
  padding: 0 6px;
  max-width: 75px;
  margin: 0 20px 27px 0;
}

.app:hover{background: rgb(139 146 226 / 40%);}

.app img{
  width: 50px;
  height: 50px;
  display: block;
  margin: 0 auto;
}

.app p{
  color: white;
  font-size: 13px;
  margin: 4px 0 0;
  text-align: center;
}

/* Top Bar */
.top-bar{
  z-index: 2;
	display: flex;
	width: 100%;
	height: 35px;
	position: relative;
	background-color: rgb(0 0 0 / 60%);
}

.top-bar ul{
	margin: 0;
	padding: 0;
	color: white;
  width: 100%;
	height: 100%;  
	list-style: none;
  align-items: center;
	display: inline-flex;
	flex-direction: row;
}

.top-bar li{font-size: 14px;}
.top-bar a:hover, .top-bar li:hover{background-color: #1F222A;}

.left-side{
  color: white;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.left-side img{
  width: 30px;
  display: block;
}

.left-side img:first-child {width: 35px;}

.menubtn {
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
  background: rgb(39 39 39 / 60%);
}

.separator{
  margin-bottom: 4px;
  padding: 0 3px 0 10px;
}

i.fa-chevron-down{
  font-size: 10px;
  margin-left: 5px;
}

.right-side{justify-content: flex-end;}
.right-side li{margin: 0 10px;}
.right-side li i{font-size: 13px;}
.right-side p{margin: 0;}

.fa-sort-down{
  top: -2px;
  position: relative;
  display: inline-flex;
}

.fa-power-off{transform: rotate(90deg);}

/* Dropdown */
.dropdown{
  left: 12em;
  top: 35px;
  z-index: 10;
}

.dropdown li{
  padding: 6px 0 0;
  display: inline-flex;
  align-items: center;
}

.dropdown li img{
  width: 25px !important;
  margin-right: 3px;
}

li .dropdown{
  display: none;
  line-height: 1;
}

li:hover .dropdown{
  height: auto;
  display: flex;
  position: absolute;
  width: fit-content;
  border-radius: 10px;
  flex-direction: column;
  background-color: rgb(31 34 42);
}

li:hover li{
  float: none;
	color: white;
  width: 100%;
  margin: 0 auto;
  font-size: 13px;
  padding: 3px 7px;
}

li .dropdown li:hover{
  border-radius: 6px;
  background-color: #177FEC;
}

/* Inside Linux Menu */
#LinuxMenu{
  z-index: 4;
  display: none;
  width: 610px;
  padding: 10px;
  height: 610px;
  user-select: none;
  position: absolute;
  -webkit-user-select: none;
  background-color: #22252e;
}

.search{display: flex;}

input[type=text]{
  outline: none;
  width: 100%;
  height: 33px;
  padding: 0 10px;
  color: #DADADA;
  text-indent: 30px;
  border-radius: 20px;
  background-position: 12px;
  border: 2px solid #1E74ED ;
  background-color: #1A1D24;
  background-repeat: no-repeat;
  background-image: url('https://mxdhardware.com/wp-content/uploads/2021/05/w10-searchicon.png');
}

input:focus::-webkit-input-placeholder {
  color: black;
  font-size: 16px;
}

input[type=text]::placeholder{
  color: #b1b1b1;
  font-size: 15px;
}

input[type=text]:focus {
  color: black;
  background-color: white;
  background-image: url('https://mxdhardware.com/wp-content/uploads/2021/05/w10-searchfocusicon.png');
}

input:hover{
  border-color: #777777;
  background-color: #3F3F3F;
}

.apps-container{
  color: white;
  display: flex;
  height: 89%;
  flex-direction: row;
}

.the-apps:first-child, .the-apps:last-child{width: 50%;}
.the-apps:first-child{background-color: #22252E;}
.the-apps:last-child{background-color: #1C1F26;}

.apps-container ul{
  list-style: none;
  padding: 0 5px;
}

.apps-container ul li:hover{background-color: #323240;}
.left-apps{font-size: 15px;}

.left-apps li{
  padding: 6px 0 0;
  letter-spacing: -.4px;
}

.left-apps li a{
  color: white;
  text-decoration: none;
}

/*Menu Icons*/
.fa-folder-minus:before {color: #367BE6;}
.fa-list:before, .fa-user-clock:before {color: #4AAAE4;}
.fa-cogs:before{color: darkgrey;}

.user{
  color: white;
  height: 10%;
  width: 100%;
  font-size: 20px;
  display: inline-flex;
  align-items: center;
  background-color: #22252E;
}

.user img{
  height: 40px;
  margin-right: 10px;
}

.user h3{margin: 0;}

.obuttons{
  width: 67%;
  display: flex;
  justify-content: flex-end;
}

.obuttons .fas{margin: 0 10px;}

.tab-pane ul{
  display: flex;
  flex-direction: column;
}

.tab-pane li{
  padding: 6px 0 0;
  display: inline-flex;
  align-items: center;
}

.tab-pane img{
  width: 25px;
  margin-right: 5px;
  align-items: center;
}