/**
 * Copyright (C) 2023 ProjectRootProxy
 */

:root {
	--bluegray-1: #4D4E58;
	--bluegray-2: #D7D8E5;
	--bluegray-3: #A3A5B8;
	--bluegray-3-2: #757786;
	--bluegray-4: #2F2F34;
	--bluegray-4-2: #2A2A31;
	--bluegray-5: #3E3E46;
	--bluegray-5-2: #3A3A43;
	--bluegray-6: #26262C;
	--bluegray-7: #23232C;
	--section_bot_padding: 45px;
	--paragraph_bot_padding: 15px;
	--diff_padding: 30px;
	--trans-speed: 200ms;
	--shadow-dark: #1B1F26;
	--shadow-light: #383C44;
	--shadow-light-2: #101216;
	--section-color: #484952;
	--topnav-hover: #2A2B31;
}

html {
	scroll-padding-top: 105px;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: sans-serif, "Arial";
}

.anim-delay {
	-webkit-transition: none !important;
	animation: none !important;
}

::selection {
	background-color: #313666;
}

::-webkit-scrollbar {
	background-color: var(--bluegray-5);
}
::-webkit-scrollbar-track {
  background: var(--bluegray-5);
}
::-webkit-scrollbar-thumb {
  background: var(--bluegray-3-2);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--bluegray-3);
}
::-webkit-scrollbar-corner {
  background: var(--bluegray-5);
}

body {
	display: flex;
	flex-direction: column;
	align-items: center;
/*	background-color: #4B4C5A;*/
	background-image: linear-gradient(to right, #4B4C5A, #494A58);
}

.sidenav-sidenav-off {
	display: None;
}

.sidenav-other-off {
	padding-left: 0px;
}

.page-padding {
	padding: 0 35px;
}

.alert {
	font-weight: bold;
	color: #191924;
	background-image: linear-gradient(to right, #767694, #6A6A86);
	border-radius: 5px;
	box-shadow: 0 0 12px 6px #1E1E2C;
	border: 2px solid #14141C;
}

.panel-border {
	background-color: #393B46;
	border-radius: 5px;
	padding: 35px 15px 15px 15px;
	background-image: linear-gradient(to right, #343641, #32343F);
	border: 2px solid #2E313C;
	box-shadow: 0 0 25px 8px #353844;
	margin-top: 45px;
	margin-bottom: 30px;
}

.section {
	display: flex;
	flex-direction: column;
	padding: 0 15px 15px 15px;
	margin-bottom: 15px;
	border-radius: 5px;
	border: 2px solid #2F313C;
	background-image: linear-gradient(to right, #3D3E4A, #373847);
}

.instruction-card {
	padding: 15px;
	border-radius: 5px;
	border: 2px solid #2F313C;
	background-image: linear-gradient(to right, #3D3E4A, #373847);
}


.page {
	display: flex;
	flex-direction: column;
	width: 100%;
	padding: 45px 0 0 0;
}

.panel-label {
	padding-top: 9px;
}

.panel_section_title {
	text-shadow: 0 0 10px var(--shadow-light-2);
	color: var(--bluegray-2);
	padding-bottom: 35px;
	font-weight: bold;
	font-size: 2rem;
}


.section-top-radius {
	border-radius: 0 0 5px 5px;
}


/* instructions  */
.inst-img-margin-left {
	margin-left: 20px;
}

.inst-padding-left {
	padding-left: 15px;
}

.inst-padding-right {
	padding-right: 15px;
}

.inst-flex-row-center {
	display: flex;
	align-items: center;
	justify-content: center;
}


.section-title {
	margin-top: 16px;
	margin-bottom: 14px;
}

p, .section-title {
	padding: 0.5rem;
	color: var(--bluegray-2);
	line-height: 1.7rem;
}

h3 {
	padding: 0.5rem;
	color: var(--bluegray-2);
}

.rem-p-bot-pad {
	padding-bottom: 0;
}

.links-to-pages {
	cursor: pointer;
	transition: all var(--trans-speed);
}

.links-to-pages:hover {
	color: white;
	background-color: #121316;
	border-radius: 3px;
}

/*###########################*/

/*this is for image elements border to appear*/
.hover {
	border: 3px solid var(--bluegray-3);
	border-radius: 3px;
	opacity: 0;
	height: 100px;
	transition: opacity var(--trans-speed);
}
.hover:hover {
	opacity: 1;
}

/*js handles this*/
.hover_target_on {
	border-radius: 3px;
	animation: hoveron 1000ms forwards;
}
@keyframes hoveron {
	from {background-color: none;}
	to {background-color: var(--bluegray-4);}
}

.hover_target_off {
	animation: hoveroff var(--trans-speed) forwards;
}
@keyframes hoveroff {
	from {background-color: var(--bluegray-4);}
	to {background-color: none;}
}

/* sidebar images */
.sidenav-img-cont {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	opacity: 0;
}

.sidenav-img {
	box-shadow: 0 0 10px 3px var(--shadow-dark);
	border-radius: 4px;
	width: 275px;
}

.sidenav_img_on {
	animation: sidenavon 400ms forwards;
}
@keyframes sidenavon {
	0% {opacity: 0;}
	50% {opacity: 0;}
	100% {opacity: 100%;}
}

.sidenav_img_off {
	animation: sidenavoff 200ms forwards;
}
@keyframes sidenavoff {
	0% {opacity: 100%;}
	100% {opacity: 0;}
}

.section-title-noimg {
	padding-bottom: 25px;
}

/*#############################################*/

.hover_img_cont {
	position: relative;
	display: flex;
	justify-content: center;
}

.contents_tab_link {
	padding: 0 0 var(--paragraph_bot_padding) 0;
	font-weight: bold;
	font-size: 2rem;
}

.hover-img {
	border: 2px solid #2C2E38;
	box-shadow: 0 0 15px 5px #2D3039;
}

.darker-border {
	border: 2px solid #0E0E0E;
}

.contents_panel_link {
	padding: 0 0 var(--paragraph_bot_padding) 0;
	font-weight: bold;
	font-size: 1.2rem;
}

/* ########################################### */

.flex-row-center {
	display: flex;
	align-items: center;
	justify-content: center;
}

.flex-col-center {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.flex-col-center-nojustify {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.tab_section_title {
	color: var(--bluegray-2);
	padding: 0 0 var(--section_bot_padding) 0;
	font-weight: bold;
	font-size: 2rem;
	text-decoration-line: underline;
	text-align: center;
}

.blender_panel_cap {
	border-radius: 8px;
	padding-bottom: var(--section_bot_padding);
}

.panel_bot_padding {
	padding-bottom: var(--section_bot_padding);
}

.paragraph_bot_padding {
	padding-bottom: var(--paragraph_bot_padding);
}

.diff_bot_margin {
	margin-bottom: var(--diff_padding);
}

.sidebar-inst {
	color: var(--bluegray-2);
	margin-top: 12px;
	font-size: 0.8rem;
}

.note {
	color: var(--bluegray-2);
	font-size: 0.8rem;
}

/*################## TOP-NAV MENU ####################*/

.top-nav {
	border-bottom: 2px solid var(--bluegray-4-2);
	border-right: 2px solid var(--bluegray-4-2);
	width:100%;
	margin-left:0;
	left:0;
	position: fixed;
	top: 0;
	z-index: 1;
	overflow: hidden;
  background-color: #2E3036;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.nav-row {
	display: flex;
	position: relative;
}

/*############## LINKS ################*/


.section-link {
	color: var(--bluegray-2);
	transition: color var(--trans-speed);
}

.section-link:hover {
	color: #EBEEF8;
	cursor: pointer;
}

.cat-top {
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: default;
  overflow: hidden;
  font-size: 25px;
  padding: 0 25px;
  height: 45px;
  color: var(--bluegray-2);
  white-space: nowrap;
}

.cat-top:hover {
	cursor: pointer;
	text-decoration: underline;
	color: #EBEEF8;
}


.cat-topcont:hover {

	background-color: var(--topnav-hover);
}


/* ########## TOP-NAV CATEGORY LINKS ########## */

.cat-links-cont {
  display: none;
}

.cat-topcont:hover .cat-links-cont {
  display: flex;
  position: fixed;
	overflow: hidden;

	border-bottom: 2px solid var(--bluegray-4-2);
	border-right: 2px solid var(--bluegray-4-2);

	white-space: nowrap;
	margin-left:0;
	width:100%;
  color: var(--bluegray-2);
	top: 0;
	z-index: 1;
	margin-top: 45px;
  left: 0;
  background-color: var(--topnav-hover);
  justify-content: center;
}

.cat-links-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
}

.cat-links-row .section-link:hover {
  text-decoration: underline;
}

.cat-links-row .section-link {
	display: flex;
	align-items: center;
	justify-content: center;
  font-size: 1rem;
  min-height: 45px;
  padding: 0 30px;
}

/* ######### SIDE-NAV #########  */

.side-nav {
	position: fixed;
	z-index: 2;
	border-right: 2px solid var(--bluegray-7);
	background: var(--bluegray-6);
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
}

.side-nav-cont {
	position:relative;
	height:100vh;
}

.sidenav-img-cont-2 {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.sidenav-img-label {
	text-shadow: 0 0 15px var(--shadow-dark);
	color: var(--bluegray-2);
	font-weight: bold;
	padding-bottom: 8px;
	font-size: 18px;
}

/* ########## SIDEBAR WIDTH ##########  */
.remove-sidebar {
	display: None;
}

.adj-for-removed-sidebar {
	/* for things to the right of the sidenav	*/
	padding-left: 0px;
}


#loader_cover {
	position:absolute;
	width:100%;
	height:600px;
	left:0;
	top:45px;
	z-index:2;
	overflow:hidden;

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


#loader_cover_textcont {
	width: 100%;
	height: 100%;

	color: var(--bluegray-2);

	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 4rem;
}


.dark-blue-panel {
	background-image: linear-gradient(to right, #1D1E26, #262632);
	border: 3px solid #343958;
}


#loader_cover_text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background-image: linear-gradient(to right, #1D1E26, #262632);
	padding: 20px 40px 15px 40px;
	border-radius: 10px;
	border: 2px solid #343958;
	box-shadow:0 0 25px 8px #222530;
}

#loader-toptext {
	font-size: 3rem;
}

#loader-midtext {
	font-size: 1.5rem;
}

#loading_demo_anims {
	font-size: 1rem;
}


/* loader animtions  */

.loader_anim {
	border-radius: 3px;
	animation: 1s infinite alternate loaderanim;
}


@keyframes loaderanim {
	0% {background-color:#242634;box-shadow:0 0 10px 5px #242634;}
	100% {background-color:#312B82;box-shadow:0 0 3px 6px #312B82;}
}