/* FONTS
=============================================================*/
@import url('../fonts/gotham/stylesheet.css');


/* GENERAL
=============================================================*/
* {
    margin:0;
    padding:0;
}

body {
    color:#000;
    font-size:14px;
    font-family:'gothambookregular', Arial, sans-serif;        
    background: url('../../assets/images/bg-sippa.jpeg') repeat center center fixed;    
}

a,
a:focus,
a:hover {
    outline:0;
}

/* HEADER
=============================================================*/
header {
    margin-top:20px;
}

header .header-logo {
    position:relative;
}

.header-logo  {
    width:auto;
}

.header-logo .slogan {
    position:absolute;
    width:500px;
    height:56px;
    bottom:3px;
    left:200px;
    padding-left:10px;
    font-size:15px;
    font-family:'gothamboldregular', Arial, sans-serif;
    line-height:1.3;
    border-left:2px solid #003C80;
}

.header-logo {
    margin-top: 20px;
}

.header-logo .slogan p.green {
    color: #003C80;
}

header .header-navbar {
    header-navbar
}

header .header-navbar .navbar .container-fluid {
    padding-right:0;
}

header .header-navbar .navbar .navbar-collapse {
    padding-right:0;
}

header .header-navbar .navbar-header {
    display:none;
    color:#fff;
    background:#01923F;
}

header .header-navbar .navbar-header a,
header .header-navbar .navbar-header .icon-bar {
    color:#fff;
}

header .header-navbar .navbar-header .navbar-toggle {
    border-color:#fff;
}

header .header-navbar .navbar {
    float:right;
}

header .header-navbar .navbar-nav > li {
    padding-bottom:15px;
    margin-left:15px;
    font-size:13px;
}

header .header-navbar .navbar-nav > li > a {
    padding:5px 15px;
    color:#000;
    background:#fff;
    border-radius:15px;
}

header .header-navbar .navbar-nav > li:first-child > a {
    margin-left:0;
}

header .header-navbar .nav li.active a,
header .header-navbar .nav li:hover a,
header .header-navbar .nav .open > a, 
header .header-navbar .nav .open > a:focus, 
header .header-navbar .nav .open > a:hover {
    color:#fff;
    background:#01923F;
}

header .header-navbar ul.dropdown-menu {
    padding:10px;
    background:#01923F;
    border:0;
    border-radius:15px;
    box-shadow:3px 3px 6px #888;
}

header .header-navbar ul.dropdown-menu li {
    padding:0 10px;
}

header .header-navbar ul.dropdown-menu li a {
    padding:5px 0;
    border-top:1px solid #fff;
}

header .header-navbar ul.dropdown-menu li:first-child a {
    border-top:0;
}

header .header-navbar ul.dropdown-menu li a:hover {
    color:#e2e2e2;
}

header .header-navbar .navbar-toggle .icon-bar {
    background:#fff;
}

header .header-navbar ul.dropdown-menu .menu-caret {
    position:absolute;
    top:-20px;
    left:20px;
    height:22px;
    width:18px;
    font-size:30px;
    color:#01923F;
}


/* MAIN
=============================================================*/
main {
    min-height:600px;
    margin-top: 110px;    
}

main .content { 
    background-color: #fff6f0;
    border : 1px solid #954323a1;
    border-radius: 20px;
    padding: 20px;
}

/* MAIN : Block System
=============================================================*/
main .content .block_1 {
    margin-top:10px;
}

main .content .block_2 {
    margin-top:50px;
}

main .content .block_title {
    margin-bottom:20px;
    font-size:24px;
    /*font-family:'gothamboldregular', Arial, sans-serif;*/
    color:#003C80;
}

main .content .block_left {
    padding:0 30px 0 50px;
    color:#fff;
}

main .content .block_left_title {
    margin-bottom:20px;
    font-size:24px;
    /*font-family:'gothamboldregular', Arial, sans-serif;*/
}


/* MAIN : Welcome
=============================================================*/
main .content .block_welcome {
    margin-bottom:30px;
    text-align:justify;
    font-size:13px;
}

main .content .block_welcome .logo_bersih_melayani {
    width:100%;
    margin:0 0 10px 0;
}

/* MAIN : Value
=============================================================*/
main .content .block_value {
    font-size:22px;
    /*font-family:'gothambookregular', Arial, sans-serif;*/
    color:#01923F;
}

main .content .block_value .header {
    margin-bottom:5px;
    line-height:1;
    font-size:30px;
    /*font-family:'gothamboldregular', Arial, sans-serif;*/
}

main .content .block_value .header h2 {
    margin:-15px 0 0 0;
    font-size:117px;
    line-height:1;
    position:absolute;
}

main .content .block_value .header ul {
    margin:15px 0 0 75px;
    list-style:none;
}

main .content .block_value .list {
    list-style:none;
    line-height:1;
}

main .content .block_value .read_more {
    margin-top:15px;
    font-size:12px;
    font-family:'gothammediumregular', Arial, sans-serif;
}

main .content .block_value .read_more a {
    padding:7px 20px;
    color:#fff;
    background:#01923F;
    border-radius:15px;
}

main .content .block_value .read_more a:hover {
    background:#03632D;
    text-decoration:none;
}

/* FOOTER
=============================================================*/
footer {
    /*margin-top:30px;*/
    padding:10px 0px 50px 0px;
    color:#003C80;
    text-align:center;
    font-size:14px;
    line-height:2;
}

footer .logo_kemenag {
    height:30px;
    margin-top:-10px;
}

/* SIPKA */

h5 {
    text-transform: none;
    font-weight: bold;
    font-size: 18px;    
}

.ui-tabs .ui-tabs-nav li.ui-tabs-active {
    margin-bottom: 0px;
    padding-bottom: 0px;
}

.ui-tabs-nav {
    height: 30px;                        
    margin: 0px !important;  
    padding:0px !important;  
}

.ui-tabs-active a {    
    background-color: #01923F;        /*To make it looks like on example pic, it is possible do do with it whatever you want*/
    position: relative;
    z-index: 5;
    color: #fff !important;             /*To overwrite jquery-ui.css*/
    text-decoration: none !important;     /*To overwrite jquery-ui.css*/
    font-weight: 500;
}

.ui-tabs .ui-tabs-panel {
    background: #fff;
    border-left: 1px #01923F solid;
}

.ui-tabs .ui-tabs-nav li {
    position: relative;    /*To overwrite jquery-ui.css*/
    border: solid 1px;
    margin: 0 0 -5px 0;
    background: #fff;
    border-color: #01923F;
    border-radius: 0px;    
}
.ui-tabs-anchor{
    color: #01923F !important;                  /*To overwrite jquery-ui.css*/
}

.mGrid {
    font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
    border-spacing: 0px;
    border-collapse: collapse;
}

.mGrid #no {
    width:10%;
    text-align: center;
}   

.mGrid th {
    text-align: center;
    padding:10px; 
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    background-color: #954323a1; 
    border: 1px solid #fff;
}

.mGrid #TopHeader th {
    background-color: #fff;
    color: #01923F;
    font-size: 20px;
}

.mGrid th a {
    color: #666;
    text-decoration: none;
}

.mGrid th a:hover {
    color: #ff8f00;
    text-decoration: none;
}

.mGrid th.sortasc a {
    background: url("images/asc_black.gif") no-repeat;
    padding: 0px 4px 0px 0px;
    color: #ff8f00;
    text-decoration: none;
    display: block;
}

.mGrid th.sortasc a:hover {
    background: url("images/asc_black.gif") no-repeat;
    padding: 0px 4px 0px 0px;
    color: #ff8f00;
    text-decoration: none;
    display: block;
}

.mGrid th.sortdesc a {
    background: url("images/desc_black.gif") no-repeat;
    padding: 0px 2px 0px 0px;
    color: #ff8f00;
    text-decoration: none;
    display: block;
}

.mGrid th.sortdesc a:hover {
    background: url("images/desc_black.gif") no-repeat;
    padding: 0px 4px 0px 0px;
    color: #ff8f00;
    text-decoration: none;
    display: block;
}

.mGrid td {
    border-bottom: 0px solid #e8edff;
    padding-top: 5px;
    text-align: right;
}

.mGrid tr:hover td {
    background: #eff2ff;
}

.mGrid .sub {
    background: #FEE79A;
}    

.mGrid .alt {
    background: #f8f8f8;
}

.mGrid .pgr {
    border-top: 1px solid #e8edff;
}

.mGrid .pgr table {
    margin: 5px 0px;
}

.mGrid .pgr td {
    border-width: 0px;
    padding: 0px 6px;
    color: #ff8f00;
    line-height: 12px;
    font-weight: bold;
}

.mGrid .pgr a {
    color: #666;
    text-decoration: none;
}

.mGrid .pgr a:hover {
    color: #ff8f00;
    text-decoration: none;
}

.mGrid .pgr:hover td {
    color: #ff8f00;
    background-color: #fff;
}

.bgCell {
    display: inline-block;
    min-width: 10px;
    padding: 3px 7px;
    font-size: 15px;
    font-weight: bold;
    line-height: 1;
    color: #FFF;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    background-color: rgb(56, 177, 19);
    border-radius: 20px;
}

.bgCell .gray {
    background: #909090; 	
    text-shadow: 1px 1px #000;
}

.bgCell .red {
    background: #FF0404 none; 	
    text-shadow: 1px 1px #000;
}

.bgCell .yellow {
    background: #F6EB09; 	
    text-shadow: 1px 1px #000;
}

.bgCell .green {
    background: #00A300; 	
    text-shadow: 1px 1px #000;
}

.bgCell .blue {
    background: #1c78de; 	
    text-shadow: 1px 1px #000;
}

.left { text-align:left !important;} 

.right {
    text-align: right !important;
}

.center {
    text-align: center !important;
}

.number {
    width : 50px !important;
    text-align: right;
}

.money {
    width : 150px !important;
    text-align: right !important;    
}

.SetNo { /*display: none; */}
.hid { display:none;}
.tblSearch tr td {
    padding : 2px ;
}

#ExpData {
    float: right;
    padding-right: 20px;
}

.hit-the-floor {
    text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0, 0, 0, .1), 0 0 5px rgba(0, 0, 0, .1), 0 1px 3px rgba(0, 0, 0, .3), 0 3px 5px rgba(0, 0, 0, .2), 0 5px 10px rgba(0, 0, 0, .25), 0 10px 10px rgba(0, 0, 0, .2), 0 20px 20px rgba(0, 0, 0, .15);
    /*text-shadow: 0 1px 0 #ccc, 0 2px 0 #000, 0 3px 0 #000, 0 4px 0 #000, 0 5px 0 #000, 0 6px 1px rgba(0, 0, 0, .1), 0 0 5px rgba(0, 0, 0, .1), 0 1px 3px rgba(0, 0, 0, .3), 0 3px 5px rgba(0, 0, 0, .2), 0 5px 10px rgba(0, 0, 0, .25), 0 10px 10px rgba(0, 0, 0, .2), 0 20px 20px rgba(0, 0, 0, .15);*/
    font : 12px Arial,Helvetica,sans-serif;      
    font-size:50px; 
    font-weight: 800;
    color: #003C80;
    text-transform: none;
    font-variant: small-caps;
    margin-bottom: 10px; 
    padding-top: 0px;
}


@media all and (max-width: 1200px) {

    .masthead .logo-large{display:block;}
    .masthead .logo-less700{display:none;}

    .masthead .logoTitle{display:block;}
    .masthead .logoTitle-less550{display:none;}

}

@media all and (max-width: 700px) {

    .masthead .logo-large{display:none;}
    .masthead .logo-less700{display:block;}

    .masthead .logoTitle{display:block;}
    .masthead .logoTitle-less550{display:none;}

}

@media all and (max-width: 550px) {

    .masthead .logo-large{display:none;}
    .masthead .logo-less700{display:block;}

    .masthead .logoTitle{display:none;}
    .masthead .logoTitle-less550{display:block;}

}

.masthead .logo, .masthead .logo-large, .masthead .logo-less700 {
    float: left;
    /*max-width: 150px;*/
    /*margin: 5px;*/
    box-sizing: border-box;
}

.masthead .logo img, .masthead .logo-large img {
    display: block;
    width: 140px;
    padding: 5px;
}

.masthead .logoTitle, .masthead .logoTitle-less550 {
    float: left;
    max-width: 300px;
    margin: 15px 5px 5px 5px;
    box-sizing: border-box;
    font-family: 'Trebuchet MS', Arial, sans-serif;
    font-size: 24px;
    color: #ed1a3b;
    text-transform: none;
}

.masthead .infoLogo {
    float: right;
    font-size: small;
    font-weight: bold;
    text-align: right;
    color: #ed1a3b;
    margin: 5px;
    text-transform: none;
}

.masthead .pic {
    float: right;
    margin: 5px 10px 5px 5px;
    box-sizing: border-box;
}

.masthead .pic img {
    display: block;
    width: 64px;
}

.masthead {
    height: 75px;
    background-color: #ffffff;
}

.navbar-custom .navbar-toggle {
    border-color: #fff;
}

.navbar-custom .navbar-toggle .icon-bar {
    background-color: #fff;
}

.navbar-custom {
    background-color: #954323a1; /*#C1FFCA;*//*#EEA478;*/ /*#003C80; */
    color:#ffffff;
    font-size: 12px;
    font-weight: bold;
    text-transform:uppercase;
    transition: top 0.2s ease-in-out;
    -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
    -moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
    box-shadow: 0px 0px 10px rgba(0,0,0,.8);
    margin-bottom: 10px;
    
    z-index: 1000;
    position: fixed;
    top: 0px;
    width: 100%; 
}

.navbar-custom .navbar-nav > li > a {
    color:#fff;
}

.navbar-custom .navbar-nav > .active > a, .navbar-nav > .active > a:hover, .navbar-nav > .active > a:focus {
    color: #FEE79A;
}

.navbar-custom .navbar-nav > li > a:hover, .nav > li > a:focus { 
    text-decoration: none; 
    background-color: #fff; 
    color:#003C80;	
}

.navbar-custom .navbar-brand {
    color:#eeeeee;
}

.navbar-custom .nav .open > a, .nav .open > a:hover, .nav .open > a:focus {
    background-color: #fff;
    border-color: #337ab7;
    color:#003C80;	    
}

.navbar-custom .dropdown-menu, .dropdown-menu > li, .dropdown-menu > li > a, .dropdown-menu > li > a:hover {
    background-color: #fff;
    color:#003C80;	
}

.navbar-custom .dropdown-menu > li > a:hover {
    background-color: #003C80;
    color: #ffffff;
}

.dropdown-menu, .dropdown-menu > li > a {
    font-size: 13px;
    font-weight: bold;
    text-transform:uppercase;
}

.dropdown-submenu {
    position:relative;
}

.dropdown-submenu>.dropdown-menu {
    top:0;
    left:100%;
    margin-top:-6px;
    margin-left:-1px;
    -webkit-border-radius:0 6px 6px 6px;
    -moz-border-radius:0 6px 6px 6px;
    border-radius:0 6px 6px 6px;
}

.dropdown-submenu:hover>.dropdown-menu {
    display:block;
}

.dropdown-submenu>a:after {
    display:block;
    content:" ";
    float:right;
    width:0;
    height:0;
    border-color:transparent;
    border-style:solid;
    border-width:5px 0 5px 5px;
    border-left-color:#cccccc;
    margin-top:5px;
    margin-right:-10px;
}

.dropdown-submenu:hover>a:after {
    border-left-color:#ffffff;
}

.dropdown-submenu.pull-left {
    float:none;
}

.dropdown-submenu.pull-left>.dropdown-menu {
    left:-100%;
    margin-left:10px;
    -webkit-border-radius:6px 0 6px 6px;
    -moz-border-radius:6px 0 6px 6px;
    border-radius:6px 0 6px 6px;
}


.loginMain {      
    /*width: 350px;
    height: 200px;*/
    color: #fff;
}
.loginMain:hover {
    -webkit-opacity: 1;
    -moz-opacity: 1;
    opacity: 1;    
}

/*login-wrap*/
.loginMain table {
    width: 350px;
    height: auto;
    margin: auto;
    margin-top: 5%;
}

.btnLogin {
    border: 1px solid #008000;
    background: #fff;
    color: #008000;
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    font-size: 14px;
    display: block;
    height: 35px;
    outline: none;
    width: 85%;
    border-radius: 7px 7px 7px 7px;
}

.btnLogin:hover {
    border: 1px solid #fff;
    background: #008000;
    color: #fff;    
}

.link { font-size:14px;}