/* ===========================================================
 * Filename: custom.css
 * Author: ban domesic
 * Version: 1.0
 * =========================================================== */

/* LOGIN/REGISTRATION - PAGE */

	#login { position: absolute; top: 30%; left: 0; right: 0; margin: 0 auto; width: 400px; padding: 0 20px; color: #fff;}

	/* LOGIN/REGISTRATION - LOGO */

		#login-logo { text-align: center;}
		#login:hover h1 { text-shadow: 0em 0em 0.3em #4387D8; }
		#login:hover h2 { text-shadow: 0em 0em 0.3em #4387D8; }
		#login-logo h1 { font-size: 6em; transition: .5s ease-in-out all; }
		#login-logo h2 { font-size: 2em; transition: .5s ease-in-out all;}

	/* LOGIN - FORM */

		#login-form { padding-top: 20px; text-align: center;}
		#login-form input { height: 30px; width: calc(95% - 20px); padding-left: 20px; border: none; margin-bottom: 15px; font-family: Century Gothic, sans-serif; }
		#login-form input[type="submit"] { cursor: pointer; color: #fff; background-color: #626983; padding-left: 0px; transition: 1s ease-in-out all; font-weight: bold; font-size: 1.2em;}
		#login-form input[type="submit"]:hover { background-color: #38393C;}

	/* REGISTRATION - FORM */

		#registration-form { padding-top: 20px; text-align: center; display: none;}
		#registration-form input { height: 30px; width: calc(95% - 20px); padding-left: 20px; border: none; margin-bottom: 15px; font-family: Century Gothic, sans-serif; }
		#registration-form input[type="submit"] { cursor: pointer; color: #fff; background-color: #626983; padding-left: 0px; transition: 1s ease-in-out all; font-weight: bold; font-size: 1.2em;}
		#registration-form input[type="submit"]:hover { background-color: #38393C;}

	/* LOGIN/REGISTER OPTIONS */

		.login-register-options { text-align: center;}
		.login-register-options a{ color: #fff;}
		.login-register-options #open-login { display: none;}

/* CHECK-TOKEN PAGE */

	/* CHECK-TOKEN */

	#check-token { position: absolute; top: 30%; left: 0; right: 0; margin: 0 auto; width: 400px; padding: 0 20px; color: #fff; text-align: center; font-size: 2em;}

	/* REDIRECT TIMER */

	#redirect-timer { font-size: 4em; color: #fff;}



/* NAVIGATION - SIDEBAR */

	#sidebar { position: fixed; width: 180px; height: 100%; background-color: #151A1E;}
	#sidebar-logo { text-align: center; font-size: 3em; color: #068ADB; text-shadow: rgb(0, 0, 0) 3px 3px 0px;}
	#sidebar nav { padding-top: 20px;}
	#sidebar nav ul li { text-align: center; border-left: 5px solid transparent; transition: .5s ease-in-out all; margin-top: 20px;}
	#sidebar nav ul li:hover { border-color: #068ADB;}
	#sidebar nav ul li a { color: #4D5154; transition: .5s ease-in-out all;}
	#sidebar nav ul li:hover a { color: #068ADB;}
	#sidebar nav ul li a i { font-size: 4em; display: block;}
	#sidebar nav ul li a span { padding-top: 25px;}

/* CONTENT */

	#content { margin: 0 50px 50px 220px;}
	#content h1 { padding: 40px 0; color: #fff;}

/* DASHBOARD */

	/* DEVICE LIST */

	#device-list { padding-top: 50px;}
	.device-icon { font-size: 8em !important; color: #fff; padding-top: 20px; text-shadow: 2px 2px 5px rgba(0,0,0,0.3); transition: .5s ease-in-out all;}
	.device-icon:hover { text-shadow: 2px 2px 5px rgba(255,255,255,0.3);}
	.device-off { color: #E84C3D;}
	.device-on { color: #2DCC70;}
	.device-info { color: #fff; font-size: 1.2em;}
	.device-info .color-bluelight { color: #068ADB;}
	.device-info .color-bluelight:hover { color: #000;}
	.device-info h3 { color: #068ADB; padding-bottom: 5px; display: inline-block; border-bottom: 1px solid #ccc; margin-bottom: 5px; font-size: 1.5em; }
	.device-info p { padding-top: 5px;}
	.device-info a { color: #38393C;}
	.device-info a:hover { color: #151A1E;}
	#remove-button { position: absolute; right: 5%; top: 20px; color: #E84C3D; font-size: 1.3em;}
	.single-device { padding: 20px; transition: .5s all ease-in-out;}
	.single-device:hover { background-color: rgba(255,255,255,0.1);}

		/* ADD DEVICE */

		#add-device-form { padding-top: 10px;}
		#add-device-form input { height: 25px; width: calc(175px - 20px); padding-left: 20px; border: none; margin-bottom: 5px; font-family: Century Gothic, sans-serif; display: block;}
		#add-device-form input[type="submit"] { cursor: pointer; color: #fff; width: 175px; background-color: #626983; padding-left: 0px; transition: 1s ease-in-out all; font-weight: bold;}
		#add-device-form input[type="submit"]:hover { background-color: #38393C;}

	.select-style { height: 40px; width: 200px; background-color: transparent; border: 1px solid #fff;}
	.consumption-info { background-color: rgba(255,255,255,0.3); color: #000; font-size: 1.2em; margin-top: 30px; padding: 20px; display: inline-block;}
	.consumption-info p { padding-bottom: 10px;}

	table { width: auto; margin-top: 20px;}
	table th { color: #fff; font-size: 1.4em; text-align: left; padding-bottom: 10px;}
	table td { border: 1px solid #068ADB; padding: 15px; }

/* MESSAGE BOXS */

	/* BASIC */

	.alert-box-container { text-align: center; position: absolute; z-index: 9999; width: 100%; left: 0; right: 0;}
	.alert-box { color:#555; width: auto; max-width: 80%; font-size: 1.2em; display: inline-block; margin: 30px auto; padding: 15px 30px; font-family: FontAwesome; color: #fff;}
	.message-type { text-transform: uppercase;	}

	/* ERROR */

	.error { background:#C60F13;} 
	.error:before { content: "\f057"; font-size: 1.7em; padding: 10px 10px 15px 10px; vertical-align: middle;}

	/* SUCCESS */

	.success { background:#5DA423;} 
	.success:before { content: "\f00c"; font-size: 1.7em; padding: 10px 10px 15px 10px; vertical-align: middle;}

	/* WARNING */

	.warning { background:#E3B000;} 
	.warning:before { content: "\f071"; font-size: 1.7em; padding: 10px 10px 15px 10px; vertical-align: middle;}

	/* NOTICE */

	.notice { background:#2BA6CB;}
	.notice:before { content: "\f05a"; font-size: 1.7em; padding: 10px 10px 15px 10px; vertical-align: middle;}