@import url('https://fonts.googleapis.com/css?family=PT+Sans');

/* Font face - material icon */
	@font-face {
		font-family: 'Material Icons';
		font-style: normal;
		font-weight: 400;
		src: url(../fonts/material-icons.woff2) format('woff2');
	}

	.material-icons {
		font-family: 'Material Icons';
		font-weight: normal;
		font-style: normal;
		font-size: 24px;
		line-height: 1;
		letter-spacing: normal;
		text-transform: none;
		display: inline-block;
		white-space: nowrap;
		word-wrap: normal;
		direction: ltr;
		-webkit-font-feature-settings: 'liga';
		-webkit-font-smoothing: antialiased;
	}


/* 	General
	----------------------------- */
	html, body {font-family: 'PT Sans', sans-serif; font-size: 13px;}
	body.login-page {background: #1a2229;}

	h5 {font-weight: 500; margin-bottom: 20px;}
	h5 a {font-size: 14px; color: #26a69a; font-weight: normal;}
	h6 {font-size: 18px; color: #797979; padding-left: 10px; margin-bottom: 20px;}

	thead {padding-bottom: 7px;}
	td, th {padding: 7px 5px;}
	th.centered {text-align: center;}
	td.centered {text-align: center;}

	/*To disable accordion hide, uncomment below line css*/
	/*.collapsible-body {display: block !important; height: auto !important; padding-bottom: 15px !important}*/


/* 	Login page
	----------------------------- */
	#login {
		margin-top: 100px; padding: 40px; border-radius: 10px;
		box-shadow: 0 5px 10px 2px rgba(0,0,0,0.5); background: #fff;
	}
	#login h4 {margin-top: 0; margin-bottom: 30px;}


/* 	Sidebar
	----------------------------- */
	aside {
		position: fixed; top: 0; left: 0;
		width: 220px; height: 100%; display: block;
		background: #2d353c; z-index: 999;
	}
	aside .logo {width: 100%; height: 140px; display: block; background: #1a2229;}

	aside .menu ul {margin: 0;}
	aside .menu ul.main-menu > li {border-bottom: 1px solid #323a42;}
	aside .menu ul li a {
		font-weight: normal; color: #a8acb1;
		padding: 10px 15px; display: block; background: #2d353c;
		transition: all 0.5s;
	}
	aside .menu ul li a .fa {margin-right: 10px;}
	aside .menu ul li a:hover {background: #232a2f; color: #a8acb1;}
	aside .menu ul li a.active {background: #1a2229; color: #fff;}

	aside .menu ul.sub-menu {max-height: 0; overflow: hidden; transition: all 0.2s linear;}
	aside .menu ul.sub-menu.active {}
	aside .menu ul.sub-menu li a {background: #232a2f; padding-left: 45px; position: relative; transition: padding-left 0.3s;}
	aside .menu ul.sub-menu li a:after {
		content: "\f105"; position: absolute; top: 50%; left: 30px; margin-top: -13.2px;
		font-family: 'FontAwesome'; font-style: normal; font-size: 18px;
		transition: all 0.3s;
	}
	aside .menu ul.sub-menu li a:hover {background: #1a2229; color: #fff; padding-left: 55px}
	aside .menu ul.sub-menu li a:hover:after {left: 35px;}


/* 	Body
	----------------------------- */
	#body {
		width: 80%; width: calc(100% - 220px);
		border-top: 5px solid #26a69a; margin-left: 220px;
	}

	#body .breadcrumb-path {margin-bottom: 20px; font-size: 12px;}
	#body .breadcrumb-path a {position: relative; margin-right: 20px;}
	#body .breadcrumb-path a:before {
		content: "\f105"; position: absolute; top: -5px; right: -15px;
		font-family: 'FontAwesome'; font-weight: normal; font-style: normal;
		line-height: 1em; font-size: 20px;
	}

	#body .content {min-height: 100vh; padding: 20px; background: #eee;}
	#body .white-box {padding: 10px; background: #fff; border-bottom: 1px solid #aaa;}
	#body .white-box > .section {padding-top: 0; padding-bottom: 0;}
	#body .white-box table td a {color: #26a69a;}

	#body .top {margin-bottom: 20px;}
	#body .top .fa {margin-right: 10px;}

	#body .action a {display: inline-block; padding: 5px 10px; background: #26a69a; color: #fff !important; font-weight: normal !important; text-transform: uppercase; border: 1px solid #26a69a;}
	#body .action a:hover {background: #fff; color: #26a69a !important;}

	#body .create-poll-button {
		padding: 50px 10px; background: #fff; border-bottom: 1px solid #aaa;
		display: block; text-align: center; font-weight: 500; color: #26a69a;
	}
	#body .create-poll-button .fa {font-size: 36px; margin-bottom: 10px;}
	#body .create-poll-button:hover {background: #26a69a; color: #fff; border-bottom-color: #000;}


/* 	View Poll
	----------------------------- */
	#body .poll-header h5 {margin: 17px 0;}
	#body .poll-header .poll-menu {margin: 0; overflow: hidden;}

	#body .poll-header.pinned .poll-menu li a {padding: 20px 20px 19px; margin-top: 0; border-radius: 0;}

	#body .poll-detail {padding: 2px 10px; margin-bottom: 40px;}
	#body .poll-detail .collapsible {border: 0; box-shadow: none;}
	#body .poll-detail .collapsible .collapsible-header {font-weight: 500; border: 0; position: relative; padding-bottom: 5px;}
	#body .poll-detail .collapsible .collapsible-header:after {
		content: "[show]"; display: none; margin-left: 10px;
		font-weight: normal; font-size: 12px; color: #26a69a
	}
	/*#body .poll-detail .collapsible .collapsible-header.active:after {content: "[hide]"}*/
	#body .poll-detail .collapsible .collapsible-body {padding: 1rem; padding-top: 0; border-bottom: 0;}
	#body .poll-detail .collapsible table td {vertical-align: top; padding: 7px 0;}
	#body .poll-detail .collapsible table td:first-child {width: 220px;}

	#body .poll-json {
		background: rgba(0,0,0,0.89); padding: 20px;
		max-height: 600px; overflow-y: auto;
		color: #fff;
		-webkit-overflow-scrolling: touch;
	}
	#body .poll-json pre {margin: 0; padding: 0;}

	#body .credential {font-weight: 500; position: relative;}
	#body .credential button.oauth-credential {display: inline-block; padding: 2px 8px; background: #ffee58; border: 0;}
	#body .credential button.oauth-credential:hover {background: #fff282;}
	#body .credential i {
		font-size: 10px; font-style: normal; opacity: 0;
		position: absolute; bottom: -25px; left: 25px;
		transition: all 0.3s;
	}
	#body .credential i.open {bottom: -15px; opacity: 1;}

	#body .credential button.revoke,
	#body .credential button.reassign {display: inline-block; margin-left: 5px; padding: 4px 15px; border: 0; color: #fff; font-weight: normal;}
	#body .credential button.revoke {background: #26a69a;}
	#body .credential button.reassign {background: #26a69a;}

	/*#body .battle-list-table {width: 500px;}*/
	#body .battle-list-table td {width: 75px !important; vertical-align: middle !important; text-align: center;}
	#body .battle-list-table td img {width: 50px;}


/* 	View Poll Result
	----------------------------- */
	.poll-graph {margin-bottom: 30px;}
	.poll-graph > div {height: 600px;}

	.poll-result-table th {vertical-align: bottom; border: 1px solid #ccc;}
	.poll-result-table tr:first-child th:last-child,
	.poll-result-table tr:not(:first-child) th {}
	.poll-result-table td {border: 1px solid #ccc;}
	.poll-result-table td:not(:first-child) {}

	.battle-result-table th {vertical-align: bottom; border: 1px solid #ccc;}
	.battle-result-table th,
	.battle-result-table td {border: 1px solid #ccc; text-align: center;}


/* 	Poll Form
	----------------------------- */
	#body .multipleFieldBox {padding: 20px; border: 1px solid #ccc;}
	#body .multipleFieldBox img {width: 60%; height: auto;}
	#body .multipleFieldBox button.deleteField {position: relative; margin-top: 15px; padding: 0 10px;}
	#body .multipleFieldBox .deleteField {position: relative; top: 10px;}
	#body .multipleFieldBox .deleteField i.left {margin-right: 0;}

	#body .existingFieldBox {padding: 20px; border: 1px solid #ccc;}
	#body .existingFieldBox img {width: 60%; height: auto;}

	#body input[type="text"] + label:not(.active):after {transform: translateY(-32px) scale(0.8); transform-origin: 0 0;}


/*.carousel,*/
	button.yellow.lighten-1 {color: #000}



@media (min-width: 991px) {
	aside {transform: translateX(0px) !important;}
	.header {display: none;}
}

@media (max-width: 992px) {

	.header {background: #fff;}
	.header .button-collapse {
		display: inline-block; color: #fff;
		padding: 10px 15px; background: #26a69a;
	}
	#body {width: auto; margin-left: 0;}

}

@media (max-width: 600px) {
	#body .create-poll-button {margin-bottom: 10px;}
}

@media (max-width: 480px) {
	#body .content {padding: 20px 0}
}

.refresh-secret{
	display: inline-block;
	margin-left: 5px;
	padding: 4px 15px;
	border: 0;
	color: #fff;
	font-weight: normal;
	background: #26a69a;
}