table{
    white-space: nowrap;
}

.content {
    min-height:250px;
    padding:8px;
    margin-right:auto;
    margin-left:auto;
    padding-left:10px;
    padding-right:10px;
}

.box {
    position:relative;
    border-radius:1px;
    background:#ffffff;
    border-top:2px solid #d2d6de;
    margin-bottom:10px;
    width:100%;
    box-shadow:0 0px 0px rgba(0,0,0,0.1)
}

.box-header {
    color:#444;
    display:block;
    padding:10px;
    position:relative
}
.box-body {
    border-top-left-radius:0;
    border-top-right-radius:0;
    border-bottom-right-radius:3px;
    border-bottom-left-radius:3px;
    padding:10px
}

@media (max-width:767px) {
    .fixed .content-wrapper,.fixed .right-side, .main-sidebar {
        padding-top:55px;
    }
    .modal{
        margin-right: 2px;
    }
}

.btn-full{
    width: 100%;
}

/* Center the loader */
#group-button{
    display: none;    
}

#base-loader {
  position: fixed;
  width:100%;
  height:100%;
  display: none;
  background-color: black;
  z-index:9999;
  opacity:0.3;
}

#text-loader {
  position: absolute;
  left: 40%;
  top: 50%;
  color: white;
  font-weight: bold;
  
}

#spin-loader {
  position: absolute;
  left: 45%;
  top: 40%;
  z-index: 1;
  width: 150px;
  height: 150px;
  margin: -75px 0 0 -75px;
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

#loader {
  position: absolute;
  left: 58%;
  top: 50%;
  z-index: 1;
  width: 150px;
  height: 150px;
  margin: -75px 0 0 -75px;
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
  display: none;
}

#loader2 {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: 150px;
  height: 150px;
  margin: -75px 0 0 -75px;
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
  display: none;
}

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

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

/* Add animation to "page content" */
.animate-bottom {
  position: relative;
  -webkit-animation-name: animatebottom;
  -webkit-animation-duration: 1s;
  animation-name: animatebottom;
  animation-duration: 1s
}

@-webkit-keyframes animatebottom {
  from { bottom:-100px; opacity:0 } 
  to { bottom:0px; opacity:1 }
}

@keyframes animatebottom { 
  from{ bottom:-100px; opacity:0 } 
  to{ bottom:0; opacity:1 }
}

.nowrap{
    white-space:nowrap;
}

.my-report-box-header{
    font-weight: bolder;
    font-size: 16pt;
    padding: 2px;
    background-color: white;
    color: #004080;
    border-bottom: 1px solid #004080;
    margin-bottom: 10px;
    
}

.my-report-box-footer{
    font-weight: bolder;
    font-size: 16pt;
    padding: 2px;
    background-color: white;
    color: #004080;
    border-top: 1px solid #004080;
    margin-bottom: 10px;
    
}

.my-report-box{
    font-weight: bolder;
    font-size: 16pt;
    padding: 2px;
    background-color: white;
    color: #004080;
    margin-bottom: 10px;
    border-radius: 10px;
    -moz-border-radius:10px;
    -o-border-radius:10px;
    -webkit-border-radius:10px;
    border: 2px solid #004080;
    
}

.report-detail{
    font-weight: normal;
    font-size: 14pt;
    padding: 0px;
    margin-left: 0px;
    list-style: none;
    color: #004080;
}

.report-detail li i{
    font-weight: bold;
    color: #FF8040;
}

.report-detail-2{
    margin-top: 10px;
    padding: 10px;
    font-weight: bold;
    font-size: 20pt;
    color: #004080;
    text-align: center;
}

.report-detail-3{
    padding: 2px;
    font-weight: bold;
    font-size: 10pt;
    color: #004080;
    text-align: center;
}

.report-detail-2 sup{
    font-size: 10pt;
    font-weight: bold;
    float: left;
    color: #FF8000;
}

.report-customer{
    margin-top: 5px;
}

.my-box-circle{
    border: 2px solid #004080;
    vertical-align: middle;
    height: 50px;
    width:100%;
    background-color: #004080;
    color: white;
    border-radius: 3px;
    -moz-border-radius:3px;
    -o-border-radius:3px;
    -webkit-border-radius:3px;
    float: right;
    padding-top: 4px;
}

.my-box-circle-yesterday{
    border: 2px solid #FF8080;
    vertical-align: middle;
    height: 50px;
    width:100%;
    background-color: #FF8080;
    color: white;
    border-radius: 3px;
    -moz-border-radius:3px;
    -o-border-radius:3px;
    -webkit-border-radius:3px;
    float: right;
    padding-top: 4px;
}

.my-box-circle-po{
    border: 2px solid #FF8000;
    height: 50px;
    width:100%;
    background-color: #FF8000;
    color: white;
    border-radius: 5px;
    -moz-border-radius:5px;
    -o-border-radius:5px;
    -webkit-border-radius:5px;
    float: right;
    padding-top: 4px;
}

.my-box-circle-doc{
    border: 2px solid #0080FF;
    height: 50px;
    width:100%;
    background-color: #0080FF;
    color: white;
    border-radius: 5px;
    -moz-border-radius:5px;
    -o-border-radius:5px;
    -webkit-border-radius:5px;
    float: right;
    padding-top: 4px;
}

.my-box-img{
    width: 72%;
     border-radius: 15px;
    -moz-border-radius:15px;
    -o-border-radius:15px;
    -webkit-border-radius:15px;
    overflow: hidden;
}

.my-box-img-2{
    width: 100%;
     border-radius: 15px;
    -moz-border-radius:15px;
    -o-border-radius:15px;
    -webkit-border-radius:15px;
    overflow: hidden;
}

.comment-box{
    padding: 5px;
    display: none;
    border-radius: 2px;
    -moz-border-radius:2px;
    -o-border-radius:2px;
    -webkit-border-radius:2px;
    margin-top: 2px;
    width: 100%;
    border:1px solid silver;
    font-size: 8pt;
}


.table-modification{
    font-size: 14pt;
}

.table-td-title{
    font-size: 16pt;
    color: #0080FF;
    font-weight: bold;
}

.table-my-box-circle{
    margin-top: 23px;
    text-align: center;
    font-weight: bold;
    font-size: 20pt;
    border: 2px solid #004080;
    vertical-align: middle;
    width:100%;
    background-color: #004080;
    color: white;
    border-radius: 3px;
    -moz-border-radius:3px;
    -o-border-radius:3px;
    -webkit-border-radius:3px;
    padding: 7px;
}

.table-my-box-circle-yesterday{
    margin-top: 23px;
    text-align: center;
    font-weight: bold;
    font-size: 20pt;
    border: 2px solid #FF8080;
    vertical-align: middle;
    width:100%;
    background-color: #FF8080;
    color: white;
    border-radius: 3px;
    -moz-border-radius:3px;
    -o-border-radius:3px;
    -webkit-border-radius:3px;
    padding: 7px;
}

.table-my-box-circle-po{
    margin-top: 23px;
    text-align: center;
    font-weight: bold;
    font-size: 20pt;
    border: 2px solid #FF8000;
    width:100%;
    background-color: #FF8000;
    color: white;
    border-radius: 5px;
    -moz-border-radius:5px;
    -o-border-radius:5px;
    -webkit-border-radius:5px;
    padding: 7px;
}

.table-my-box-circle-doc{
    margin-top: 23px;
    text-align: center;
    font-weight: bold;
    font-size: 20pt;
    border: 2px solid #0080FF;
    width:100%;
    background-color: #0080FF;
    color: white;
    border-radius: 5px;
    -moz-border-radius:5px;
    -o-border-radius:5px;
    -webkit-border-radius:5px;
    padding: 7px;
}

.tr-content{
    border-bottom: 1px solid gray;
}

input[type=checkbox].css-checkbox {
	position:absolute; z-index:-1000; left:-1000px; overflow: hidden; clip: rect(0 0 0 0); height:1px; width:1px; margin:-1px; padding:0; border:0;
}

input[type=checkbox].css-checkbox + label.css-label {
	padding-left:55px;
	height:50px; 
	display:inline-block;
	line-height:50px;
	background-repeat:no-repeat;
	background-position: 0 0;
	font-size:50px;
	vertical-align:middle;
	cursor:pointer;

}

input[type=checkbox].css-checkbox:checked + label.css-label {
	background-position: 0 -50px;
}

label.css-label {
	background-image:url('../image/csscheckbox.png');
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}


@media (max-width:767px) {
    .main-header .logo{
        display:none;
    }
    
    #spin-loader {
      left: 55%;
      top: 40%;
    }
    
    #text-loader {
      left: 32%;
      top: 50%;
    }
    
    .main-footer{
        font-size: 7pt;
        padding: 5px;
    }
    
}

@media (max-width:991px) {
.main-header .logo{
        display:none;
    }
    
     
    #spin-loader {
      left: 55%;
      top: 40%;
    }
    
    #text-loader {
      left: 50%;
      top: 50%;
      display:none;
    }
    
    .main-footer{
        font-size: 7pt;
        padding: 5px;
    }
}

.Uploadbtn{
  position: relative;
  overflow: hidden;
  padding:10px;
  text-transform: uppercase;
  color:#fff;
  background: #0080FF;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
   border-radius: 4px;
  width:50px;
  height: 50px;
  text-align:center;
  cursor: pointer;
}

.Uploadbtn .input-upload {
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
  padding: 0;
  opacity: 0;
  height:100%;
  width:100%;
}

.table-photo-preview{
    width: 50%;
    margin-left: 25%;
}

@media (max-width:901px) {

    .table-photo-preview{
        width: 99%;
        margin-left: 0%;
    }
}

.back-pt-logo-topi{
    background: url('/assets/image/logo-topi.png');
    background-size: 15%;
    background-repeat: no-repeat;
    background-position: center;
    
}

.back-pt-logo-srt{
    background: url('/assets/image/logo-srt.png');
    background-size: 15%;
    background-repeat: no-repeat;
    background-position: center;
    
}

.back-pt-logo-dpl{
    background: url('/assets/image/logo-dpl.png');
    background-size: 15%;
    background-repeat: no-repeat;
    background-position: center;
    
}

.sidebar .sidebar-menu .treeview-menu > li > a {
    padding: 5px 5px 5px 15px;
    display: block;
    font-size: 12px;
}
.main-footer{
    font-size: 8pt;
    padding: 5px;
}

.row-view-text .form-group{
    padding: 1px;
    margin-bottom: 5px;
    height: 0px;
}
.form-view-text{
    border:0px;
    border-bottom: 1px solid silver;
    border-collapse: collapse;
    padding:1px;
}