/* css by Hendra */
@font-face {
    font-family: 'Open Sans', sans-serif;
} 
body {font-family: 'Open Sans', sans-serif !important;}
.tebal {font-weight: bold;}
.miring {font-style: italic;}
.text-al {color: #F37D18;}
.text-ma {color: #0B2A13;}
.text-hijau {color: #0B320C;}
.text-jingga {color: #F37D18;}
.text-biru {color: #000627;}
.text-jalan {padding: 10px 0;}
.note {font-size: 0.8em; font-style: italic; line-height: 0.8em;}
.navbar-inverse .navbar-nav > li > a { color: #F37D18;  }
.btn-primary {background-color:#F35E18; border-color: #AB4812;}
.btn-primary:hover, .btn-primary:active, .btn-primary:focus {background-color:#0B2A13; border-color: #132317;}
.footer-al { position: fixed; bottom: 0; margin: 0 auto; padding: 20px 10px; color: #fff; }
.content { color: #222; background: rgba(255,255,255,0.7); padding: 30px 40px; margin-bottom: 60px;}
.navbar-inverse { background-color: #040923; border-color: #070821; color: #fff;}
.navbar-inverse .navbar-brand { color: #fff; }
.space-1 {margin-bottom: 5px;}
.space-2 {margin-bottom: 10px;}
.space-3 {margin-bottom: 15px;}
.form-control {border-color: #555;}
.form-control:focus { border-color: #F35E18; box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.075) inset, 0px 0px 8px rgba(233, 134, 102, 0.6);}
.input-group { display: block; }
.logo-left {float: left;}
.logo-right {float: right;}
.loader {
    border: 16px solid #f3f3f3; /* Light grey */
	border-top: 16px solid #3498db;
	border-bottom: 16px solid #3498db;
    border-radius: 50%;
    width: 70px;
    height: 70px;
    animation: spin 2s linear infinite;
    margin: -35px 0 0 -35px;
    position: absolute;
    left: 50%;
	top: 50%;
}
#loading {
	z-index: 100000;	
	height: 100%;
	width: 100%;
	position: fixed;
	top: 0;
	left: 0;
	background: rgba( 215, 215, 215, .8 );
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Responsive design */
@media (max-width: 640px) {
    .content { padding: 30px 10px; }
}

hr {border-top: 1px solid #d6d4d4;}
      h4 {font-weight: bolder;}
      .captcha img { height: 40px; width: 200px; }
      .breadcrumb {background-color: #e6e5e5;}
      @media only screen and (max-width : 480px) {
        .wizard-inner p { word-break: break-all; }
        .logo-left img {width: 150px !important;}
        .logo-right img {width:80px !important;}
        .content {padding: 30px 10px;}
        }
    .footer {padding:20px 10%;background: #ddd;}
    .scrollup {
        font-size: 2em;
        background-color: #179bd7;
        bottom: 40px;
        color: #fff;
        display: none;
        float: right;
        line-height: 1.2;
        padding: 1px 10px 4px;
        position: fixed;
        right: 32px;
        text-align: center;
        transition: all .5s ease-in-out 0s;
        z-index: 99;
    }
    .foot-kontak {
        z-index: 99;
        position: fixed;
        bottom: 0px;
        height: 35px;
        width: 100%;
        text-align: center;
        background: #5cb85c;
        color: #fff;
        padding: 7px;
    }
    .foot-kontak a {color: #fff;font-weight: bold; padding: 0px 15px;}
    span > input {
        background: none;
        color: white;
        padding: 0;
        border: 0;
    }
    .help-inline {font-weight:bold; color:#b94a48;}
    @media (min-width: 700px) {
        .foot-kontak {display: none;}
        .scrollup {bottom:20px;}
    }
    @media (max-width: 700px) {
        .round-status {float: left;}
        li.stepactive1, li.stepactive2, li.stepactive3, li.stepactive4, li.stepactive5 {width: 100% !important;}
        .round-status p {width: 300px; margin-top: -20px;}
        .tab-content .alert {margin-left: -10px;margin-right: -10px;}
    }
    @media (max-width: 600px) {
        .timeline::after { left: 5px; }
        .left_t::after, .right_t::after { left: -8px; }
        .content_t { padding: 10px 15px; }
        .container_t { padding-right: 5px; padding-left: 50px; }
        .right_t::before { }
        .container_t::before { border-color: transparent #dddddd transparent transparent; left: 40px; }
    }