/**
 *
 * - PopojiCMS Style
 *
 * - File : install.css
 * - Version : 1.0
 * - Author : Riliwan Balogun http://www.facebook.com/riliwan.rabo
 * - License : MIT License
 *
 *
 * Ini adalah file style PopojiCMS yang memuat semua style instalasi.
 * This is a file style from PopojiCMS which contains all instalation style.
 *
*/

.board {
	width: 80%;
	margin: 60px auto;
	min-height: 500px;
	background: #fff;
	/*box-shadow: 10px 10px #ccc,-10px 20px #ddd;*/;
}

.board .nav-tabs {
	position: relative;
    /* border-bottom: 0; */
    /* width: 80%; */
	margin: 40px auto;
	margin-bottom: 0;
	box-sizing: border-box;
}

.board > div.board-inner {
	background: #fafafa url(../images/geometry.png);
	background-size: 30%;
}

p.narrow {
	width: 60%;
	margin: 10px auto;
}

.liner {
	height: 2px;
	background: #ddd;
	position: absolute;
	width: 80%;
	margin: 0 auto;
	left: 0;
	right: 0;
	top: 50%;
	z-index: 1;
}

.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
	color: #555555;
	cursor: default;
    /* background-color: #ffffff; */
	border: 0;
	border-bottom-color: transparent;
}

span.round-tabs {
	width: 70px;
	height: 70px;
	line-height: 70px;
	display: inline-block;
	border-radius: 100px;
	background: white;
	z-index: 2;
	position: absolute;
	left: 0;
	text-align: center;
	font-size: 25px;
}

span.round-tabs.one {
	color: rgb(34, 194, 34);
	border: 2px solid rgb(34, 194, 34);
}

li.active span.round-tabs.one {
	background: #fff !important;
	border: 2px solid #ddd;
	color: rgb(34, 194, 34);
}

span.round-tabs.two {
	color: #febe29;
	border: 2px solid #febe29;
}

li.active span.round-tabs.two {
	background: #fff !important;
	border: 2px solid #ddd;
	color: #febe29;
}

span.round-tabs.three {
	color: #3e5e9a;
	border: 2px solid #3e5e9a;
}

li.active span.round-tabs.three {
	background: #fff !important;
	border: 2px solid #ddd;
	color: #3e5e9a;
}

span.round-tabs.four {
	color: #f1685e;
	border: 2px solid #f1685e;
}

li.active span.round-tabs.four {
	background: #fff !important;
	border: 2px solid #ddd;
	color: #f1685e;
}

span.round-tabs.five {
	color: #999;
	border: 2px solid #999;
}

li.active span.round-tabs.five {
	background: #fff !important;
	border: 2px solid #ddd;
	color: #999;
}

span.round-tabs.six {
	color: #18BC9C;
	border: 2px solid #18BC9C;
}

li.active span.round-tabs.six {
	background: #fff !important;
	border: 2px solid #ddd;
	color: #18BC9C;
}

.nav-tabs > li.active > a span.round-tabs {
	background: #fafafa;
}

.nav-tabs > li {
	width: 20%;
}

/*li.active:before {
    content: " ";
    position: absolute;
    left: 45%;
    opacity:0;
    margin: 0 auto;
    bottom: -2px;
    border: 10px solid transparent;
    border-bottom-color: #fff;
    z-index: 1;
    transition:0.2s ease-in-out;
}*/

li:after {
	content: " ";
	position: absolute;
	left: 45%;
	opacity: 0;
	margin: 0 auto;
	bottom: 0px;
	border: 5px solid transparent;
	border-bottom-color: #ddd;
	transition: 0.1s ease-in-out;
}

li.active:after {
	content: " ";
	position: absolute;
	left: 45%;
	opacity: 1;
	margin: 0 auto;
	bottom: 0px;
	border: 10px solid transparent;
	border-bottom-color: #ddd;
}

.nav-tabs > li a {
	width: 70px;
	height: 70px;
	margin: 20px auto;
	border-radius: 100%;
	padding: 0;
}

.nav-tabs > li a:hover {
	background: transparent;
}

.tab-content {
	padding-bottom: 50px;
}

.tab-pane {
	position: relative;
	padding-top: 50px;
}

.tab-content .head {
	font-family: "Lato","Helvetica Neue",Helvetica,Arial,sans-serif;
	font-size: 25px;
	text-transform: uppercase;
	padding-bottom: 10px;
}

.btn-outline-rounded {
	padding: 10px 40px;
	margin: 20px 0;
	border: 2px solid transparent;
	border-radius: 25px;
	outline: none;
}

.btn.green {
	background-color: #5cb85c;
    /*border: 2px solid #5cb85c;*/
	color: #ffffff;
}

@media( max-width : 585px ) {
    
	.board {
		width: 90%;
		height: auto !important;
	}

	span.round-tabs {
		font-size: 16px;
		width: 50px;
		height: 50px;
		line-height: 50px;
	}

	.tab-content .head {
		font-size: 20px;
	}

	.nav-tabs > li a {
		width: 50px;
		height: 50px;
		line-height: 50px;
	}

	li.active:after {
		content: " ";
		position: absolute;
		left: 35%;
	}

	.btn-outline-rounded {
		padding: 12px 20px;
	};
}

.license {
	padding: 20px 50px;
}

.license textarea {
	height: 300px;
}