body { font-family: 'Roboto', sans-serif; font-weight: 400; }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: 'Roboto', sans-serif; font-weight: 700; }
.navbar-brand { font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif; }
.form-control-static { border:1px solid #d2d6de; background-color: #eee; filter: alpha(opacity=65); opacity: .65; padding: 6px 12px;}
.hr_only {margin:0px; height:1px;}
.display-none {display:none;} .resize-none {resize:none;}
.opacity_7 { opacity:0.7; } .opacity_7:hover { opacity:1; }
.col-half-offset{ margin-left:4.166666667% }
.login-logo small { font-size: 18px !important; } .login-logo { line-height: 35px !important; }
.login-box { margin: 3% auto; }
.page-title {border-bottom:1px solid lightgray; margin-top:14px; font-weight:bold; display:block; padding-bottom:7px;}

.bg-light .badge{background:#fff; color:#000;} .label-dark { background-color: #181C32; } .label-light, .bg-light { background-color: #777; }
.input-group-addon { background-color: #eee !important; }
.panel-info { color:#fff;}
.panel-info big{ font-weight: 600; }
.panel-info p { margin-bottom:0px; }
.break-all { word-break: break-all; }
@media (min-width: 768px) {
.sidebar-mini.sidebar-collapse .main-sidebar .panel-info{ display: none !important; -webkit-transform: translateZ(0); }
}
.alert-warning-custom { color: #8a6d3b; background-color: #fcf8e3; border-color: #faebcc; }
.alert-warning-custom hr { border-top-color: #f7e1b5; }
.alert-warning-custom .alert-link { color: #66512c; }
.alert-info-custom { color: #31708f; background-color: #d9edf7; border-color: #bce8f1; }
.alert-info-custom .alert-link { color: #245269; }
.alert { margin-bottom: 10px; padding: 10px; }
.alert-dismissible { padding-right: 35px; }

/* .navbar-nav > .tasks-menu > .dropdown-menu > li .menu > li > div { padding: 10px;} */
/* .navbar-nav > .tasks-menu > .dropdown-menu > li .menu > li > div > h3 { font-size: 14px; padding: 0; margin: 0 0 10px 0; color: #666666; } */
/* .navbar-nav > .tasks-menu > .dropdown-menu > li .menu > li > div > .progress { padding: 0; margin: 0; } */
/* .navbar-nav > .tasks-menu > .dropdown-menu > li .menu > li > div > h3 { font-size: 13px; margin: 0 0 8px 0; } */
/* .navbar-nav > .tasks-menu > .dropdown-menu > li .menu > li > div { white-space: nowrap; border-bottom: 1px solid #f4f4f4; } */
/* .navbar-nav > .tasks-menu > .dropdown-menu > li .menu > li > div:hover { background: #f4f4f4; text-decoration: none; } */

fieldset { margin-bottom:10px;}
fieldset legend { font-size:16px; margin-bottom:5px; font-weight:bold;}
.mycustom .data-box { display: block; width: 100%; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); margin-bottom: 15px; opacity:0.7;}
.mycustom .data-box:hover {opacity:1;}
.mycustom .data-box-number,
.mycustom a .data-box-text {background: #fff; border-radius: 5px; padding: 3px 10px; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);}
.mycustom .data-box-number {position:relative; display: block; font-weight: bold; font-size: 16px; color:#000; border-bottom:1px solid lightgray;}
.mycustom .data-box-number {border-bottom-right-radius:0px; border-bottom-left-radius:0px;}
.mycustom a .data-box-text {border-top-right-radius:0px; border-top-left-radius:0px;}
.mycustom .data-box-number .btn {position:absolute; right:0; color:gray; z-index:1001;}
.mycustom .data-box-number { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color:#000;}
.mycustom a .data-box-text {position:relative; display: block; }
.mycustom a .data-box-text span { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color:#000;}
.mycustom a .data-box-text .data-box-link {position:absolute; right:7px; font-weight:normal!important; padding:0px; margin:0px;}
.mycustom .data-box:hover .mycustom a .data-box-text .data-box-link i{font-weight:bold!important;}
.mycustom .data-box:hover .data-box-number .btn {display:inline-block!important;}

/* datatable */
div.dataTables_wrapper div.dataTables_paginate {float:none!important; text-align:center!important;}
div.dataTables_wrapper .text-right div.dataTables_paginate {float:right!important;}
/* div.dataTables_wrapper { width: 1400px; margin: 0 auto; } */
/* datatable plus-minus button */
.dt_search_input { font-weight:normal!important; width: 100%; padding: 6px 12px; font-size: 14px; line-height: 30px; color: #555; background-color: #fff; border: 1px solid #ccc; height: 30px; min-height: 32px; font-size: 13px; padding: 5px 10px; }
.dt_search_input:hover, .dt_search_input:active, .dt_search_input:focus { border-color: #3c8dbc; box-shadow: none; outline:none; }
div.dataTables_wrapper .disabled {cursor: not-allowed; background-color: #eee; opacity: 1;}

/* datatable plus-minus button */
td.details-control { background: url('../img/details_open.png') no-repeat center center; cursor: pointer; }
tr.shown td.details-control { background: url('../img/details_close.png') no-repeat center center; }
/* datatable header */
.table thead tr th {white-space: nowrap; overflow:hidden;}
/* table.dataTable tbody td { word-break: break-word; vertical-align: top; } */
/* .table-column-header{ white-space:nowrap; overflow:hidden; } */

.action_tab form {display:inline!important;}
.action_tab .btn {padding:3px 5px; }
.action_tab .btn i {width:16px; height:16px; text-align:center;}
/* datatable selected */
.table thead tr th {white-space: nowrap;}
.table tbody .selected td { background-color: #AAB7D1 !important;}
.table tbody .bg-white td {background:#ffffff;}
/* datatable colvish */
.dt-button-collection .dt-button.buttons-columnVisibility { background: none !important; background-color: transparent !important; box-shadow: none !important; border: none !important; padding: 0.25em 1em !important; margin: 0 !important; text-align: left !important; }
.dt-button-collection .buttons-columnVisibility:before, .dt-button-collection .buttons-columnVisibility.active span:before { display:block; position:absolute; top:1.2em; left:0; width:12px; height:12px; box-sizing:border-box; }
.dt-button-collection .buttons-columnVisibility:before { content:' '; margin-top:-8px; margin-left:10px; border:1px solid black; border-radius:3px; }
.dt-button-collection .buttons-columnVisibility.active span:before { font-family: 'Arial' !important; content:'\2714'; margin-top: -15px; margin-left: 12px; text-align: center; text-shadow: 1px 1px #fff, -1px -1px #fff, 1px -1px #fff, -1px 1px #fff; }
.dt-button-collection .buttons-columnVisibility span { margin-left:17px; }

/* inward */
.select_box { display: block; width: 100%; height: 34px; padding: 6px 12px; font-size: 14px; line-height: 1.42857143; color: #555; background-color: #fff; background-image: none; border: 1px solid #ccc; cursor:pointer; }
.select_box input { opacity: 0; }
.select_box span { font-weight:normal; }
.select_box:hover { border-color: #3c8dbc; box-shadow: none; outline:none; }

.form-group {position:relative;}
.red {color: #e32; font-size: x-large; position:absolute; top:-1px;}

/* outward */
.id_display_box {height:150px; overflow:auto; font-size:20px;}
#invalid {color:red;}
#new_ids {color:green;}

.summary-box h4 { border-bottom:1px solid #d5d5d5; }
.summary-box .summary-header, 
.summary-box .summary-detail-box  {margin-left:10px; padding:4px;}
.summary-box .summary-detail-box { max-height:200px; overflow-y:auto; overflow-x:hidden; border:1px solid #d5d5d5; background:#fff;}

.textarea {resize:none;}
.single-line {white-space:nowrap; display:inline-block;}

/* .attendance-box { display:inline-block; width:40px; height: 34px; padding: 6px 12px; font-size: 14px; line-height: 1.42857143; color: #555; background-color: #fff; border: 1px solid #d2d6de; border-radius: 4px; margin-right:4px; margin-bottom:4px; text-align:center; width:60px; } */
/* .my-calendar-box .today { background-color: #d9edf7; } */
/* .my-calendar-box .leave { background-color: #f2dede; border-color: #a94442; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); } */
/* .my-calendar-box .present { background-color: #dff0d8; border-color: #269abc; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); } */
/* .my-calendar-box { border:1px solid #d2d6de; display:inline-block; padding-top:4px; padding-left:4px; } */
/* .my-calendar-box .header { display:block; border:0px solid black; margin-bottom:5px; } */
/* .my-calendar-box .header ul { padding:0px; margin:0px; border:0px solid black;} */
/* .my-calendar-box .header li { display:inline; list-style:none; margin-right:4px; } */
/* .my-calendar-box .header li span { display:inline-block; line-height:34px; height:34px; width:60px; border:1px solid #d2d6de; text-align:center; } */

/* calendar */
table.my-calendar { border-left:1px solid #999; }
tr.my-calendar-row	{  }
td.my-calendar-day	{ min-height:50px; font-size:11px; position:relative; } * html div.my-calendar-day { height:50px; } td.my-calendar-day:hover { background:#eceff5; }
td.my-calendar-day-np { background:#eee; min-height:50px; } * html div.my-calendar-day-np { height:50px; }
td.my-calendar-day-head { background:#ccc; font-weight:bold; text-align:center; width:120px; padding:5px; border-bottom:1px solid #999; border-top:1px solid #999; border-right:1px solid #999; }
/* shared */
td.my-calendar-day, td.my-calendar-day-np {width:120px; padding:0px; border-bottom:1px solid #999; border-right:1px solid #999; }
/* td.my-calendar-day {position:relative;} */

table.my-calendar .day-box { position:relative; padding:0px; height:50px; cursor:pointer;}
table.my-calendar .day-box .day-number {text-align:center; display:inline!important; position:absolute; top:0; right:0; padding:3px 5px; color:#000; font-weight:bold; width:20px;}
td.my-calendar-day i {position:absolute; font-size:15px; left:4px; bottom:2px;}

table.gridtable{ width:100%; margin-bottom:1em; border-collapse: collapse; }
table.gridtable th{ font-weight:bold; background-color:#ddd; }
table.gridtable th, table.gridtable td{ padding:0.5em; border:1px solid #ccc; }

.timeline > li > .timeline-item > .timeline-header { font-weight :normal; font-size:small; }
.timeline > .time-label > span { font-weight: bold; font-size:12px; padding: 2px 4px; }

.products-list { list-style: none; margin: 0; padding: 0; }
.products-list > .item { border-radius: 3px; -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); padding: 10px 0; background: #fff; }
.products-list > .item:before,
.products-list > .item:after { content: " "; display: table; }
.products-list > .item:after { clear: both; }
.products-list .product-img { float: left; width: 50px; height: 50px; background:lightgray; color:gray;}
.products-list .product-img span { font-size:24px; padding:0px; margin:0px; line-height:0.8;}
.products-list .product-img small { font-size:13px; margin:0; white-space:nowrap;}

.products-list .product-img img { width: 50px; height: 50px; }
.products-list .product-info { margin-left: 60px;}
.products-list .product-title { font-weight: 600; }
.products-list .product-desc { display: block; color: #999; }
.product-list-in-box > .item { -webkit-box-shadow: none; box-shadow: none; border-radius: 0; border-bottom: 1px solid #f4f4f4; }
.product-list-in-box > .item:last-of-type { border-bottom-width: 0; }

.model_footer_center .modal-footer{
	text-align:center!important;
}
/* https://gist.github.com/kanakiyajay/15e4fc98248956614643 */
@media (min-width: 768px) {
  .seven-cols .col-md-1,
  .seven-cols .col-sm-1,
  .seven-cols .col-lg-1  {
    width: 100%;
  }
}

@media (min-width: 992px) {
  .seven-cols .col-md-1,
  .seven-cols .col-sm-1,
  .seven-cols .col-lg-1 {
    width: 14.285714285714285714285714285714%;
  }
}

@media (min-width: 1200px) {
  .seven-cols .col-md-1,
  .seven-cols .col-sm-1,
  .seven-cols .col-lg-1 {
    width: 14.285714285714285714285714285714%;
  }
}

.col-xs-8r,
.col-sm-8r,
.col-md-8r,
.col-lg-8r {
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}

.col-xs-8r {
    width: 12.5%;
    float: left;
}

@media (min-width: 768px) {
    .col-sm-8r {
        width: 12.5%;
        float: left;
    }
}

@media (min-width: 992px) {
    .col-md-8r {
        width: 12.5%;
        float: left;
    }
}

@media (min-width: 1200px) {
    .col-lg-8r {
        width: 12.5%;
        float: left;
    }
}