@charset "utf-8";

:root {
	--sideNavBackground: rgb(33,33,33);
	--sideNavItemBackgroundHover: rgb(64,64,64);
	--bodyTextColor: rgb(238,238,238);
	--bodyBackgroundColor: rgb(17,17,17);
	/*color of theme switch button*/
	--themeButton: #e6e6e6;
	/*visibility of element when light theme*/
	--showLight: inherit;
	/*visibility of element when dark theme*/
	--showDark: inherit;
	--regTextColor: rgb(189,189,189);
	--subTextColor: rgba(130,130,130,1.00);
}

/*sidenav*/
.sidenav {
    height: 100%;
    width: 320px;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: var(--sideNavBackground);
    overflow-x: hidden;
    padding-top: 20px;
	/*margin-top: 28px;*/
	border-left: 1px solid #0063B1;
	transition: width 0.5s;
}
.main {
    margin-left: 330px; /* Same as the width of the sidenav */
	transition: margin-left 0.5s;
}

@media screen and (max-width: 790px) {
	.sidenav {
		width: 270px;
	}
	.main {
		margin-left: 270px;
	}
}
@media screen and (max-width: 730px) {
	.sidenav {
		width: 210px;
	}
	.main {
		margin-left: 210px;
	}
}
@media screen and (max-width: 670px) {
	.sidenav {
		width: 180px;
	}
	.main {
		margin-left: 180px;
	}
}
/*page title text style*/
.page_title {
	font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
	font-size: 24px;
	font-weight: 400;
	padding-top: 34px;
	color: var(--bodyTextColor);
}
/*side navigation section heading text style*/
.sidebar_title {
	font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
	padding-left: 14px;
	font-weight: 500;
	color: var(--bodyTextColor);
}
/*heading text style*/
.heading {
	font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
	font-size: 20px;
	font-weight: 400;
	color: var(--bodyTextColor);
}
/*list item text style*/
.li, .st, .li.em {
	font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
	font-size: 16px;
	color: var(--regTextColor);
}
/*paragraph text style*/
.p {
	font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
	font-size: 16px;
	color: var(--regTextColor);
}
#home_expanded {
	background-image: url(images/settings buttons/home.png);
	color: red;
	display: block;
	height: 35px;
	width: 282px;
	z-index: 2;
	position: absolute;
	font-size: 14px;
	left: 10px;
}
#range-logo {
    background-image:url(http://ran.ge/content/uploads/2009/11/logo-trimmed.png);
    display:block;
    height:100px;
    width:460px;
}
.body {
	color: var(--mainTextColor);
	background-color: var(--bodyBackgroundColor);
}
/*side navigation options setup - the navigation is a list with specific styles*/
.sidenav_list {
	list-style-type: none;
	padding: 0;
	color: var(--bodyTextColor);
}
.sidenav_list_home {
	list-style-type: none;
	padding: 0;
	margin-top: -5px;
	margin-top: 23px;
	margin-bottom: -10px;
	color: var(--bodyTextColor);
}
.sidenav_list_item {
	line-height: 3.2;
	font-family: "Segoe UI";
	font-weight: 600;
	font-size: 15px;
	padding-left: 16px;
	border-left: 4px solid transparent;
}
.sidenav_list_item:hover{
	background-color: var(--sideNavItemBackgroundHover);
}
.settingsSidenavHome {
	margin-top: 26px;
	margin-bottom: -7px;
	color: var(--bodyTextColor);
	display: block;
	font-family: "Segoe UI";
	font-weight: 550;
	font-size: 15px;
	line-height: 46px;
	padding-left: 22px;
}
.settingsSidenavItem {
	display: block;
	font-family: "Segoe UI";
	font-weight: 550;
	font-size: 15px;
	line-height: 46px;
	padding-left: 0px;
}
.settingsSidenavItem:hover, .settingsSidenavHome:hover {
    background: var(--sideNavItemBackgroundHover);
}
.list_home::before {
	font-family: 'icomoon';
	content: "\e901";
	padding-right: 16px;
	margin-left: -4px;
	font-size: 17px;
	display: inline-block;
	transform: translateY(4%); 
}
.list_onedrive::before {
	font-family: 'icomoon';
	content: "\eaaf";
	padding-right: 16px;
	padding-left: 22px;
	margin-left: -4px;
	display: inline-block;
	transform: translateY(3%); 
}
.list_mail::before {
	font-family: 'icomoon';
	content: "\e900";
	padding-right: 16px;
	padding-left: 22px;
	margin-left: -4px;
	display: inline-block;
	transform: translateY(3%); 
}
.background:before {
  	content: "\e902";
	font-family: 'icomoon';
	padding-right: 16px;
	padding-left: 22px;
	margin-left: -4px;
	display: inline-block;
	transform: translateY(3%);	
}
.lockscreen:before {
  	content: "\e903";
	font-family: 'icomoon';
	padding-right: 16px;
	padding-left: 22px;
	margin-left: -4px;
	display: inline-block;
	transform: translateY(3%);
}
.start:before {
  	content: "\e904";
	font-family: 'icomoon';
	padding-right: 16px;
	padding-left: 22px;
	margin-left: -4px;
	display: inline-block;
	transform: translateY(3%);
}
.taskbar:before {
  	content: "\e905";
	font-family: 'icomoon';
	padding-right: 16px;
	padding-left: 22px;
	margin-left: -4px;
	display: inline-block;
	transform: translateY(3%);
}
.pen:before {
  	content: "\e104";
	font-family: 'Segoe MDL2 Assets';
	padding-right: 16px;
	padding-left: 22px;
	margin-left: -4px;
	display: inline-block;
	transform: translateY(3%);
}
.sidenav_list_item_active {
	border: solid transparent;
	border-width: 0 0 0 4px;
    border-image: url('../images/settings buttons/select_overlay.png') 1 stretch;
}
/*remove underline and link color for side navigation buttons*/
.sidenav_a {
	text-decoration: none;
	color: inherit;
}
/*remove link underline*/
.anu {
	text-decoration: none;
}
/*buttons to change theme*/
.theme_b {
	background-color: var(--themeButton);
	border-color: var(--themeButton);
	border-style: solid;
	float: right;
	position: fixed;
	margin-left: 0px;
	margin-top: 14px;
	color: var(--bodyTextColor);
	z-index: 99;
}
.theme_b:hover {
	filter: contrast(90%);
}
#light {
	display: inherit;
	display: var(--showLight);
}
#dark {
	display: inherit;
	display: var(--showDark);
}
a {
	color: #0063b1;
}
/*//APP CARDS//*/
.app_name {
	font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
	font-size: 16px;
	text-decoration: none;
	line-height: 1;
	margin: 16px 0 4px 8px;
	font-weight: 600;
}
.app_image {
	margin: -8px 0px -12px 0px;
}
.price {
	font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
	font-size: 14px;
	line-height: 4;
	margin-left: 8px;
	margin-bottom: -100px;
}
.price_double {
	font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
	font-size: 14px;
	line-height: 1.7;
	margin-left: 8px;
}
.ratingValue {
	font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
	font-size: 11px;
	margin-left: 8px;
	margin-top: 10px;
	line-height: 1;
}
.appListing {
	width: 150px;
	background-color: var(--appCardBackground);
	min-height: 248px;
	display: inline-block;
	margin: 20px auto 12px auto;
	transition: 0.1s ease-in-out;
}
.appListing:hover {
	background-color: var(--appCardBackgroundHover);
	box-shadow: 0 4px 8px 0 var(--cardShadowColor);
}
.applink {
	color: var(--appCardTextColor);
}
/*----------*/