html,body{
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	margin:0px;
	background: #060606;
	height: 100%;
	width:100%;
} 
a{
	color: inherit;
	text-decoration: none;
}
footer a{
	color:#2980b9;
}
nav{
	width:100%;
	height:100px;
	background-color:rgba(6,6,6, 0.8);
	backdrop-filter:blur(5px);
	position: fixed;
	top:0px;
}
nav ul{
	list-style: none;
	padding:0px;
	margin:0px;
	line-height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%
}
nav ul li{
	display: inline-block;
	color: gray;
	margin:0px 20px;
	font-size: 1.3em;
}
nav ul li:hover{
	color: white;
}
.flex{
	display: flex;
	height: 100%;
	width: 100%;
}
button{
	background:white;
	border:0px;
	border-radius: 3px;
	padding:5px 15px;
	font-weight:bold;
	cursor: pointer;
	box-shadow: 2px 2px 40px -12px #000;
}
#header{
	width: 100%;
	margin-top: 100px;
	height: auto;
	min-height: 300px;
	background-image: url(http://nitosoft.com/ATV4/ncontrol/ncontrol_bg.png);
    background-size: cover;
    background-position-y: -150px;
}
.featured-category{
	width:100%;
	height: 100%;
	border-bottom: 1px solid black;
}
.featured-category h2{
    margin: 10px;
    padding-top: 20px;
    color: white;
    text-align: left;
}		
.category-title{
	color:white;
	margin:0px;
	padding:25px 0px 0px 25px;
	font-size: 2em;
	opacity: 0.9;
}
.category-packages{
	display: flex;
	width:100%;
	height: auto;
	overflow-x: auto;
	overflow-y: hidden;
}
.featured-package{
	height: 200px;
	width:300px;
	margin:25px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	pointer-events: none;
}
.package-thumbnail{
	width:250px;
	height: 150px;
	border-radius: 8px;
	box-shadow: 2px 2px 40px -12px #000;
	transition: transform 0.1s;
	pointer-events: none;
}
.package-thumbnail:hover{
	transform: scale(1.05);	
}
.package-details{
	width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10px;
}
.package-title{
	color:white;
	margin:5px;
	opacity: 0.8;
	pointer-events: none;
}
.package-price{
	background: #2980b9;
	border-radius: 8px;
	font-weight: bold;
	border:0px;
	padding:5px 15px;
	vertical-align: middle;
	color: white;
	margin-left: 10px;
}
footer{
	height:80px;
	text-align: center;
	line-height: 80px;
	color: white;
}

@media (min-width: 300px) {

	.modal{
	position: fixed;
	top:0;
	bottom:0;
	left:0;
	right:0;
	margin:auto;
	height: 300px;
	width: 80%;
	background: #5F6060;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	border-radius: 8px;
	padding:12px;
	opacity:0.9;
	
}

.modal h2 {
	
	color: white;
	font-size: 16pt;

}

.modal h1 {

	color: white;
	margin-top: 30px;
	margin-bottom: 10px;
	font-size: 24pt;

}
.modal p {
	
	color: white;
	opacity: 1.0;
	font-size: 14pt;

font-weight: semibold;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
}


@media (min-width: 600px) {

	.modal{
	position: fixed;
	top:0;
	bottom:0;
	left:0;
	right:0;
	margin:auto;
	height: 300px;
	width: 50%;
	background: #5F6060;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	border-radius: 8px;
	padding:12px;
	opacity:0.9;
	
}

.modal h2 {
	
	color: white;
	font-size: 24pt;

}


.modal h1 {

	color: white;
	margin: 10px;
	font-size: 32pt;
	

}
.modal p {
	
	color: white;
	opacity: 1.0;
	font-size: 18pt;
	font-weight: semibold;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
}

.modal input {

/*	font-size: 18pt; */ 
	background: black;
	height:280px; 
	color: white;
/*	width: 100px; */
	vertical-align: top;
/*	margin-bottom: 10px; */
       	padding: 0; 

}
.modal a:link {
  color: #fd0000;
}

/* visited link */

.modal a:visited {
  color: #fd0000;
}

/* mouse over link */

.modal a:hover {
  color: gray;
}
.modal button{
	background: rgba(255, 255, 255, 0.4);
	border-radius: 4px;
	border:0px;
	height:35px;
	width:300px;
	margin-bottom: 10px;
	transition: background 0.1s, transform 0.1s;
}


.modal-error {
	color: white;
}
.modal-content{
	width: 70%;
	display: flex;
	justify-content: center;
	border:0px;
	background-color: transparent!important;
}

.modal button:hover{
	box-shadow: 2px 2px 40px -12px #000;
	background: white;
	transform: scale(1.05);
	font-weight: bold;
}
.modal input{
	height: 30px;
    width: 100%;
    margin: 5px;
    border-radius: 5px;
    border: 0px;
    text-indent: 5px;
}
.modal input:last-child{
	margin-bottom: 15px;
}
.modal textarea{
	width:100%;
	margin:10px;
	border-radius: 5px;
	min-height: 100px;
	resize: none;
	padding:5px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
.hidden{
	display: none;
}
::-webkit-scrollbar {
    height: 10px;
    width:10px;
}
 
::-webkit-scrollbar-track {
   background: rgba(0,0,0, 0);
}
 
::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: rgba(0,0,0, 0.8);
}	


/*Dashboard*/

#dash-sidebar{
	width:20%;
	height:calc(100% - 50px);
	margin:25px;
	border-right: 1px solid #000000;
}

#dash-content{
	width:calc(100% - 20% - 50px);
	height:calc(100%- 50px);
	margin:25px;
	background: #1d1b1b;
	border-radius:12px;
	overflow-y: auto;
}

#dash-sidebar h3{
	color:#333333;
	font-size:1.5em;
	margin: 10px 0px;
	padding:0px;
	text-align: left;

}

#dash-sidebar .category-packages{
	flex-direction: column;
    align-items: center;
    overflow:hidden;
}

#package-list{
	height: 100%;
	padding-right: 10px;	
	overflow-y: scroll;
}

#dash-sidebar #package-list .category-packages .featured-package{
	margin-bottom:0px;
}

#dash-content textarea{
	width:calc(100% - 25px);
	background:red;
	height:100px;
	margin:10px;
	border-radius: 12px;
	background: white;
	text-align: left;
	border:0px;
	resize: vertical;
	box-shadow: 2px 2px 40px -12px #000;
}
#package-versions{
	width:calc(100% - 20px);
	background:red;
	margin:10px;
	padding-bottom:10px;
	border-radius: 12px;
	background: #383838;
	box-shadow: 2px 2px 40px -12px #000;
	overflow:auto;	
}
#package-versions div{
	display: flex;
	margin-left:5px;
}
#package-versions .previous-version{
	width:100px;
	height:100px;
	border-radius: 8px;
	background:#bdbdbd;
	margin:0px 5px;
	display: flex;
	flex-direction: column;
}
.previous-version p{
	margin:0px;
	text-indent: 2px;
}
#package-versions 
}
#dash-sidebar .category-packages{
	flex-direction: column;
    align-items: center;
    overflow:hidden;
}

#package-list{
	height: 100%;
	padding-right: 10px;	
	overflow-y: scroll;
}

#dash-sidebar #package-list .category-packages .featured-package{
	margin-bottom:0px;
}

#dash-content textarea{
	width:calc(100% - 25px);
	background:red;
	height:100px;
	margin:10px;
	border-radius: 12px;
	background: white;
	text-align: left;
	border:0px;
	resize: vertical;
	box-shadow: 2px 2px 40px -12px #000;
}
#package-versions{
	width:calc(100% - 20px);
	background:red;
	margin:10px;
	padding-bottom:10px;
	border-radius: 12px;
	background: #383838;
	box-shadow: 2px 2px 40px -12px #000;
	overflow:auto;	
}
#package-versions div{
	display: flex;
	margin-left:5px;
}
#package-versions .previous-version{
	width:100px;
	height:100px;
	border-radius: 8px;
	background:#bdbdbd;
	margin:0px 5px;
	display: flex;
	flex-direction: column;
}
.previous-version p{
	margin:0px;
	text-indent: 2px;
}
#package-versions h3{
	margin:10px;
	padding-top:5px;
	opacity: 0.8;
}
#dash-package-details img, #package-details img{
	border-radius: 8px;
}
#dash-package-details, #package-details{
	width:calc(100% - 20px);
	margin:10px;
	border-radius: 12px;
	display: flex;
	height:150px;
}

#package-details .package-price{
	margin-left:0px;
	margin-top:10px;
}

#package-text{
	margin-left:10px;
	color:white;
}

#package-text h4, #package-text h3{
	margin:2px;
	font-weight: 500;	
}

h3 button{
	float:right;
	margin-right: 10px;
	margin-top:5px;
}

#package-description{
	color: white;
	margin:10px;
}