/*	**************************************************
		Main Style for kiwi.tk 
	********************************************** */

@import url(normalize.css); /* Browser style normalize */
@import url(variables.css); /* Css Variables */
@import url(typography.css); /* Site topography */
@import url(fontawsome.css); /* fontawsome icons */

/* ID ITEMS BEGIN ----------------------------------------------------------------------------------------------------------------------------------- */

#FrameContainer, #ContentContainer, #ColorPickerContainer /* Window Containers ________________________________________________________________________________ */
{	position: absolute;
	left: var(--WindowDefaultLeft);
	top: var(--WindowDefaultTop);
	height: var(--WindowDefaultHeight);
	width: var(--WindowDefaultWidth);
	
	border: var(--BorderWidth) solid var(--BorderColor);
	border-radius: var(--BorderRadius) var(--BorderRadius) var(--BorderRadius) var(--BorderRadius); 
	resize: both;
	overflow: hidden; }

#MainWindow { min-height: 100vh; margin: 0; padding: 0; }
#FrameContainer { visibility: hidden; }

#ContentWindow, #FrameWindow, #MainWindow, #ColorPicker /* Window Contense objects __________________________________________________________________ */
{	width:100%; height: calc(100% - var(--MenuHeight)); /* Width and Height */
	overflow-x: hidden; overflow-y: auto; /* Vertical scrollbar only and only if required */
	scrollbar-width: thin; /* Thin Scrollbar */
	scrollbar-color: var(--ScrollbarColor) var(--ScrollbarTrackColor); } /* Scrollbar and scrollbar background colors */

#ColorPickerContainer 
{	right: var(--WindowDefaultLeft); width: 29.95vw; left: 70vw; top: calc(var(--BodyMargin) + ver(--MenuHeight)); 
	visibility: hidden; height: calc(100vh - var(--BodyMargin) - var(--BodyMargin) - ver(--MenuHeight)); z-index: var(--TheTopZindex);}


#ContentContainer { z-index: var(--TheTopZindex); }
#FrameContainer { z-index: var(--TheTopZindex); }

#ContentWindow, #FrameWindow, #ColorPicker { background-color: var(--BackgroundColorThree); }
	
#ContentWindow::-webkit-scrollbar, #MainWindow::-webkit-scrollbar, #ColorPicker::-webkit-scrollbar
{	width: 0.4vw; } /* Scrollbar width */
#ContentWindow::-webkit-scrollbar-track, #MainWindow::-webkit-scrollbar-track, #ColorPicker::-webkit-scrollbar-track
{	background: var(--ScrollbarTrackColor); } /* Scrollbar track (background) color */
#ContentWindow::-webkit-scrollbar-thumb, #MainWindow::-webkit-scrollbar-thumb, #ColorPicker::-webkit-scrollbar-thumb
{	background-color: var(--ScrollbarColor); } /* Scrollbar color */

#LoadingIco { font-size: 200rem; } /* Big loading spinner icon */

/* CLASS ITEMS BEGIN -------------------------------------------------------------------------------------------------------------------------------- */
.FloatRight { float: right; }
.FloatLeft { float: left; }
.NoBorder { border: none; }
.NoPadding { padding: 0; }

.AlignCenter { text-align: center; }

.Static { position: static; }

.MenuIcon { width: 1.8vw; height: 1.8vw; margin-right: 0.4vw; padding-top: 0.4vw;}

.MenuLineItem { vertical-align: 5rem; } /* Fix vertical alignment in menu bars */
 /*.TopMargin { margin-top: 0vw; } Fix vertical alignment in menu bars (float Right Buttons) */
.Selected { color: var(--HoverColor); background-color: var(--HoverBackground); }

/* DESKTOP SHORTCUTS --------------------------------------------------------------------------------------------------------------------------------- */
.DesktopShortcut
{	border: var(--BorderWidth) solid var(--BorderColor);
	border-radius: var(--BorderRadius) var(--BorderRadius) var(--BorderRadius) var(--BorderRadius);
	background-color: var(--BackgroundColorTwo);
	width: 23.5vw;
	display: inline-block;
	margin-left: 1.1vw;
	margin-top: 1vw;
	overflow: hidden;
	white-space: nowrap; }
.DesktopShortcut img
{	float:left;
	height: 3.5vw;
	margin: 0.5vw; }
.DesktopShortcut h3{ margin-left: 5vw; }
/*.DesktopShortcut:hover
{	color: var(--HoverColor); background-color: var(--HoverBackground); transition-duration: var(--TransitionTime); cursor: pointer; } /* Mouse Over */	

.DesktopShortcut button{ float: right; margin-right: 0.2vw; margin-top: 0.2vw; }


/* Change Autocomplete styles in webkit (Chrome) */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  border: 1px solid green;
  -webkit-text-fill-color: green;
  -webkit-box-shadow: 0 0 0 30px transparent inset !important;
  -webkit-box-shadow: 0 0 0px 1000px #000 inset;
  transition: background-color 5000s ease-in-out 0s;
}