/* Clock */

#current-time {
	top: 10px; left: 10px; border-radius: 2px; font-size: 10px; padding: 3px 6px 1.3px 5px;
	background: #222; color: rgba(255,255,255,.7); display: inline-block; height: 20px;
}

/* Switch/Checkbox: https://www.w3schools.com/howto/howto_css_switch.asp */

	.switch {
	  position: relative;
	  display: inline-block;
	  width: 35px;
	  height: 19px;
	}

	.switch input { opacity: 0; width: 0; height: 0; }

	.slider {
	  position: absolute;
	  cursor: pointer;
	  top: 0;
	  left: 0;
	  right: 3px;
	  bottom: 0;
	  background-color: #333;
	  -webkit-transition: .4s;
	  transition: .4s;
	  border-radius:2px;
	  display: inline-block; height: 20px;
	}

	.slider:before {
	  position: absolute;
	  content: "";
	  height: 11px;
	  width: 11px;
	  left: 5.5px;
	  bottom: 4.5px;
	  background-color: gold;
	  -webkit-transition: .4s;
	  transition: .4s;
	  border-radius:1px;
	}

	input:checked + .slider { background-color: #222; }
	input:focus + .slider { box-shadow: 0 0 1px #2196F3; }

	input:checked + .slider:before {
	  -webkit-transform: translateX(11px);
	  -ms-transform: translateX(11px);
	  transform: translateX(11px);
	  background-color:#3f3;
	}

	/* Rounded sliders */
	.slider.round { border-radius: 34px; }
	.slider.round:before { border-radius: 50%; }

/* Floating Socialmed Buttons (Left) */

	.icon-bar {
	  position: fixed;
	  top: 50%;
	  transform: translateY(-50%);
	  z-index: 1;
	}

	.icon-bar a {
	  display: block;
	  text-align: center;
	  padding: 6px 10px 6px 7px;
	  transition: width 0.3s ease-in-out;
	  color: white;
	  font-size: 20px;
	  width:35px;
	}

	.icon-bar a:hover {
	  background-color: #222;
	  width: 50px;
	}

	.youtube {
	  border-top: 1px solid #bb0000;
	  background: #333;
	  color: white;
	}

	.facebook {
	  border-top: 1px solid #3B5998;
	  background: #333;
	  color: white;
	}

	.pinterest {
	  border-top: 1px solid #cb2027;
	  background: #333;
	  color: white;
	}

	.instagram {
	  border-top: 1px solid #125688;
	  background: #333;
	  color: white;
	}

	.reddit {
	  border-top: 1px solid #ff5700;
	  background: #333;
	  color: white;
	  border-bottom: 1px solid white;
	}

	.content {
	  margin-left: 75px;
	  font-size: 30px;
	}

	/* JB: Additional Top and Bottom Design */
	
		.triangle {
			width: 0;
			height: 0;
		}
		.triangle1 {
			border-right: 35px solid transparent; /* Half the width of the base */
			border-bottom: 35px solid #333; /* Height and color of the triangle */
		}
		.triangle2 {
			border-bottom: 35px solid transparent;
			border-left: 35px solid #333;
		}

/* List of Top Non-Socmed Sites: copied from .integrations in profile.css */

	.top-nss { margin: 15px 0; }
		/* To Delete: .top-nss br { display:none } */
		.top-nss > div {
			width:55%; background: #222; margin: 0 auto; display:flex; flex-wrap:wrap; border-radius:5px; overflow:hidden;
		}
		.top-nss .lighter { background: #333; }
		.top-nss a:hover { background: green; }
			.top-nss a[title="ChatGPT"]:hover { background:#555 }
			.top-nss a[title="Wikipedia"]:hover { background:#295ad6 }
			.top-nss a[title="Amazon"]:hover { background:darkorange }
			.top-nss a[title="LinkedIn"]:hover { background:#0a66c2 }
			.top-nss a[title="Netflix"]:hover { background:#e50914 }
			.top-nss a[title="SharePoint"]:hover { background:#038186 }
			.top-nss a[title="Canva"]:hover { background:#5a32fa }
			.top-nss a[title="AliExpress"]:hover { background:#f79917; }
		.top-nss a { flex:10%; padding:10px; cursor:pointer; }
			.top-nss img { width:30px; display:block; }
				.top-nss img.w25 { width:25px }
				.top-nss img.pt3 { padding-top:3px }
				.top-nss img.pt6 { padding-top:6px }

/* Sliding Side Navigation (Right) */

	.sidenav {
	  height: 100%;
	  width: 0;
	  position: fixed;
	  z-index: 3;
	  top: 0;
	  right: 0;
	  background-color: #111;
	  overflow-x: hidden;
	  transition: 0.5s;
	  padding-top: 25px;
	}

	.sidenav > div { margin-left:30px; position:relative; display:none; }

	.sidenav a {
	  padding: 8px;
	  text-decoration: none;
	  font-size: 14px;
	  color: #ccc;
	  display: block;
	  transition: 0.3s;
	}

	.sidenav a:hover { color: #cfc; }

	.sidenav .closebtn {
	  position: absolute;
	  top: -40px;
	  right: 5px;
	  font-size: 36px;
	}

	.sidenav .closebtn:hover { color:white; }

	.openbtn {
		cursor:pointer; top:150px; right:0; position:absolute; background:#222; color:white; font-size:20px; padding: 0 10px; border-top-left-radius:15px; border-bottom-left-radius:15px;
	}

	.openbtn:hover { color: gold; }

	@media screen and (max-height: 450px) {
	  .sidenav {padding-top: 15px;}
	  .sidenav a {font-size: 18px;}
	}

/* Final Touch */

	body { background:#333; color:white; }
	.topnav ul { margin: 1px 0 0 0; }
	.topnav > div { margin: 5px 0 0 0; }

	#private-mode { top:10px; right:10px; }
	.pm-label {
		background: rgba(51,51,51,.5); color: rgba(255,255,255,.6); vertical-align: 5px; border-radius: 2px; font-size: 10px; padding: 2.5px 6px 4px 5px; display: inline-block; height: 20px;
	}
	#main-texts { padding: 30px 0 15px 0; color:#333; }
		#main-texts > h2 {
			font-weight:bold; font-size:50px; text-shadow: 2px 1px 2px black; width:92%; margin: 0 auto;
		}
			#main-texts > h2 > * { font-family: Georgia, serif !important; }
		#main-texts > p { font-size:18px; width:80%; margin: 0 auto; }
			#main-texts label { color:white; background:rgba(51,51,51,.7); padding: 0 5px 0 5px; vertical-align:2px; border-radius:3px; }
				#main-texts label > span { font-family:courier }
	#search-form { padding: 20px 0 16px 0; background: rgba(51, 51, 51, 0.1); }
		#in-search { outline: none; box-shadow: none; border:0; background:rgba(51,51,51,.5); }
			#data-div .btn { height:40px; border-radius: 0 5px 5px 0; background:#333 !important; }
			#data-div .btn:enabled:hover { background: #212529 !important; }
		input:focus { outline: none; }
		.single-selection { height:40px; border-radius: 0 5px 5px 0; pointer-events: none; display:none; } /* unused */
	.private { display:none }
		.dropdown-item:active { background: green !important; }

#content-ads { background:rgba(51,51,51,.7); }
	#content-ads > div { margin: 50px auto 10px auto; padding: 10px 0; width:77%; }
	#content-ads li { border: 0; padding-left: 10px !important; }
		#content-ads li:nth-child(odd) { background: rgba(0, 0, 0, 0.5) }
		#content-ads li:nth-child(even) { background:#222 }
			#content-ads img { width: 220px; height: 150px; }
			#content-ads a.btn { top: 10px !important; right: 10px !important; padding: 0px 5px; color:white; }

#mobile-recommendation { display:none }

/* Responsive Web Design */

	@media only screen and (max-width: 768px) {
		.openbtn { top:45px }
		.sidenav .closebtn { top: -35px; right: 10px; }
		#main-texts > h2 { margin-top:35px !important }
		.top-nss { margin-bottom: 50px !important; }
			.top-nss > div { width: 90% !important; }
				.top-nss a, .top-nss span { flex:16.66% !important }
		#data-div { width:90% !important; }
		#content-ads, #main-texts b, .icon-bar { display: none !important }
		#mobile-recommendation {
			width:90%; margin: -25px auto 0 auto; padding:20px; background:rgba(51,51,51,.8); display:block; border-radius:5px;
		}
			#mobile-recommendation > img { border-radius:5px; }
	}