@import url("variables.css");

body, html {
	 width: 100%;
   margin: 0;
   padding: 0;
   overflow-x: hidden;
	 background: #FFF;
}

/* Main attributes */
.bg-main {
	background-color: var(--maincolor);
}
.text-main {
	color: var(--maincolor);
}
p {
		font-size: 1.1em;
		font-weight: 300;
		line-height: 1.7em;
		color: #999;
}

/* Link class */
/* unvisited link */
a:link {
  color: var(--linkcolor);
}

/* visited link */
a:visited {
  color: var(--linkcolor);
}

/* mouse over link */
a:hover {
  color: var(--linkhovercolor);
}

/* selected link */
a:active {
  color: var(--linkactivecolor);
}

/* Button Class */
.btn-main {
  color: #fff;
  background-color: var(--buttoncolor);
  border-color: var(--buttoncolor);
}

.btn-main:hover,
.btn-main:focus,
.btn-main:active,
.btn-main.active,
.open .dropdown-toggle.btn-main {
  color: #FFFFFF;
  background-color: var(--buttonhovercolor);
  border-color: var(--buttonhovercolor);
}

.btn-main:active,
.btn-main.active,
.open .dropdown-toggle.btn-main {
  background-image: none;
}

.btn-main.disabled,
.btn-main[disabled],
fieldset[disabled] .btn-main,
.btn-main.disabled:hover,
.btn-main[disabled]:hover,
fieldset[disabled] .btn-main:hover,
.btn-main.disabled:focus,
.btn-main[disabled]:focus,
fieldset[disabled] .btn-main:focus,
.btn-main.disabled:active,
.btn-main[disabled]:active,
fieldset[disabled] .btn-main:active,
.btn-main.disabled.active,
.btn-main[disabled].active,
fieldset[disabled] .btn-main.active {
  background-color: var(--buttoncolor);
  border-color: #ccc;
}

.btn-main .badge {
  color: var(--buttoncolor);
  background-color: #fff;
}

/* Additional attributes */
.lead {
	font-size: 18px;
	font-weight: 400;
}

main > .container {
  padding: 60px 15px 0;
	overflow-y: auto;
}

.footer {
  background-color: #f5f5f5;
}

.footer > .container {
  padding-right: 15px;
  padding-left: 15px;
}

/* Background colors */
.bg-gray {
	background-color: #f5f5f5 !important;
}
.bg-black {
	background-color: #222222 !important;
}
.bg-red {
	background-color: #f56954 !important;
}
.bg-yellow {
	background-color: #f39c12 !important;
}
.bg-lightyellow {
	background-color: #f5af41 !important;
}
.bg-aqua {
	background-color: #00c0ef !important;
}
.bg-blue {
	background-color: #428bca !important;
}
.bg-light-blue {
	background-color: #5bc0de !important;
}
.bg-light-primary {
	background-color: #62a3c9 !important;
}
.bg-green {
	background-color: #59A80B !important;
}
.bg-lightgreen {
	background-color: #7ab93b !important;
}
.bg-lightmweb {
	background-color: #4cb5ab !important;
}
.bg-navy {
	background-color: #001f3f !important;
}
.bg-teal {
	background-color: #4cd2f3 !important;
}
.bg-info {
	background-color: #00c0ef !important;
}
.bg-white {
	background-color: #FFFFFF !important;
}
.bg-olive {
	background-color: #3d9970 !important;
}
.bg-lime {
	background-color: #5cb85c !important;
}
.bg-orange {
	background-color: #ff851b !important;
}
.bg-fuchsia {
	background-color: #f012be !important;
}
.bg-purple {
	background-color: #604D8C !important;
}
.bg-maroon {
	background-color: #85144b !important;
}

/* Text colors */
.text-red {
	color: #f56954 !important;
}
.text-yellow {
	color: #f39c12 !important;
}
.text-aqua {
	color: #00c0ef !important;
}
.text-blue {
	color: #0073b7 !important;
}
.text-black {
	color: #222222 !important;
}
.text-light-blue {
	color: #3c8dbc !important;
}
.text-green {
	color: #59A80B !important;
}
.text-navy {
	color: #001f3f !important;
}
.text-teal {
	color: #39cccc !important;
}
.text-olive {
	color: #3d9970 !important;
}
.text-lime {
	color: #01ff70 !important;
}
.text-orange {
	color: #ff851b !important;
}
.text-fuchsia {
	color: #f012be !important;
}
.text-purple {
	color: #604D8C !important;
}
.text-maroon {
	color: #85144b !important;
}
.text-white {
	color: #FFF !important;
}
.text-gray{
	color: #808080 !important;
}

/* Dashboard Attributes ////////////////////////////////////////////////////////////////////*/

/* Main attributes */
.dashboard-wrapper {
		display: flex;
		width: 100%;
		align-items: stretch;
}

.navbar-dashboard {
		padding: 10px;
		background: #fff;
		border: none;
		border-radius: 0;
}

.navbar-dashboard-btn {
		box-shadow: none;
		outline: none !important;
		border: none;
}

.dashboard-line {
		width: 100%;
		height: 1px;
		border-bottom: 1px dashed #ddd;
		margin: 40px 0;
}

/* Sidebar */
#sidebar {
		min-width: 250px;
		max-width: 250px;
		background-color: var(--sidebarcolor);
		color: var(--sidebartextcolor);
		transition: all 0.3s;
		position: sticky;
		top: 0;
}

#sidebar.active {
		margin-left: -250px;
}

#sidebar .sidebar-header {
		padding: 8px;
		background-color: var(--sidebarheadercolor);
		position: sticky;
		top: 0;
}

#sidebar ul.components {
		padding: 20px 0;
}

#sidebar ul p {
		color: #fff;
		padding: 10px;
}

#sidebar .nav-link {
  font-weight: 500;
  color: var(--sidebarlinkcolor);
}

#sidebar .dropdown-item{
	color: var(--sidebarlinkcolor);
}

#sidebar .dropdown-item:hover{
	color: var(--sidebarlinkhovercolor);
	background: none;
}

#sidebar .nav-signout {
  position: absolute;
	display: inline-block;
	bottom: 0;
	height:50px;
	width:250px;
	background-color:var(--sidebarheadercolor);
	padding-top:7px
}

#sidebar .nav-link .feather {
  margin-right: 4px;
  color: #999;
}

#sidebar .nav-link:hover,
#sidebar .nav-link:hover .feather {
  color: var(--sidebarlinkhovercolor);
}

/* Dashboard Content */
#content {
		width: 100%;
		padding-left: 15px;
		padding-right: 15px;
		padding-top: 10px;
		padding-bottom: 10px;
		min-height: 100vh;
		transition: all 0.3s;
}

/* MEDIAQUERIES */
@media (max-width: 768px) {
		#sidebar {
				margin-left: -250px;
		}
		#sidebar.active {
				margin-left: 0;
		}
		#sidebarCollapse span {
				display: none;
		}
}