/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : Sep 1, 2019, 5:15:36 PM
    Author     : budisetiawan.eko@gmail.com
*/


body, html { 
    width: 100%; height: 100%; 
    font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, 'Century Gothic', Tahoma;
}


.bodyx {
    background-color: #001B34;
    font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, 'Century Gothic', Tahoma;
}

.body-black {
    background-color: #222D32;
    font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, 'Century Gothic', Tahoma;
}

.body-white {
    background-color: #fff;
    font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, 'Century Gothic', Tahoma;
}

.titlex {
    color: #fff;
    text-shadow: 1px 1px 0 #ccc;
}

#wrap {
    margin: 0 auto;
    padding: 10px;
    background-color: #001B34;
    width: 100%;
    overflow: -moz-scrollbars-vertical;
    /*overflow-y: scroll;
    overflow: hidden; -moz-scrollbars-vertical;
    overflow-y: scroll;*/
    font-family: Arial, "Trebuchet MS", Helvetica, sans-serif;
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box;    
    box-sizing: border-box;
}


.login-box-body {
    border-radius: 10px;
    border: 1px solid #66aacc;
    box-shadow: 1px 1px 5px #ddd;
}




/*--- navbar ---*/
.skin-blue .main-header .logo {
    background-color: #00002f;
    /*border-bottom: #002244 2px solid;*/
    box-shadow: 1px 0 8px #444;    
}
/*.skin-blue .main-header .logo:hover { background-color: #00002f;}*/

.skin-blue .main-header .navbar {
    background-color: #0c2c47; /* #eee;*/
    box-shadow: 0 1px 8px #888;
}


/*navbar user */
.skin-blue .main-header li.user-header {
    background: #990033; /*#001B34;*/
    /*background: rgb(169,3,41); /* Old browsers */
    /*background: -moz-linear-gradient(top, rgba(169,3,41,1) 0%, rgba(143,2,34,1) 44%, rgba(109,0,25,1) 100%); /* FF3.6-15 */
    /*background: -webkit-linear-gradient(top, rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%); /* Chrome10-25,Safari5.1-6 */
    /*background: linear-gradient(to bottom, rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    /*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019',GradientType=0 ); /* IE6-9 */
}

.navbar-nav > .user-menu > .dropdown-menu > .user-footer {
    background-color: #720026; /*#00002f;
    /*background: -moz-linear-gradient(top, rgba(169,3,41,1) 0%, rgba(143,2,34,1) 44%, rgba(109,0,25,1) 100%); /* FF3.6-15 */
    /*background: -webkit-linear-gradient(top, rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%); /* Chrome10-25,Safari5.1-6 */
    /*background: linear-gradient(to bottom, rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    /*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019',GradientType=0 ); /* IE6-9 */
    
    /*background: #ff3333;*/
    /*background: rgb(255,48,25); /* Old browsers */
    /*background: -moz-linear-gradient(top, rgba(255,48,25,1) 0%, rgba(207,4,4,1) 100%); /* FF3.6-15 */
    /*background: -webkit-linear-gradient(top, rgba(255,48,25,1) 0%,rgba(207,4,4,1) 100%); /* Chrome10-25,Safari5.1-6 */
    /*background: linear-gradient(to bottom, rgba(255,48,25,1) 0%,rgba(207,4,4,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    /*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3019', endColorstr='#cf0404',GradientType=0 ); /* IE6-9 */
}

.navbar-nav > .user-menu > .dropdown-menu {
    width: 240px;
}

.user-panel > .image > img {
    /*max-width: 70px;
    width: 70px;*/
}

.skin-blue .main-header .navbar .nav > li > a {
    color: #fff;
    text-shadow: 0px 1px 0 #888;
    background-color: #00002f;
    
    /*background: rgb(169,3,41); /* Old browsers */
    /*background: -moz-linear-gradient(top, rgba(169,3,41,1) 0%, rgba(143,2,34,1) 44%, rgba(109,0,25,1) 100%); /* FF3.6-15 */
    /*background: -webkit-linear-gradient(top, rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%); /* Chrome10-25,Safari5.1-6 */
    /*background: linear-gradient(to bottom, rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    /*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019',GradientType=0 );*/
}

.skin-blue .main-header .navbar .nav > li > a:hover, 
.skin-blue .main-header .navbar .nav > li > a:active, 
/*.skin-blue .main-header .navbar .nav > li > a:focus, */
.skin-blue .main-header .navbar .nav .open > a, 
.skin-blue .main-header .navbar .nav .open > a:hover, 
.skin-blue .main-header .navbar .nav .open > a:focus, 
.skin-blue .main-header .navbar .nav > .active > a,
.skin-blue .main-header .navbar .sidebar-toggle:hover {
    color: #555;
    background: #ddd;
}

.skin-blue .main-header .navbar .sidebar-toggle {
    color: #fff;
    text-shadow: 1px 1px 0 #888;
    background-color: #00002f;
    
    /*background: rgb(169,3,41); /* Old browsers */
    /*background: -moz-linear-gradient(top, rgba(169,3,41,1) 0%, rgba(143,2,34,1) 44%, rgba(109,0,25,1) 100%); /* FF3.6-15 */
    /*background: -webkit-linear-gradient(top, rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%); /* Chrome10-25,Safari5.1-6 */
    /*background: linear-gradient(to bottom, rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    /*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019',GradientType=0 );*/
}

.skin-blue .main-header .navbar .sidebar-toggle:hover {
    /*background-color: rgba(0,0,0,0.1);
    color: #555;*/
}

.circle {
    border-radius: 50%;
    width: 20px;
    height: 20px; 
    background-color: #999;
    float: left;
    top: 30px;
}



/*----- SIDEBAR ------*/
/*---- LOGO LPUK ----*/
.lg-lpuk {
    text-align: center;
    width: 100%;
    padding: 5px 5px 20px;
}

.lg-img {
    text-align: center;
    width: 100%;
}

.lg-mtitle {
    margin-bottom: 0;
    padding-left: 5px;
    color: #fff;
    font-size: 26px;
    font-weight: bold;
    font-family: "Eurostile", Arial, "Courier New";
    text-shadow: 0 1px 1px #777;
    font-style: normal;
}

.lg-msubtitle {
    color: #0C2C47; /*#5892ad;*/
    font-size: 10px;
    font-weight: normal;
    line-height: normal;
}

.lg-msubtitle-lg {
    margin: 0px 0 0;
    /*color: aqua;#FFD700;  /*#5892ad;*/
    font-size: 24px;
    font-weight: bold;
    line-height: normal;
    font-family: "Century Gothic", Tahoma;
    font-size: 16px;
    text-shadow: 0 1px 1px #000;
}


.skin-blue .wrapper, .skin-blue .main-sidebar, .skin-blue .left-side, 
.skin-blue .sidebar-menu > li > ul.treeview-menu {
    background-color: #001B34;
    box-shadow: 1px 0px 8px #777;
    /*border-right: 1px solid #555;*/
}

.skin-blue .sidebar-menu > li:hover > a,
.skin-blue .sidebar-menu > li.active > a,
.skin-blue .sidebar-menu > li.menu-open > a {
  color: #ffffff;
  background: #00004f;
}

.skin-blue .sidebar-menu > li.active > a {
  border-left-color: #3c8dbc;
  border-left-width: 4px;
}

.skin-blue .sidebar-menu > li.header {
    color: #999;
    font-weight: normal;
    font-size: 14px;
    background: #000022;
}

.treeview-menu {
    padding: 0;
}

.skin-blue .sidebar-menu .treeview-menu > li {
    border-left: none;
    margin-left: 20px;
}


.skin-blue .sidebar-menu .treeview-menu > li:hover > a,
.skin-blue .sidebar-menu .treeview-menu > li.menu-open > a,
.skin-blue .sidebar-menu .treeview-menu > li.active > a {
    color: #fff;
    font-weight: bold;
}



/*--- content ---*/
.widget-user .widget-user-image > img {
    border : 3px solid #eee;
}

.widget-user-2 .widget-user-header {
    padding: 15px;
    box-sizing: border-box;
    
    background: rgb(169,3,41); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(169,3,41,1) 0%, rgba(143,2,34,1) 44%, rgba(109,0,25,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019',GradientType=0 );
}

.widget-user-2 .widget-user-image > img {
    width: 100px;
    border-radius: 8px;
    border: 4px solid #D20706;
}

.widget-user-2 .widget-user-username, .widget-user-2 .widget-user-desc {
    margin-left: 110px;
    color: #fff;
}

.widget-user-2 .widget-user-username {
    margin-bottom: 3px;
    font-weight: 500;
}

.widget-user-2 .widget-user-desc {
    text-transform: lowercase;
}


.content-wrapper {
    background: #fff;
}

.content {
    padding-top: 5px;
    padding-bottom: 15px;
}


.content-header {
    padding-top: 10px;
    padding-bottom: 3px;
}


.content-header > h1 {
    font-size: 20px;
    color: #555;
    text-shadow: 1px 1px 0 #ccc;
}

.content-header > .breadcrumb {
    font-size: 10px;
    color: #777;
}

.content-header > .breadcrumb > li > a {
    color: #777;
}

.breadcrumb > li + li::before {
    padding: 0 3px;
    color: #aaa;
}

.box {
    margin-bottom: 0;
    background: #ecf0f5;
    border-radius: 5px;
    /*background-color: #ecf0f5;
    box-shadow: 5px 5px 8px #cfcfcf;*/
    /*border: 1px #fff solid;*/
}

.box-header {
    padding-bottom: 3px;
    background: #ecf0f5;
    /*border-bottom: 1px #fff solid;*/
    box-shadow: 5px 0px 5px #cfcfcf;
    border-radius: 5px 5px 0 0;
}

.box-header h4 {
    margin: 0 0 5px 0;
    font-weight: normal;
}

.box-body {
    /*margin-top: 6px;
    background: #ecf0f5;*/
    box-shadow: 5px 5px 5px #cfcfcf;
}

.box-footer {
    border-top: 2px #dfdfdf solid;
    box-shadow: 5px 5px 5px #cfcfcf;
    background: #ecf0f5;
    border-radius: 0 0 5px 5px;
}

.widget-user .box-footer {
    padding-top: 10px;
}

.profilcbt {
    background: #fff;
    /*background: #ecf0f5; 
    box-shadow: 5px 5px 5px #ddd;*/
}

.profilcbt dl dd {
    color: #777;
    text-shadow: 1px 1px 4px #ddd;
}

.profilcbt dl dt {
    /*color: #444;*/
    color: #b40000;
    /*color: #0016b4;*/
    margin-bottom: 15px;
    border-bottom: 1px solid #dfdfdf;
}

.profilcbt ul {
    margin: 20px 0 50px;
    padding: 0;
}

.profilcbt ul li {
    color: #b40000;
    margin: 0px 0;
    padding: 7px 0;
    border-bottom: 1px solid #ffefe2;
    list-style-type: none;
}

.profilcbt ul li .liTitle {
    color: #777; /*#f26a6a;*/
}

.profilcbt ul li .liData {
    font-weight: bold;
    font-size: 16px;
}

.box-solid {
    background: #17A2B8;
}

.box-solid .box-header {
    border-bottom: 1px #ccc solid;
    /*box-shadow: 5px 5px 5px #cfcfcf; 
    background: #79b5bd; 
    border-radius: 5px 5px 0 0;*/
}

.box-solid .box-body {
    padding: 15px 10px;
}

.box-solid .box-footer { 
    background: #17A2B8; 
    border-top: 1px #ccc solid;
}



.box-inside {
    margin-bottom: 15px;
    box-shadow: none;
    border: none;
    /*background: #fff;
    border-bottom: 1px #fed22f solid;*/
    border-radius: 7px;
}

.box-inside .box-header {
    box-shadow: none;
    padding: 7px 20px;
    border-bottom: 1px #ddd solid;
    border-radius: 7px 7px 0 0;
    background: #fff;
}

.box-inside .box-body {
    box-shadow: none;
    /*border-radius: 0 0 7px 7px;*/
    background: #fff;
}

.box-inside .box-footer {
    box-shadow: none;
    border-radius: 0 0 7px 7px;
    background: #fff;
}

.title-box {
    font-size: 18px;
    color: #fff;
    padding-bottom: 5px;
    padding-left: 10px;
    font-weight: bold;
}






.form-table tbody tr td {
    padding: 4px;
}

.form-table-tight tbody tr td {
    padding: 2px 1px;
}

.form-table-tight tr:hover, .form-table-tight tr:focus {
    background: #BFEBFF;
    cursor: pointer;
}

.form-control {
    border-radius: 4px;
}

.form-control:focus {
    box-shadow: 1px 0px 7px #d3e8ff;
    border: 1px solid #a4d0ff;
}

.form-control-pclist {
    border-radius: 3px;
    padding: 2px;
    width: 100%;
    border: 1px solid #ccc;
    color: #555;
    font-size: 14px;
}

.form-control-pclist:focus {
    box-shadow: 1px 0px 7px #d3e8ff;
    border: 1px solid #a4d0ff;
}

.form-control-tight {
    border-radius: 3px;
    padding: 2px 1px;
    width: 100%;
    border: 1px solid #ccc;
    color: #555;
    font-size: 12px;
}

.form-control-tight:focus {
    box-shadow: 1px 0px 7px #d3e8ff;
    border: 1px solid #a4d0ff;
}

.input-select, .input-select2, .select2 { /**/
    cursor: pointer;
    padding: 3px 12px;
    font-family: Arial, "Trebuchet MS", Helvetica, sans-serif;
    font-size: 14px;
    color: #555;
    width: 100%;
}

.input-select option, .input-select2 option, .select2 option {
    cursor: pointer;
}

.input-select:focus, .input-select2:focus, .select2:focus {
    box-shadow: 1px 0px 7px #d3e8ff;
    border: 1px solid #a4d0ff;
    cursor: pointer;
}


.input-text {
    font-family: Arial, "Trebuchet MS", Helvetica, sans-serif;
    font-size: 14px;
    color: #555555;
    padding: 4px 6px; 
    border: 1px solid #a0a0a0; 
    background: #efefef;
}

.input-text:focus {
    border: 1px solid #dfdfdf;
    background: #efefef;
}

input[type="checkbox"], label {
    cursor: pointer;
}

.inp-file {
    opacity: 1;
    width: 0px;
}

input[type="checkbox"] {
    margin-right: 3px;
}

.label-checkbox {
    margin-right: 20px;
    margin-top: 7px;
}


.err-note {
    display: none;
    font-size: 12px; 
    font-style: italic; 
    padding: 6px; 
    text-align: center;
    width: 100%;
}



.flat-button, .flat-button-grey, .flat-button-light-blue, .flat-button-light-red, .flat-button-none  {
    box-shadow: none;
    border: 1px solid #ade8ff;
    border: none;
    float: left;
    cursor: pointer;
    padding: 6px 20px;
    font-family: Arial, "Trebuchet MS", Helvetica, sans-serif;
    font-size: 14px;
    font-weight: bold;
}

.flat-button, .flat-button-grey  {
    color: #333;
}

.flat-button-light-blue {
    color: #fff;  
    background: rgba(73,155,234,1);
    background: -moz-linear-gradient(top, rgba(73,155,234,1) 0%, rgba(32,124,229,1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(73,155,234,1)), color-stop(100%, rgba(32,124,229,1)));
    background: -webkit-linear-gradient(top, rgba(73,155,234,1) 0%, rgba(32,124,229,1) 100%);
    background: -o-linear-gradient(top, rgba(73,155,234,1) 0%, rgba(32,124,229,1) 100%);
    background: -ms-linear-gradient(top, rgba(73,155,234,1) 0%, rgba(32,124,229,1) 100%);
    background: linear-gradient(to bottom, rgba(73,155,234,1) 0%, rgba(32,124,229,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#499bea', endColorstr='#207ce5', GradientType=0 );

}

.flat-button-light-red {
    color: #fff;    
    background: #a90329; /* Old browsers */
    background: -moz-linear-gradient(top, #a90329 0%, #8f0222 44%, #6d0019 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #a90329 0%,#8f0222 44%,#6d0019 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019',GradientType=0 ); /* IE6-9 */
}

.flat-button:active, .flat-button-grey:active, .flat-button-light-blue:active, .flat-button-light-red:active, 
.flat-button-none:active {
    transform: translateY(-1px);
    /*box-shadow: 3px 3px 3px #ccc;*/
}

.flat-button:hover {
    background-color: #2574AD;
    box-shadow: -3px -3px -3px #ccc;
}

.flat-button-grey:hover {
    background-color: #ccc;
    box-shadow: -3px -3px -3px #ccc;
}

.flat-button-light-blue:hover {
    background: #b6e6e6;
    color: #777;
    box-shadow: -3px -3px -3px #ccc;
}

.flat-button-light-red:hover {
    background: #ff9999;
    color: #777;
    box-shadow: -3px -3px -3px #ccc;    
}

.flat-button-none:hover {
    background-color: transparent;
    box-shadow: -3px -3px -3px #ccc;
    transform: translateY(1px);
}


.icon-search {
    background: transparent url(../images/src.png) no-repeat;
    background-size: 18px 18px;
    background-position: center;
}

.icon-close {
    background: url(../images/close3.png) no-repeat transparent;
    background-size: 16px 16px;
    background-position: center;
}

.icon-right-arrow {
    background: url(../images/right_sign.png) no-repeat transparent;
    background-size: 16px 22px;
    background-position: center;
}

.icon-edit1 {
    background: url(../images/write.png) no-repeat transparent;
    background-size: 20px 20px;
    background-position: center;
}

.icon-edit2 {
    background: url(../images/editx.png) no-repeat transparent;
    background-size: 22px 18px;
    background-position: center;
}

.icon-edit1:hover, .icon-edit2:hover, .icon-close:hover, .icon-right-arrow:hover, .icon-search:hover {
    transform: translateY(-2px);
    color: #ccffcc;
}


/*--- table style ---*/
.tb-box {
    margin: 0;
    padding: 0;
    overflow: auto;
    width: 100%;
}


.tb-big { 
    font-family: Arial;    
    width: 100%;
    margin: 10px 0;
    background: #fff;
}

.tb-big thead tr th {
    background: #006699;
    font-size: 13px;
    border: #D5F1FF 1px solid;
    color: #fff;
    text-shadow: 0 -1px 0 #ccc;
    padding: 6px;
    text-align: center;
}

.tb-big tbody tr td {
    border: #D5F1FF 1px solid;
    font-size: 14px;
    font-family: Arial;
    padding: 6px;
}

.tb-big tr:nth-child(even) td, .tb-big tbody tr:nth-child(even) th {
    background-color: #EFFAFF;
}

.tb-big tr:hover {
    background: #BFEBFF;
    cursor: pointer;
}



/*--- SMALL TABLE ---*/
.tb-small, .tb-small-nostrip { 
    font-family: Tahoma;
    width: 100%;
    margin: 0;
    background: #fff;
    font-size: 12px;
}

.tb-small thead tr th, .tb-small-nostrip thead tr th {
    background: #006699;
    font-size: 11px;
    border: #D5F1FF 1px solid;
    color: #fff;
    text-shadow: 0 -1px 0 #ccc;
    padding: 4px;
    text-align: center;
}

.tb-small tbody tr td, .tb-small-nostrip tbody tr td {
    border: #D5F1FF 1px solid;
    padding: 2px 4px;
}

.tb-small tbody tr td a, .tb-small-nostrip tbody tr td a {
    font-weight: bold; 
    font-size: 12px;
}

.tb-small tbody tr td a:hover {
    color: #999;
    text-decoration-line: underline;
}

.tb-small-nostrip tbody tr td {
    background: none;
}

.tb-small tr:nth-child(even) td, .tb-small tbody tr:nth-child(even) th {
    background-color: #EFFAFF;
}

.tb-small tfoot tr td, .tb-small-nostrip tfoot tr td {
    background-color: #aaa; /*#6699ff;*/
    border: #D5F1FF 1px solid;
    font-size: 10px;
    padding: 2px 4px;
    color: #fff;
    font-weight: bold;
}

.tb-small tr:hover, .tb-small-nostrip tr:hover {
    background: #BFEBFF;
    cursor: pointer;
}


/*------.tb-small-font-----*/
.tb-small-font { 
    font-family: Tahoma;
    width: 100%;
    margin: 0;
    background: #fff;
    font-size: 11px;
}

.tb-small-font thead tr th {
    background: #006699;
    font-size: 9px;
    font-weight: bold;
    border: #D5F1FF 1px solid;
    color: #fff;
    text-shadow: 0 -1px 0 #ccc;
    padding: 2px;
    text-align: center;
}

.tb-small-font tbody tr td {
    border: #D5F1FF 1px solid;
    padding: 2px;
    background: #c8dee3;
}

.tb-small-font tbody tr td a {
    font-weight: bold; 
    font-size: 11px;
}

.tb-small-font tbody tr td a:hover {
    color: #999;
    text-decoration-line: underline;
}

/*.tb-small-font tr:nth-child(even) td {
    background-color: #EFFAFF;
}*/

.tb-small-font tfoot tr td {
    background-color: #aaa; /*#6699ff;*/
    border: #D5F1FF 1px solid;
    font-size: 11px;
    padding: 2px;
    color: #fff;
    font-weight: bold;
}

/*.tb-small-font tr:hover {
    background: #BFEBFF;
    cursor: pointer;
}*/

.tb-desc {
    padding: 0 15px;
    /*background: #c8dee3;*/
}

.tb-desc h3 {
    margin-top: 0;
}



/*--- SMALL TABLE NO BORDER ---*/
.tb-small-noborder { 
    font-family: Arial;    
    width: 100%;
    margin: 0;
    background: #fff;
    /*border: #D5F1FF 1px solid;*/
}

.tb-small-noborder thead tr th {
    background: #006699;
    font-size: 12px;
    /*border: #D5F1FF 1px solid;*/
    color: #fff;
    text-shadow: 0 -1px 0 #ccc;
    padding: 6px 4px;
    text-align: center;
}

.tb-small-noborder tbody tr td {
    border: #D5F1FF 1px solid;
    border-left: none;
    border-right: none;
    font-size: 12px;
    font-family: Arial;
    padding: 6px 4px;
    vertical-align: top;
}

.tb-small-noborder tr:nth-child(even) td {
    background-color: #EFFAFF;
}

.tb-small-noborder tfoot tr td {
    background-color: #aaa; /*#6699ff;*/
    border: #D5F1FF 1px solid;
    font-size: 12px;
    font-family: Arial;
    padding: 2px 4px;
    color: #fff;
    font-weight: bold;
}

.tb-small-noborder tr:hover {
    background: #BFEBFF;
    cursor: pointer;
}


/*table no strips*/
.tb-nostrip { 
    font-family: Arial;    
    width: 100%;
    margin: 5px 0;
}

.tb-nostrip thead tr th {
    background: #006699;
    font-size: 13px;
    border: #D5F1FF 1px solid;
    color: #fff;
    text-shadow: 0 -1px 0 #ccc;
    padding: 4px;
    text-align: center;
}

.tb-nostrip tbody tr td {
    border: #D5F1FF 1px solid;
    font-size: 12px;
    font-family: Arial;
    padding: 4px;
}

.tb-nostrip tr:hover {
    /*background: #BFEBFF;*/
    cursor: pointer;
}


/*--- TABLE LIST DATA ---*/
.tb-list, .tb-list-inside {
    margin: 0px 0;
    width: 100%; 
    background: #fff;
    font-size: 14px;
}

.tb-list tbody tr td, .tb-list-inside tbody tr td {
    padding: 4px 6px;
    border-bottom: 1px solid #ddd;
    text-align: right;
    text-transform: none;
    color: #555;
    font-weight: bold;
    font-size: 16px;
}

.tb-list tbody tr td:nth-child(1), .tb-list-inside tbody tr td:nth-child(1) {    
    text-align: left;
    text-transform: uppercase;
    color: #777;
    font-weight: normal;
    font-size: 14px;
}

.tb-list tbody tr:nth-child(odd) td {
    background-color: #fdf7d4;
}

.tb-list-inside tbody tr:nth-child(odd) td {
    background-color: #fff;
}

.tb-list-inside tbody tr td {
    border-bottom: none;
}


.tb-list-small {
    margin: 0px 0;
    width: 100%; 
    background: #fff;
    font-size: 12px;
}

.tb-list-small thead tr th {
    padding: 2px;
    background-color: #f5f5f5;
    border: 1px solid #fff;
    color: #aaa;
    font-weight: bold;
    text-align: center;
    vertical-align: middle;
}

.tb-list-small tbody tr td {
    padding: 2px 6px;
    /*border-bottom: 1px solid #ddd;*/
    border: 1px solid #fff;
    text-align: left;
    text-transform: none;
    color: #555;
    font-weight: normal;
}

.tb-list-small tbody tr td:nth-child(1) {    
    text-align: left;
    text-transform: uppercase;
    color: #777;
}

.tb-list-small tbody tr td:nth-child(2) {    
    text-align: right;
    text-transform: none;
    color: #777;
    font-weight: bold;
}

.tb-list-small tfoot {
    border: 1px solid #fff;
    background-color: #f5f5f5;
    font-size: 14px;
}

.tb-list-small tfoot tr td {
    padding: 2px 6px;
    text-align: left;
    text-transform: none;
    color: #555;
}

.tb-list-small tfoot tr td p {
    padding: 4px 6px;
    text-align: left;
    color: #555;
    background-color: #fff;
    border-radius: 4px;
}

.tb-list-small tbody tr:nth-child(odd) td {
    background-color: #fdf7d4;
}


/*--- COROUSEL ---*/
/*.carousel-inner > .item {
    text-align: center;
}*/


/* absensi */
#niksrc, #namesrc {
    display: none;
}

.dtabsent {
    width: 100%;
    height: 360px;
}


/*-- for hr --*/
.xhr {
    margin: 5px;
    color: #9999ff;
    border-top: 1px solid #eeeeff;
}

.pnyhr {
    margin: 0px;
    color: #ccc;
    border-top: 1px solid #ccc;
}

.xhr-gray {
    margin: 5px;
    color: #9999ff;
    border-top: 1px solid #ccc;
}


/*-- error notification --*/
code {
    background: #ffcccc;
}


/*footer*/



/*--- footer ---*/
.main-footer {
    background: #ddd;
    color: #333;
    bottom: 0;
    left: 0;
    right: 0;
    position: fixed;
    z-index: 1032;
    box-shadow: 0px -2px 2px #ddd;
    border-top: 1px #ccc solid;
    padding: 0;
}

.wwwlpuk, .wwwlpuk a {
    color: #aaa;
}

.wwwlpuk a:hover {
    color: #6666ff;
}


/*--- absensi profile ---*/
.abstitle, .cutititle {
    font-size: 16px;
    font-family: Arial;
    font-weight: bold;
    padding: 6px 30px;
    width: 100%;
    color: #fff;
}

.abstitle {
    background: #f17432;
}

.cutititle {
    background: #990000;
}

.abscontent, .cuticontent {
    background: #dfdfdf;
}

.link-txt {
    font-weight: bold;
    font-size: 16px;
    color: #555;
    text-decoration: none;
}

.link-txt:hover {
    cursor: pointer;
    color: #3333ff;
    text-decoration: underline; 
    font-size: 17px;
}

.abspersen {
    width: 100%;
    margin: 0;
    padding: 0;
    color: #339900;
}

.absbar {
    width: 100%;
    height: 22px;
    padding: 0px;
    border: #00ff66 1px solid;
    box-sizing: border-box;
    text-align: center;
}

#headkyn, #headsekre, #headpeng, #headpengacc, #headsetup, #headkabag, #helpx {
    border-top: #002244 2px solid;
}

#headkyn:hover, #headsekre:hover, #headpeng:hover, #headpengacc:hover, #headsetup:hover, #headkabag:hover, #helpx:hover {
    background-color: #00002f;
    font-weight: bold;
    color: #fff;
    cursor: pointer;
}

.listkyn, .listsekre, .listpeng, .listpengacc, .listsetup, .listkabag {
    display: none;
}






/*tabel report*/
.tb-report { 
    font-family: Arial;    
    width: 100%;
    margin: 5px 0;
    background: #fff;
    background-color: #fff;
}

.tb-report thead tr th {
    /*background: #006699;*/
    font-size: 13px;
    border: #34b5c7 1px solid;
    color: #555;
    text-shadow: 0 -1px 0 #ccc;
    padding: 2px 4px;
    text-align: center;
}

.tb-report tbody tr td {
    border: #34b5c7 1px solid;  /*#D5F1FF*/
    font-size: 12px;
    font-family: Arial;
    padding: 2px 4px;
    text-align: center;
}

/*.tb-report tr:nth-child(even) td, .tb-report tbody tr:nth-child(even) th {
    background-color: #EFFAFF;
}*/

.tb-report tfoot tr td {
    background-color: #aaa; /*#6699ff;*/
    border: #D5F1FF 1px solid;
    font-size: 12px;
    font-family: Arial;
    padding: 2px 4px;
    color: #fff;
    font-weight: bold;
}

.tb-report tr:hover {
    background-color: #BFEBFF;
    cursor: pointer;
}


.modal-footer {
    border-top-color: #aaddEF;
}

.bgmodal-blue {
    background: #00C0EF; 
    color: #fff; 
    font-size: 24px;
    border-bottom: 5px solid #00DDFF; 
}

.bgmodal-gray {
    background: #777;
    color: #aaa;
}

.bgmodal-green {
    background: #27AE60;/*#19A185;*/
    color: #fff; 
    font-size: 24px;
    border-bottom: 8px solid #00A559; 
}

.bgmodal-foot-green {
    background: #27AE60;/*#19A185;*/
    color: #fff; 
    font-size: 24px;
}


/*carousel display*/
.imgphoto {
    cursor: pointer;
    margin: 0 auto;
}

.carousel-control {
    text-align: left;
    padding: 0 7px;
    color: #ccc;
}

/*.carousel-control:hover {
    color: #333;
}*/

#imgx {
    max-width: 100%;
    height: auto;
}


/*-----------------------------------
*LIST & NONE different :
* - list use when button not used, just text list
-----------------------------------*/

@media (min-width: 768px) {
    .modalbox-sm {
        min-width: 400px;
        width: 700px;
    }
    
    .modalbox-sm-xl {
        min-width: 400px;
        width: 700px;
    }

    .li-num-sm {
        width: 8%;
        height: auto;
        margin: 0;
        text-align: right;
        padding-right: 5px;
        float: left;
    }

    .li-num-sm-list {
        width: 8%;
        height: auto;
        margin: 0;
        text-align: right;
        padding-right: 5px;
        float: left;
    }

    .li-content-sm {
        float: left;
        width: 85%;
        margin: 0;
        padding: 0 5px;
        border-left: 2px solid #eee;
        border-right: 2px solid #eee;
    }

    .li-content-sm-list {
        float: left;
        width: 90%;
        margin: 0;
        padding: 0 5px;
        border-left: 2px solid #eee;
        /*border-right: 2px solid #eee;*/
    }

    .li-content-sm-list-btn {
        float: left;
        width: 14%;
        margin: 0;
        padding: 0 5px;
        border-left: 2px solid #eee;
        border-right: 2px solid #eee;
    }

    .li-btn-sm {
        width: 14%;
        height: auto;
        margin: 0;
        padding: 0;
        text-align: center;
        float: left;
    }

    .col4-li-num-sm {
        width: 10%;
        height: auto;
        margin: 0;
        text-align: right;
        padding-right: 5px;
        float: left;
    }

    .col4-li-img-sm {
        width: 20%;
        height: auto;
        margin: 0;
        text-align: center;
        padding-right: 5px;
        float: left;
    }

    .col4-li-content-sm {
        float: left;
        width: 60%;
        margin: 0;
        padding: 0 5px;
        border-left: 2px solid #eee;
        border-right: 2px solid #eee;
    }

    .col4-li-btn-sm {
        width: 10%;
        height: auto;
        margin: 0;
        padding: 0;
        text-align: center;
        float: left;
    }
    
    .li-col-sm-1, .li-col-sm-2, .li-col-sm-3, .li-col-sm-4, .li-col-sm-5, .li-col-sm-6, .li-col-sm-7, .li-col-sm-8, .li-col-sm-9, .li-col-sm-10, 
    .li-col-sm-11, .li-col-sm-12, .li-col-sm-13, .li-col-sm-14, .li-col-sm-15, .li-col-sm-16, .li-col-sm-17, .li-col-sm-18, .li-col-sm-19, 
    .li-col-sm-20, .li-col-sm-21, .li-col-sm-22, .li-col-sm-23, .li-col-sm-24, .li-col-sm-25, .li-col-sm-26, .li-col-sm-27, .li-col-sm-28, 
    .li-col-sm-29, .li-col-sm-30 {
      float: left;
      margin: 0;
      padding: 0 3px 0 0;
      font-size: 11px;
      color: #999;
    }
    .li-col-sm-30 {
      width: 100%;
    }
    .li-col-sm-29 {
      width: 96.3333333%;
    }
    .li-col-sm-28 {
      width: 93.3333333%;
    }
    .li-col-sm-27 {
      width: 90%;
    }
    .li-col-sm-26 {
      width: 86.3333333%;
    }
    .li-col-sm-25 {
      width: 83.3333333%;
    }
    .li-col-sm-24 {
      width: 80%;
    }
    .li-col-sm-23 {
      width: 76.3333333%;
    }
    .li-col-sm-22 {
      width: 73.3333333%;
    }
    .li-col-sm-21 {
      width: 70%;
    }
    .li-col-sm-20 {
      width: 66.3333333%;
    }
    .li-col-sm-19 {
      width: 63.3333333%;
    }
    .li-col-sm-18 {
      width: 60%;
    }
    .li-col-sm-17 {
      width: 56.3333333%;
    }
    .li-col-sm-16 {
      width: 53.3333333%;
    }
    .li-col-sm-15 {
      width: 50%;
    }
    .li-col-sm-14 {
      width: 46.3333333%;
    }
    .li-col-sm-13 {
      width: 43.3333333%;
    }
    .li-col-sm-12 {
      width: 40%;
    }
    .li-col-sm-11 {
      width: 36.3333333%;
    }
    .li-col-sm-10 {
      width: 33.3333333%;
    }
    .li-col-sm-9 {
      width: 30%;
    }
    .li-col-sm-8 {
      width: 26.3333333%;
    }
    .li-col-sm-7 {
      width: 23.3333333%;
    }
    .li-col-sm-6 {
      width: 20%;
    }
    .li-col-sm-5 {
      width: 16.3333333%;
    }
    .li-col-sm-4 {
      width: 13.3333333%;
    }
    .li-col-sm-3 {
      width: 10%;
    }
    .li-col-sm-2 {
      width: 6.3333333%;
    }
    .li-col-sm-1 {
      width: 3.3333333%;
    }
}

/*-----------------------------------
*LIST & NONE different :
* - list use when button not used, just text list
-----------------------------------*/


@media (max-width: 767px) {
    .modalbox-xs {
        width: 400px;
    }

    .li-num-xs {
        width: 10%;
        height: auto;
        margin: 0;
        text-align: right;
        padding-right: 5px;
        float: left;
    }

    .li-num-xs-list {
        width: 10%;
        height: auto;
        margin: 0;
        text-align: right;
        padding-right: 5px;
        float: left;
    }

    .li-content-xs {
        float: left;
        width: 82%;
        margin: 0;
        padding: 0 5px;
        border-left: 2px solid #eee;
        border-right: 2px solid #eee;
    }

    .li-content-xs-list {
        float: left;
        width: 89%;
        margin: 0;
        padding: 0 5px;
        border-left: 2px solid #eee;
        /*border-right: 2px solid #eee;*/
    }

    .li-content-xs-list-btn {
        float: left;
        width: 80%;
        margin: 0;
        padding: 0 5px;
        border-left: 2px solid #eee;
        border-right: 2px solid #eee;
    }

    .li-btn-xs {
        width: 8%;
        height: auto;
        margin: 0;
        padding: 0;
        text-align: center;
        float: left;
    }

    .col4-li-num-xs {
        width: 8%;
        height: auto;
        margin: 0;
        text-align: right;
        padding-right: 5px;
        float: left;
    }

    .col4-li-img-xs {
        width: 18%;
        height: auto;
        margin: 0;
        text-align: center;
        padding-right: 5px;
        float: left;
    }

    .col4-li-content-xs {
        float: left;
        width: 60%;
        margin: 0;
        padding: 0 5px;
        border-left: 2px solid #eee;
        border-right: 2px solid #eee;
    }

    .col4-li-btn-xs {
        width: 10%;
        height: auto;
        margin: 0;
        padding: 0;
        text-align: center;
        float: left;
    }
    
    .li-col-xs-1, .li-col-xs-2, .li-col-xs-3, .li-col-xs-4, .li-col-xs-5, .li-col-xs-6, .li-col-xs-7, .li-col-xs-8, .li-col-xs-9, .li-col-xs-10, 
    .li-col-xs-11, .li-col-xs-12, .li-col-xs-13, .li-col-xs-14, .li-col-xs-15, .li-col-xs-16, .li-col-xs-17, .li-col-xs-18, .li-col-xs-19, .li-col-xs-20 {
      float: left;
      margin: 0;
      padding: 0 3px 0 0;
      font-size: 11px;
      color: #999;
    }
    .li-col-xs-20 {
      width: 100%;
    }
    .li-col-xs-19 {
      width: 95%;
    }
    .li-col-xs-18 {
      width: 90%;
    }
    .li-col-xs-17 {
      width: 85%;
    }
    .li-col-xs-16 {
      width: 80%;
    }
    .li-col-xs-15 {
      width: 75%;
    }
    .li-col-xs-14 {
      width: 70%;
    }
    .li-col-xs-13 {
      width: 65%;
    }
    .li-col-xs-12 {
      width: 60%;
    }
    .li-col-xs-11 {
      width: 55%;
    }
    .li-col-xs-10 {
      width: 50%;
    }
    .li-col-xs-9 {
      width: 45%;
    }
    .li-col-xs-8 {
      width: 40%;
    }
    .li-col-xs-7 {
      width: 35%;
    }
    .li-col-xs-6 {
      width: 30%;
    }
    .li-col-xs-5 {
      width: 25%;
    }
    .li-col-xs-4 {
      width: 20%;
    }
    .li-col-xs-3 {
      width: 15%;
    }
    .li-col-xs-2 {
      width: 10%;
    }
    .li-col-xs-1 {
      width: 5%;
    }
}


/*-----------------------------------
*LIST & NONE different :
* - list use when button not used, just text list
-----------------------------------*/

@media (min-width: 1200px) {
    .modalbox-lg {
        min-width: 400px;
        width: 700px;
    }
    
    .modalbox-lg-xl {
        min-width: 400px;
        width: 700px;
    }

    .li-num-lg {
        width: 3%;
        height: auto;
        margin: 0;
        text-align: right;
        padding-right: 5px;
        float: left;
    }

    .li-content-lg {
        float: left;
        width: 92%;
        margin: 0;
        padding: 0 5px;
        border-left: 2px solid #eee;
        border-right: 2px solid #eee;
    }

    .li-num-lg-list {
        width: 4%;
        height: auto;
        margin: 0;
        text-align: right;
        padding-right: 5px;
        float: left;
    }

    .li-content-lg-list {
        float: left;
        width: 95%;
        margin: 0;
        padding: 0 5px;
        border-left: 2px solid #eee;
        /*border-right: 2px solid #eee;*/
    }

    .li-content-lg-list-btn {
        float: left;
        width: 92%;
        margin: 0;
        padding: 0 5px;
        border-left: 2px solid #eee;
        border-right: 2px solid #eee;
    }

    .li-btn-lg {
        width: 5%;
        height: auto;
        margin: 0;
        padding: 0;
        text-align: center;
        float: left;
    }

    .col4-li-num-lg {
        width: 4%;
        height: auto;
        margin: 0;
        text-align: right;
        padding-right: 5px;
        float: left;
    }

    .col4-li-img-lg {
        width: 12%;
        height: auto;
        margin: 0;
        text-align: center;
        padding-right: 5px;
        float: left;
    }

    .col4-li-content-lg {
        float: left;
        width: 78%;
        margin: 0;
        padding: 0 5px;
        border-left: 2px solid #eee;
        border-right: 2px solid #eee;
    }

    .col4-li-btn-lg {
        width: 6%;
        height: auto;
        margin: 0;
        padding: 0;
        text-align: center;
        float: left;
    }
    
    .li-col-lg-1, .li-col-lg-2, .li-col-lg-3, .li-col-lg-4, .li-col-lg-5, .li-col-lg-6, .li-col-lg-7, .li-col-lg-8, .li-col-lg-9, .li-col-lg-10, 
    .li-col-lg-11, .li-col-lg-12, .li-col-lg-13, .li-col-lg-14, .li-col-lg-15, .li-col-lg-16, .li-col-lg-17, .li-col-lg-18, .li-col-lg-19, 
    .li-col-lg-20, .li-col-lg-21, .li-col-lg-22, .li-col-lg-23, .li-col-lg-24, .li-col-lg-25, .li-col-lg-26, .li-col-lg-27, .li-col-lg-28, 
    .li-col-lg-29, .li-col-lg-30 {
      float: left;
      margin: 0;
      padding: 0 3px 0 0;
      font-size: 11px;
      color: #999;
    }
    .li-col-lg-30 {
      width: 100%;
    }
    .li-col-lg-29 {
      width: 96.3333333%;
    }
    .li-col-lg-28 {
      width: 93.3333333%;
    }
    .li-col-lg-27 {
      width: 90%;
    }
    .li-col-lg-26 {
      width: 86.3333333%;
    }
    .li-col-lg-25 {
      width: 83.3333333%;
    }
    .li-col-lg-24 {
      width: 80%;
    }
    .li-col-lg-23 {
      width: 76.3333333%;
    }
    .li-col-lg-22 {
      width: 73.3333333%;
    }
    .li-col-lg-21 {
      width: 70%;
    }
    .li-col-lg-20 {
      width: 66.3333333%;
    }
    .li-col-lg-19 {
      width: 63.3333333%;
    }
    .li-col-lg-18 {
      width: 60%;
    }
    .li-col-lg-17 {
      width: 56.3333333%;
    }
    .li-col-lg-16 {
      width: 53.3333333%;
    }
    .li-col-lg-15 {
      width: 50%;
    }
    .li-col-lg-14 {
      width: 46.3333333%;
    }
    .li-col-lg-13 {
      width: 43.3333333%;
    }
    .li-col-lg-12 {
      width: 40%;
    }
    .li-col-lg-11 {
      width: 36.3333333%;
    }
    .li-col-lg-10 {
      width: 33.3333333%;
    }
    .li-col-lg-9 {
      width: 30%;
    }
    .li-col-lg-8 {
      width: 26.3333333%;
    }
    .li-col-lg-7 {
      width: 23.3333333%;
    }
    .li-col-lg-6 {
      width: 20%;
    }
    .li-col-lg-5 {
      width: 16.3333333%;
    }
    .li-col-lg-4 {
      width: 13.3333333%;
    }
    .li-col-lg-3 {
      width: 10%;
    }
    .li-col-lg-2 {
      width: 6.3333333%;
    }
    .li-col-lg-1 {
      width: 3.3333333%;
    }
}




.text-judul-detail {
    color: #888;
    font-size: 16px;
    font-weight: normal;
}

.text-cont-detail {
    color: #555;
    font-size: 16px;
    font-weight: bold;
}

.navbar-nav > .user-menu > .dropdown-menu > li.user-header {
    height: auto;
    min-height: 175px;
}

.lbox {
    margin: 30px auto;
    width: 350px;
    border-top-left-radius: 10px; 
    border-top-right-radius: 12px;
}

.lbox-head {
    background: rgb(169,3,41); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(169,3,41,1) 0%, rgba(143,2,34,1) 44%, rgba(109,0,25,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019',GradientType=0 );
    
    /*height: 40px;*/
    padding: 10px 20px;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

.lbox-head h2 {
    color: #fff;
    font-weight: 600;
    margin: 0px;
    text-shadow: 1px 2px 1px #ccc;
}

.lbox-body {
    background: rgb(169,3,41); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(169,3,41,1) 0%, rgba(143,2,34,1) 44%, rgba(109,0,25,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019',GradientType=0 );
    
    padding: 10px 20px;
}

.lbox-foot {
    background: rgb(169,3,41); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(169,3,41,1) 0%, rgba(143,2,34,1) 44%, rgba(109,0,25,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019',GradientType=0 );
    
    padding: 10px 20px;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    border-top: 1px solid #555;
}

.home-title-blue, .home-title-green, .home-title-yellow, 
.home-title-red, .home-title-gray, .home-title-white,
.home-title-black {    
    font-size: 20px;
    font-weight: 600;
    text-shadow: -1px 0px 1px #ccc;
}

.home-title-blue {color: #00A3CB;}
.home-title-green {color: #00C556;}
.home-title-yellow {color: #ff9900;}
.home-title-red {color: red;}
.home-title-gray {color: #898989;}
.home-title-white {color: #fff;}
.home-title-black {color: #333;}

.home-back {
    background: #f5feff;
}

.li-num {
    width: 3%;
    height: auto;
    margin: 0;
    text-align: right;
    padding-right: 5px;
    float: left;
}

.li-content {
    float: left;
    width: 97%;
    margin: 0;
    padding: 0 5px;
    border-left: 2px solid #eee;
}

.small-head {
    margin-right: 30px;
    font-size: 12px;
    color: #999;
    font-weight: normal;
    float: left;
}

.small-body {
    margin-right: 15px;
    font-size: 12px;
    color: #999;
    font-weight: normal;
    float: left;
}

.li-data-head {
    margin-left: 8px;
    color: #777;
    font-weight: bold;
    font-size: 14px;
}

.li-data-body {
    margin-left: 3px;
    color: #777;
    font-weight: bold;
    font-size: 12px;
}

.addfoto {
    background: #eee;
    float: left;
    width: 100%;
    margin: 5px 0;
    padding: 10px;
    box-sizing: border-box;
}

.addfoto-head {
    /*background: #ccc;*/
    font-weight: 600;
    color: #333;
    text-shadow: -1px -1px 1px #aaa;
    padding-bottom: 10px;
}

input[type="file"] {
    font-size: 12px;
    cursor: pointer;
}

.imgcont {
    margin: 7px auto 4px;
    text-align: center;
    line-height: 12px;
}

.imgbtn {
    margin: 3px auto;
    text-align: center;
}

.dispfoto {
    width: auto;
    max-width: 300px;
}

.note-star {
    font-size: 16px;
    font-weight: 600;
    color: red;
    display: inline;
}

.text-comment {
    margin: 0 10px; 
    background-color: #fff; 
    box-sizing: border-box; 
    padding: 8px 20px; 
    border-radius: 6px;
    text-align: justify;
    color: #555;
}

#hgrevpub, #hgnewpub, #hgvispub {
    min-height: 100px;
}

.widget-user-header-eko {
    padding: 0;
    margin: 0;
    height: 120px;
    width: 100%;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}

.backprofimg {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

.small-font {
    font-size: 10px;
}

.box-contoh {
    background-color: #dcf2ff; /*#3498DB; #1ABC9C;*/
    color: #444;
    font-size: 14px;
    width: 100%;
    padding: 7px;
    border-radius: 4px;
    /*box-shadow: 2px 2px 8px #aaa;*/
    color: #555;
    font-size: 14px;
}

.box-contoh span a {
    font-weight: bold;
    font-size: 15px;
    color: #1200ca;
}

.box-contoh span a:hover {
    color: #0099ee;
}

.viewpc {
    color: #00AAFF;
    font-weight: bold;
}

.viewpc:hover, .viewpc:focus {
    color: blue;
    cursor: pointer;
}

.font-checkmark {
    text-align: center; 
    color: #00c907; 
    font-size: 16px;
}



/* ========== styling radio button =========== */
/* The container */
.container {
    display: block;
    position: relative;
    /*padding-left: 20px;
    margin-bottom: 10px;*/
    /*padding: 0;
    margin: 0;*/
    cursor: pointer;
    font-size: 12px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    width: 100%;
}

/* Hide the browser's default radio button */
.container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.container .label-custom-radio {
    display: block;
    margin-top: -8px;
    margin-left: 17px;
    font-weight: bold;
    font-size: 12px;
}

/* Create a custom radio button */
.checkmark {
    position: absolute;
    top: -9px;
    left: 5px;
    height: 20px;
    width: 20px;
    background-color: #eee;
    border-radius: 50%;
    border: 1px solid #999;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
    background-color: #aaa;
}

/* When the radio button is checked, add a blue background */
.container input:checked ~ .checkmark {
    background-color: #fff;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the indicator (dot/circle) when checked */
.container input:checked ~ .checkmark:after {
    display: block;
}

/* Style the indicator (dot/circle) */
.container .checkmark:after {
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #29e300;
}





.img-name {
    color: #888;
    font-size: 10px;
    font-weight: normal;
}

.tb-info {
    margin: 0;
    width: 100%;
}

.tb-info tbody tr td {
    padding: 4px 6px;
    font-size: 16px;
    color: #555;
    font-weight: bold;
}

.bg-dark-red {
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#a90329+0,8f0222+44,6d0019+100;Brown+Red+3D */
    background: #a90329; /* Old browsers */
    background: -moz-linear-gradient(top,  #a90329 0%, #8f0222 44%, #6d0019 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  #a90329 0%,#8f0222 44%,#6d0019 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  #a90329 0%,#8f0222 44%,#6d0019 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019',GradientType=0 ); /* IE6-9 */
}




.tb-list-info {
    margin: 0px 0;
    width: 100%; 
    background: #fff;
    font-size: 14px;
}

.tb-list-info thead tr th {
    padding: 2px;
    background-color: #f5f5f5;
    border: 1px solid #fff;
    color: #aaa;
    font-weight: bold;
    text-align: center;
    vertical-align: middle;
}

.tb-list-info tbody tr td {
    padding: 2px 6px;
    /*border-bottom: 1px solid #ddd;*/
    border: 1px solid #fff;
    text-align: left;
    text-transform: none;
    color: #555;
    font-weight: normal;
}

.tb-list-info tfoot {
    border: 1px solid #fff;
    background-color: #f5f5f5;
    font-size: 14px;
}

.tb-list-info tfoot tr td {
    padding: 2px 6px;
    text-align: left;
    text-transform: none;
    color: #555;
}

.tb-list-info tfoot tr td p {
    padding: 4px 6px;
    text-align: left;
    color: #555;
    background-color: #fff;
    border-radius: 4px;
}

.tb-list-info tbody tr:nth-child(odd) td {
    background-color: #fdf7d4;
}



.reportba a {
    color: black;
    font-size: 16px;
    font-weight: 600;
    text-shadow: -1px 0px 1px #ccc;
}

.reportba a:hover {
    color: #fff;
}



.bgbidan {
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f78e42+0,f77a27+50,e05e02+100 */
    background: #f78e42; /* Old browsers */
    background: -moz-linear-gradient(top,  #f78e42 0%, #f77a27 50%, #e05e02 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  #f78e42 0%,#f77a27 50%,#e05e02 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  #f78e42 0%,#f77a27 50%,#e05e02 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f78e42', endColorstr='#e05e02',GradientType=0 ); /* IE6-9 */
}

.bgorange {
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffaf4b+0,ff920a+100;Orange+3D+%231 */
    background: #ffaf4b; /* Old browsers */
    background: -moz-linear-gradient(top,  #ffaf4b 0%, #ff920a 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  #ffaf4b 0%,#ff920a 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  #ffaf4b 0%,#ff920a 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffaf4b', endColorstr='#ff920a',GradientType=0 ); /* IE6-9 */
}

.bggray-grad {
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#e5e5e5+0,f7f7f7+100 */
    background: #e5e5e5; /* Old browsers */
    background: -moz-linear-gradient(top,  #e5e5e5 0%, #f7f7f7 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  #e5e5e5 0%,#f7f7f7 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  #e5e5e5 0%,#f7f7f7 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e5e5e5', endColorstr='#f7f7f7',GradientType=0 ); /* IE6-9 */
}

.bg-lime-gradient {
   /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#30e596+0,00d660+100 */
    background: #30e596; /* Old browsers */
    background: -moz-linear-gradient(top,  #30e596 0%, #00d660 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  #30e596 0%,#00d660 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  #30e596 0%,#00d660 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#30e596', endColorstr='#00d660',GradientType=0 ); /* IE6-9 */
}

.bggreen-soft {
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#38edc9+1,00d8b8+100 */
    background: #38edc9; /* Old browsers */
    background: -moz-linear-gradient(top,  #38edc9 1%, #00d8b8 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  #38edc9 1%,#00d8b8 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  #38edc9 1%,#00d8b8 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#38edc9', endColorstr='#00d8b8',GradientType=0 ); /* IE6-9 */
}

.bgmodal-gray {
    background: #777;
    color: #aaa;
}


/*carousel display*/
.imgphoto {
    cursor: pointer;
    margin: 0 auto;
}

.bgukai {background: #b7e6ff;}
.bgukttk {background: #ffbb87;}

.bgcont-ukai {background: #B7E6FF;}
.bgcont-ukttk {background: #B7E6FF;}
.bgcont-bidan {background: #ffe9ce;}
.bgcont-ners {background: #ddffed;}

.kop-head1, .kop-head2 {
    font-weight: bold; 
    font-size: 24px;
    color: #fff;
    text-shadow: 0 1px 1px #aaa;
}

.kop-note {
    font-weight: normal; 
    font-size: 16px;
    color: #fff;
    /*text-shadow: 0 1px 1px #aaa;*/
}

pre {
    white-space: -moz-pre-wrap; /* Mozilla, supported since 1999 */
    white-space: -pre-wrap; /* Opera */
    white-space: -o-pre-wrap; /* Opera */
    white-space: pre-wrap; /* CSS3 - Text module (Candidate Recommendation) http://www.w3.org/TR/css3-text/#white-space */
    word-wrap: break-word; /* IE 5.5+ */
}

.bgDarkRed {
    background: rgb(169,3,41); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(169,3,41,1) 0%, rgba(143,2,34,1) 44%, rgba(109,0,25,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(169,3,41,1) 0%,rgba(143,2,34,1) 44%,rgba(109,0,25,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019',GradientType=0 );
}