/*
	UI Stylesheet
	#264653
	#2a9d8f
	#e9c46a
	#f4a261
	#e76f51
*/

*{
	-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
	scroll-behavior: smooth;
}

*[Cursor="Pointer"]{
	cursor: pointer;
}


*{
	outline: var(--Debug-ElementOutline);
	transition: var(--Element-Transition-Delay);
}

body{
	margin: 0;
	padding: 0;
}

a{
	text-decoration: none;
}

.Header{
	background-color: white;
	box-shadow: var(--Element-BoxShadow);
	width: 100%;
	height: 50px;
	position: fixed;
}

.Header_Logo{
	height: 40px;
	padding: 5px;
	/* filter:hue-rotate(30px); */
}

.UI_ElementContainer{
	width: 100%;
	height: 100%;
	position: fixed;
	margin: 0;
	padding: 0;
	top: 0;
	pointer-events: none;
}

.UI_ElementContainer > *{
	pointer-events: all;
}

.UI_Header{
	background-color: #264653;
	background-color: var(--English-Blue-Level-1D);
	margin: 0;
	padding: 0;
	width: 100%;
	height: 50px;
	display: grid;
	grid-template-columns: 50px 1fr 50px;
	align-content: center;
	align-items: center;
	position: fixed;
	user-select: none;
	z-index: 50;
	overflow-y: hidden;
	transition: var(--Element-Transition-Delay);
}

.UI_Header_Hamburger{
	width: 30px;
	height: 30px;
	padding: 10px;
	transition: var(--Element-Transition-Delay);
}

.UI_Header_Hamburger:hover{
	background-color: #2a9d8f;
	background-color: var(--English-Blue-Level-2D);
	cursor: pointer;
}

.UI_Header_Hamburger:active{
	transform: scale(0.95);
}

.UI_Header_Title{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding-left: 10px;
	padding-right: 10px;
}

.UI_Header_Title[ActiveTitle = "Home"]{
	/* transform: translateY(20px); */
}

.UI_Header_Title[ActiveTitle = "AltPage"]{
	transform: translateY(-100%);
	opacity: 0%;
}

.UI_Header_Title_AltPage{
	position: absolute;
	/* background-color: red; */
	width: calc(100% - 20px);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding-left: 10px;
	padding-right: 10px;
	height: 100%;
	pointer-events: none;
}

.UI_Header_Title_AltPage > a{
	width: auto;
	pointer-events: auto;
	margin: 0;
}

.UI_Header_Title_AltPage > a > h1 {
	margin: 0;
}

.UI_Header_Title[ActiveTitle = "Home"] + .UI_Header_Title_AltPage{
	transform: translateY(100%);
	opacity: 0%;
}

.UI_Header_Title[ActiveTitle = "AltPage"] > .UI_Header_Title_AltPage{
	transform: translateY(calc(100% - 10px));
	
}

.UI_Header_Title_Text{
	font-family: "Gilroy Heavy";
	color: white;
	text-transform: uppercase;
	margin: 0;
	transition: var(--Element-Transition-Delay);
}

.UI_Header_Title_Text:hover{
	letter-spacing: 5px;
}

@media only screen and (max-width: 650px){
	.UI_Header_Title_Text:hover{
		letter-spacing: 1px;
	}
	.UI_Header_Title_Text{
		font-size: 1.7rem;
		font-weight: normal;
	}
}

.UI_Header_Share{
	width: 30px;
	height: 30px;
	padding: 10px;
	transition: var(--Element-Transition-Delay);
}

.UI_Header_Share:hover{
	background-color: #2a9d8f;
	background-color: var(--English-Blue-Level-2D);
	cursor: pointer;
}

.UI_Header_Share:active{
	transform: scale(0.95);
}

.UI_Header_Share_Toast{
	background-color: #264653;
	background-color: var(--English-Blue-Level-1D);
	margin-top: 50px;
	width: auto;
	padding: 5px;
	float: right;
	z-index: 0;
	opacity: 0;
}

.UI_Header_Share_Toast_Text{
	font-family: Raleway;
	color: white;
	margin: 0;
	text-align: center;
}

.UI_Sidebar{
	position: fixed;
	height: calc(100% - 50px);
	top: 50px;
	width: 300px;
	background-color: #264653;
	background-color: var(--English-Blue-Level-1D);
	padding: 10px;
	padding-right: 20px;
	display: grid;
	grid-template-rows: 1fr auto;
	grid-template-columns: 1fr;
	user-select: none;
	overflow-y: auto;
	z-index: 50;
	transition: var(--Element-Transition-Delay);
}

.UI_Sidebar[State = "Collapsed"]{
	transform: translateX(-100%);
}

.UI_Sidebar[State = "Expanded"]{
	transform: translateX(0%);
}

.UI_Sidebar_Logo{
	width: 300px;
	/* background-color: red; */
}

.UI_Sidebar_Main{
	width: 100%;
	display: flex;
	flex-direction: column;
}

.UI_Sidebar_Main_Item{
	width: 100%;
	height: 30px;
	display: flex;
	flex-direction: row;
	align-items: center;
	margin: 0;
	padding: 5px;
	border-radius: 5px;
	transition: var(--Element-Transition-Delay);
}

.UI_Sidebar_Main_Item:hover{
	background-color: #2a9d8f;
	background-color: var(--English-Blue-Level-2D);
}

.UI_Sidebar_Main_Item_Text{
	font-family: "Gilroy Medium";
	color: white;
	margin: 0;
	font-size: 20;
	text-decoration: none;
}

.UI_Sidebar_Secondary{
	width: 1fr;
	display: flex;
	flex-direction: column;
	border-top: solid white 1px;
	padding-bottom: 20px;
}

.UI_Sidebar_Secondary_Item{
	width: 100%;
	height: 30px;
	display: flex;
	flex-direction: row;
	align-items: center;
	margin: 0;
	padding: 5px;
	border-radius: 5px;
	transition: var(--Element-Transition-Delay);
}

.UI_Sidebar_Secondary_Item:hover{
	background-color: #2a9d8f;
	background-color: var(--English-Blue-Level-2D);
}

.UI_Sidebar_Secondary_Item_Text{
	font-family: "Gilroy Medium";
	color: white;
	margin: 0;
	font-size: 15;
	text-decoration: none;
}

.UI_Sidebar_Secondary_Footer{
	font-family: Roboto;
	color: white;
	margin: 0;
	font-size: 10;
	text-decoration: none;
	padding-left: 5px;
}

.UI_Sidebar_Background{
	background-color: var(--English-Blue-Level-2D);
	width: 100%;
	height: calc(100% - 50px);
	position: fixed;
	top: 50px;
	opacity: 0%;
	pointer-events: none;
}

.UI_Sidebar_Background[State = "Collapsed"]{
	opacity: 0%;
	pointer-events: none;
}

.UI_Sidebar_Background[State = "Expanded"]{
	opacity: 75%;
	pointer-events: all;
}

.UI_ImagePreview{
	background-color: var(--BGColor-Opacitated);
	backdrop-filter: var(--Element-BackdropBlur);
	position: fixed;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.UI_ImagePreview[State="Active"]{
	pointer-events: auto;
	opacity: 100%;
}

.UI_ImagePreview[State="Inactive"]{
	pointer-events: none;
	opacity: 0%;
}

.UI_ImagePreview_Close{
	/* background-color: var(--English-Blue-Level-2); */
	width: 50px;
	height: 50px;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 5px;
	position: absolute;
	right: 20px;
	top: 20px;
	cursor: pointer;
	z-index: 500;
}

.UI_ImagePreview_Close:hover{
	background-color: var(--English-Blue-Level-2D);
	box-shadow: var(--Element-BoxShadow);
}

.UI_ImagePreview_Close_Icon{
	width: 30px;
	height: 30px;
	padding: 5px;
}

.UI_ImagePreview_Image{
	max-height: 95%;
	max-width: 95%;
	object-fit: contain;
	box-shadow: var(--Element-BoxShadow);
	cursor: pointer;
	opacity: 0%;
}

.UI_ImagePreview_Image[Status="Loaded"]{
	opacity: 100%;
}

.UI_ImagePreview[State="Active"] > .UI_ImagePreview_Image{
	pointer-events: auto;
	transform: scale(1);
	opacity: 100%;
}

.UI_ImagePreview[State="Inactive"] > .UI_ImagePreview_Image{
	pointer-events: none;
	transform: scale(0.9);
	opacity: 0%;
}

.TargetArea_CornerButtons{
	width: 300px;
	max-width: 500px;
	height: 70px;
	position: fixed;
	bottom: 0;
	right: 0;
	z-index: 150;
	pointer-events: none;
}

.TargetArea_CornerButtons:hover > .CornerButtons{
	opacity: 100%;
}

.CornerButtons{
	position: fixed;
	bottom: 20px;
	right: 20px;
	width: auto;
	display: flex;
	flex-direction: row;
	cursor: pointer;
	z-index: 98;
/* background: blue; */
	opacity: 100%;
	transition: var(--Element-Transition-Delay);
}

.CornerButtons_Button{
	z-index: 98;
	filter: var(--Element-Icon-Brightness);
	background-color: var(--BGColor-Menus);
	padding: 7px;
	border-radius: 7px;
	border-bottom-style: solid;
	border-bottom-color: var(--BGColor-General);
	border-bottom-width: 3px;
	box-shadow: var(--Element-BoxShadow);
	width: 30px;
	height: 30px;
	margin-left: 10px;
	transition: var(--Element-Transition-Delay);
}

.CornerButtons_Button:hover{
	background-color: var(--BGColor-Hover);
	transform: scale(1.05);
	box-shadow: var(--BoxShadow-Hover);
	cursor: pointer;
}
.CornerButtons_Button > img {
	filter: var(--Element-Icon-Brightness);
}

.Page_Main_Content, .Main_Content_Container{
	width: calc(100%);
	height: calc(100% - 50px);
	position: fixed;
	margin-top: 50px;
	overflow-y: auto;
	/* padding: 20px; */
	padding-top: 0px;
	transition: var(--Element-Transition-Delay);
}


.Main_Subwindows_Container{
	width: calc(100%);
	height: calc(100% - 50px);
	position: fixed;
	margin-top: 50px;
	overflow-y: auto;
	/* padding: 20px; */
	padding-top: 0px;
	z-index: 40;
	transition: var(--Element-Transition-Delay);
}

::-webkit-scrollbar {
	width: 5px;
	height: 5px;
	border-radius: 10px;
	z-index: 75;
	transition: var(--Element-Transition-Delay);
}
::-webkit-scrollbar:hover{
	width: 10px;
}



/* Track */
::-webkit-scrollbar-track {
	
	border-radius: 10px;
}

/* Handle */
::-webkit-scrollbar-thumb {
	background-color: var(--English-Blue-Base);
	/* border-radius: 10px; */
	
	transition: var(--Element-Transition-Delay);
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
	background-color: var(--English-Blue-Level-1D);
	/* border-radius: 10px; */
	width: 50px;
	height: 50px;
}
/* Selection color */
::selection{
	background-color: var(--English-Blue-Level-3L);
}

.ComingSoon{
	position: absolute;
	width: calc(100% - 40px); 
	height: calc(100% - 50px - 40px);
	top: 50px;
	background-color: #264653;
	z-index: 49;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 20px;
}

.ComingSoon_Icon{
	width: 150px;
}

.ComingSoon_Title{
	font-family: Hansief;
	color: white;
	text-transform: uppercase;
	font-size: 55;
	margin: 0;
	text-align: center;
}

.ComingSoon_Subtitle{
	font-family: Raleway;
	color: white;
	text-transform: uppercase;
	margin: 0;
	text-align: center;
}

.Page_BackButton{
	display: grid;
	grid-template-columns: 50px 1fr;
	position: sticky;
	top: 10px;
	background-color: #264653;
	align-items: center;
	transition: var(--Element-Transition-Delay);
	width: 50px;
	overflow-x: hidden;
	left: 10%;
	display: none;
}

.Page_BackButton:hover{
	width: 250px;
}

.Page_BackButton_Icon{
	width: 30px;
	padding: 10px;
}

.Page_BackButton_Text{
	font-family: Roboto;
	color: white;
	text-wrap: nowrap;
}

.UI_Header_Branch_BackToParent{
	display: grid;
	grid-template-columns: 50px 1fr;
	position: fixed;
	top: 60px;
	/* left: 10px; */
	background-color: var(--English-Blue-Level-1D);
	align-items: center;
	transition: var(--Element-Transition-Delay);
	width: 50px;
	height: 50px;
	overflow-x: hidden;
	border-top-right-radius: 25px;
	border-bottom-right-radius: 25px;
	/* left: 10%; */
	display: none;
	user-select: none;
	cursor: pointer;
}

.UI_Header_Branch_BackToParent:hover{
	width: 130px;
	box-shadow: 5px 0px 0px 0px #e76740;
}

.UI_Header_Branch_BackToParent_Icon{
	width: 30px;
	padding: 5px;
	padding-left: 7px;
}

.UI_Header_Branch_BackToParent_Text{
	font-family: Roboto;
	color: white;
	text-wrap: nowrap;
	margin: 0;
}

.General_Button{
	border: none;
	outline: none;
	border-radius: 25px;
	background-color: var(--English-Blue-Level-1D);
	color: white;
	font-family: var(--Text-Font-Paragraph);
	font-size: 17px;
	cursor: pointer;
}

.General_Button[Primary]{
	border: solid transparent 3px;
	background-color: var(--English-Blue-Level-1D);
	color: white;
}

.General_Button[Secondary]{
	border: solid var(--English-Blue-Level-1D) 3px;
	background-color: transparent;
	color: black;
}

.General_Button:hover{
	background-color: var(--English-Blue-Level-2D);
	color: white;
}

.Curtain{
    position: absolute;
    width: 100%;
    height: 80px;
    z-index: 10;
    /* background-color: red; */
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    grid-template-columns: repeat(auto-fit, minmax(80px, 100px));
    grid-template-rows: 1fr;
    /* display: flex;
    flex-direction: row; */
    overflow: hidden;
    pointer-events: none;
    /* transform: translate(-80px, -50px) rotate(-5deg); */
}

.Curtain_Item{
    width: 100%;
    height: 100%;
    background-color: white;
    animation-name: Curtain_Reveal;
    animation-duration: 0.6s;
    animation-delay: 2s;
    animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
    animation-fill-mode: forwards;
}

@keyframes Curtain_Reveal{
    0%{
        /* background-color: white; */
        width: 100%;
    }
    100%{
        /* background-color: var(--English-Blue-Level-1L); */
        width: 0%;
    }
}