/* ------------------------------
Adjustment
------------------------------ */
.mg0 {margin: 0 !important;}
.mt0 {margin-top: 0 !important;}
.mb0 {margin-bottom: 0 !important;}
.ml0 {margin-left: 0 !important;}
.mr0 {margin-right: 0 !important;}

.mt5 {margin-top: 5px !important;}
.mb5 {margin-bottom: 5px !important;}
.ml5 {margin-left: 5px !important;}
.mr5 {margin-right: 5px !important;}

.mt10 {margin-top: 10px !important;}
.mb10 {margin-bottom: 10px !important;}
.ml10 {margin-left: 10px !important;}
.mr10 {margin-right: 10px !important;}

.mt15 {margin-top: 15px !important;}
.mb15 {margin-bottom: 15px !important;}
.ml15 {margin-left: 15px !important;}
.mr15 {margin-right: 15px !important;}

.mt20 {margin-top: 20px !important;}
.mb20 {margin-bottom: 20px !important;}
.ml20 {margin-left: 20px !important;}
.mr20 {margin-right: 20px !important;}

.mt30 {margin-top: 30px !important;}
.mb30 {margin-bottom: 30px !important;}
.ml30 {margin-left: 30px !important;}
.mr30 {margin-right: 30px !important;}

.pd0 {padding: 0 !important;}
.pt0 {padding-top: 0 !important;}
.pb0 {padding-bottom: 0 !important;}
.pl0 {padding-left: 0 !important;}
.pr0 {padding-right: 0 !important;}

.pt5 {padding-top: 5px !important;}
.pb5 {padding-bottom: 5px !important;}
.pl5 {padding-left: 5px !important;}
.pr5 {padding-right: 5px !important;}

.pt10 {padding-top: 10px !important;}
.pb10 {padding-bottom: 10px !important;}
.pl10 {padding-left: 10px !important;}
.pr10 {padding-right: 10px !important;}

.pt15 {padding-top: 15px !important;}
.pb15 {padding-bottom: 15px !important;}
.pl15 {padding-left: 15px !important;}
.pr15 {padding-right: 15px !important;}

.pt20 {padding-top: 20px !important;}
.pb20 {padding-bottom: 20px !important;}
.pl20 {padding-left: 20px !important;}
.pr20 {padding-right: 20px !important;}

.table-cell{
  display: table-cell;
  vertical-align: middle;
}
.fit-content {
  width: -moz-fit-content;
  width: -webkit-fit-content;
}

/* ------------------------------
Base Custom Style
------------------------------ */
.content{
  height: inherit;
}
.info-maintenance {
  border-top:solid 1px #ccc;
  border-bottom:solid 1px #ccc;
  text-align: center;
  padding: 30px 0;
  margin-bottom: 20px;
}
.navbar-status-text {
  font-size: 120%;
  padding: 15px 15px;
}
.btn-block {
  margin-bottom: 10px;
}
td .btn-block{
  margin-bottom: 5px;
}
.btn-block:last-child {
  margin-bottom: 0;
}
.table > thead > tr > th,
.table > tbody > tr > th,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > tbody > tr > td,
.table > tfoot > tr > td,
.table > tbody > tr > td label {
  vertical-align: middle;
}
body.modal-open {
  height: inherit;
}
.normalheader .dropdown-menu{
  /*top: 70%;*/
  margin-top: 0;
}
table a{
  color: #337ab7;
  text-decoration: underline;
}
a.label{
  text-decoration: none;
}
a.panel-heading {
  display: block;
}
.has-error.form-control{
  border-color: #ed4949!important;
  color: #ed4949;
}
.text-validate {
  color: #e74c3c;
  margin: 5px 0 0 0;
}
.text-validate:before {
  content: "\f071";
  font-family: 'FontAwesome';
  margin: 0 5px 0 0;
}
.aspNetDisabled {
  cursor: not-allowed;
  filter: alpha(opacity=65);
  -webkit-box-shadow: none;
  box-shadow: none;
  opacity: .65;
}

/*border- Color*/
.border-left-important {
  border-left: solid 5px #d9534f !important;
}
.border-left-unread{
  border-left: solid 5px #62cb31 !important;
}
.border-left-default {
  border-left: solid 5px #ddd !important;
}
@media screen and (max-width: 1200px) {
  .info .border-left-important + div {
    border-left: solid 5px #d9534f !important;
  }
  .info .border-left-unread + div {
    border-left: solid 5px #62cb31 !important;
  }
  .info .border-left-default + div {
    border-left: solid 5px #ddd !important;
  }
}

/*login,register,error,etc -common*/
.custom-login {
  background: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url(../images/footer.png);
  background-size:cover;
  background-repeat: no-repeat;
  background-position: bottom;
  background-attachment: fixed;
}
@media screen and (max-width:767px){
  .custom-login {
    background:none;
  }
  .custom-login::before {
    content:"";
    display:block;
    position:fixed;
    top:0;
    left:0;
    z-index:-1;
    width:100%;
    height:100vh;
    background: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url(../images/footer.png);
    background-size:cover;
    background-position: 100%, 65%;
  }
}

/* ------------------------------
Mypege Custom Style
------------------------------ */
.custom-mypage #wrapper {
  top: 61px;
  /*
  background-image: url(../../images/bg_mypage.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
  */
}

/*Menu -Common*/
.mobile-menu-info,
.mobile-menu-chat,
.mobile-menu-logout {
  position: relative;
  height: 55px;
  display: inline-block;
  color: #9d9fa2;
  font-size: 25px;
  padding: 15px 20px;
  line-height: 20px;
}
a.mobile-menu-info:hover,
a.mobile-menu-chat:hover,
a.mobile-menu-logout:hover {
  background-color: #f7f8fa;
  color: #9d9fa2;
}
.mobile-menu-button {
  float:right;
}
.label-menu-corner .label{
  right: 12px;
  top: 12px;
}
.mobile-navbar .navbar-nav>li,
.mobile-navbar .navbar-nav>li>a {
  height: 100%;
}
@media screen and (max-width: 380px) {
  /*iPhone5,SE Style*/
  .navbar-toggle {
    margin-right: 0;
  }
  .mobile-menu-button {
    right: 35px;
  }
  .mobile-menu-info,
  .mobile-menu-chat,
  .mobile-menu-logout {
    padding: 18px 10px;
    font-size: 22px;
  }
  .label-menu-corner .label {
    right: 0px !important;
  }
  .small-logo{
    font-size:12px;
  }
  .header-link{
    padding: 18px 20px 17px 20px;
  }
  .fixed-small-header.page-small .content {
    padding-top: 20px;
  }
  .fixed-small-header.page-small.show-sidebar .small-header {
    margin-left: 0px;
  }
  .fixed-small-header .small-header {
    position: static;
  }
}
@media screen and (min-width: 769px) {
  .mobile-menu {
    display: none;
  }
}

/*Form -Common*/
@media screen and (max-width: 768px) {
  .form-control {
    font-size: 16px!important;
  }
}
/*Form -Label*/
.input-group-label{
  font-size:14px;
  font-weight:bold;
  display: table-cell;
  vertical-align: middle;
  /*text-align:right;*/
  width: 1%;
  white-space: nowrap;
  padding-right:10px;
}
span.input-group-label + input.form-control,
span.input-group-label + textarea.form-control,
span.input-group-label + select.form-control{
  border-top-left-radius: 4px!important;
  border-bottom-left-radius: 4px!important;
}
.input-daterange span.input-group-label + input.form-control{
  border-top-right-radius: 0px!important;
  border-bottom-right-radius: 0px!important;
}
.input-daterange input.form-control + span.input-group-addon{
  border-left: none;
  border-right: none;
}
.input-daterange input.form-control + span.input-group-addon + input.form-control + span.input-group-addon{
  border-right: 1px solid;
}
/*Form -Radio,CheckBox*/
.radio-inline + .radio-inline,
.checkbox-inline + .checkbox-inline{
  margin-left: 0;
}
.radio-inline,
.checkbox-inline{
  margin-right: 10px;
}
.radiolist td{
  display: inline-block;
  position: relative;
  padding-right: 10px;
  padding-left: 20px;
  padding-bottom: 5px;
}
.radiolist.radio{
  padding-left: 0; 
}
.checkboxlist td{
  display: inline-block;
  position: relative;
  padding-right: 10px;
  padding-left: 20px;
  padding-bottom: 5px;
}
.checkboxlist.checkbox{
  padding-left: 0; 
}
.checkbox input[type="checkbox"]:focus + label::before,
.checkbox input[type="checkbox"]:checked + label::before,
.radio input[type="radio"]:focus + label::before,
.radio input[type="radio"]:checked + label::before{
  outline:none;
}
.input-group .radio-inline,
.input-group .checkbox-inline{
  padding-top: 3px;
}
/*Use in Table*/
.dataTables_scroll th .checkbox label::after,
.dataTables_scroll td .checkbox label::after{
  margin-left: -21px;
}
@media screen and (min-width: 768px){
  .dataTables_scroll th .checkbox,
  .dataTables_scroll td .checkbox,
  .dataTables_scroll th .radio,
  .dataTables_scroll td .radio{
    padding-left: 3px;
  }
}
th .checkbox, td .checkbox,
th .radio, td .radio{
  margin: 3px 0 0 3px;
}
th .checkbox label, td .checkbox label,
th .radio label, td .radio label{
  padding: 0;
}
/*Form -Datepicker*/
input[type="date"]::-webkit-inner-spin-button{
  -webkit-appearance: none;
}
input[type="date"]::-webkit-clear-button{
  -webkit-appearance: none;
}
/*From -Select*/
@media screen and (max-width: 768px){
  .form-inline .form-control {
    margin-bottom: 5px;
  }
  .form-inline .form-control:last-child {
    margin-bottom: 0;
  }
}
/*Form -DivConfirm*/
div.form-control {
  background-color: #eee;
  opacity: 1;
  height: 100%;
  min-height:34px;
}
span.input-group-label + div.form-control,
span.input-group-label + div.form-control + input.form-control{
  border-radius: 4px!important;
}
/*From -FileUpload*/
input[type="file"]{
  width:100%;
}

/*DataTable -Common*/
.dataTable {
  white-space:nowrap;
  word-break:keep-all;
}
div.dataTables_scrollHead table.table-bordered {
  border-bottom-width: 1px;
}
.dataTables_length{
  text-align:left!important;
}
.table-inline tbody tr{
  float:left;
  margin-left:10px;
}
table.table-inline{
  margin-left: -10px;
}
.table-inline label{
  margin-left:3px;
  font-weight:normal;
}
@media screen and (max-width:992px){
  div.dataTables_wrapper div.dataTables_paginate,
  div.dataTables_wrapper div.dataTables_info {
    text-align: center;
  }
}
/*DataTable -Column Bug Avoidance*/
#menu {
  z-index: 999;
  background-color: #fff;
}
body.page-small.show-sidebar #wrapper {
  margin-left: 0;
}
@media screen and (max-width:768px) {
  #wrapper {
    margin: 0;
  }
  #menu {
    border-right: 1px solid #eaeaea;
  }
}

/*Chat -Common*/
textarea{
  resize:none;
  height:50px;
}
.chat-users, .chat-discussion{
  height:auto;
}
i.chat-read{
  position: absolute;
  right: 10px;
  top: 5px;
}
i.chat-Delete{
  position: absolute;
  left: 10px;
  top: 5px;
}
.chat-discussion .chat-message.left .message {
  margin-right: 30%;
  margin-left: 0;
}
.chat-discussion .chat-message.right .message {
  margin-left: 30%;
  margin-right: 0;
}
.chat-date {
  width: 50%;
  padding: 5px;
  margin-top: 15px;
  margin-bottom: 15px;
  border: #6a6c6f solid 1px;
  text-align: center;
  border-radius: 15px;
}
.chat-discussion .chat-message.left .message:before {
  content: "";
	position: absolute;
	top: 25%;
  left: -20px;
	margin-top: -9px;
	display: block;
	width: 0px;
	height: 0px;
	border-style: solid;
	border-width: 0px 25px 20px 0;
	border-color: transparent #eee transparent transparent;
	z-index: 0;
}
.chat-discussion .chat-message.right .message:before {
  content: "";
	position: absolute;
	top: 25%;
  right: -20px;
	margin-top: -9px;
	display: block;
	width: 0px;
	height: 0px;
	border-style: solid;
	border-width: 0px 0 20px 25px;
	border-color: transparent transparent transparent #0074a9;
	z-index: 0;
}
.chat-message.right .chat-bg{
  background-color: #0074a9;
  color: #fff;
}
.chat-discussion .chat-message.right .message.delete:before {
	border-color: transparent transparent transparent #eee;
}
.chat-message.right .chat-bg.delete{
  text-align: center;
  background-color: #eee;
  color: #6a6c6f;
}
.chat-discussion .message {
  word-wrap: break-word;
  background-color: #eee;
}
.chat-users {
  margin-left:0;
  border-right:solid 1px #eaeaea;
}
.chat-discussion .chat-message.left .message.delete:before {
  border-color: transparent #eee transparent transparent;
}
.chat-discussion .chat-message.left .message.delete {
}
.chat-discussion .message.delete {
  background-color: #eee;
}
@media screen and (max-width:768px){
  .chat-discussion .chat-message.left .message {
    margin-right:10%;
  }
  .chat-discussion .chat-message.right .message {
    margin-left:10%;
  }
}

/*Task -Common*/
#right-sidebar .task{
  width: 500px!important;
  background-color:#ddd;
}
.bg-task{
  background-color:#fff;
}
.label-primary{
  background-color:#34495e;
  font-weight:normal;
}
.border-emergency{
  border-top:solid 5px #d9534f!important;
}
.border-important{
  border-top:solid 5px #e67e22!important;
}
.border-default{
  border-top:solid 5px #62cb31!important;
}
.border-low {
  border-top: solid 5px #3498db !important;
}
#right-sidebar .form-control{
  padding: 5px 5px;
  font-weight:normal;
}
@media screen and (max-width:768px){
  #right-sidebar{
    width: 100%!important;
  }
}

/*InformaitionList -Common*/
#notes .label{
  padding: 2px 8px 2px 8px;
  font-size: 11px;
  font-weight: normal;
}
#noteContaier .label{
  padding: 2px 8px 2px 8px;
  font-size: 11px;
  font-weight: normal;
}
#noteContaier{
  word-break: break-all;
}

/*MessageBox,ValidateMessage -Common*/
.successDiv .hpanel .panel-body{
  margin-bottom:20px;
  border: solid 2px #62cb31;
  color:#62cb31;
  background-color:#ddffcc;
}
.errorDiv .hpanel .panel-body{
  margin-bottom:20px;
  border: solid 2px #e74c3c;
  color:#e74c3c;
  background-color:#ffcccc;
}
.infoDiv .hpanel .panel-body{
  margin-bottom: 20px;
  border: solid 2px #2962FF;
  color: #2962FF;
  background-color: #aaeeff;
}
.warningDiv .hpanel .panel-body {
  margin-bottom: 20px;
  border: solid 2px #e67e22;
  color: #e67e22;
  background-color: #FFFFDD;
}

/*Slide -Common*/
.hover-slide-box{
  width:auto;
  display:inline-block;
  margin:0 20px;
  position:relative;
  padding: 0 10px;
}
.hover-slide-right {
  position: absolute;
  right: -20px;
  top: 7px;
  padding-right: 10px;
  transition-duration: 0.5s;
}
.hover-slide-left {
  position: absolute;
  left: -20px;
  top: 7px;
  padding-left: 10px;
  transition-duration: 0.5s;
}
.hover-slide-right:hover {
  right:-20px;
  padding-right:0;
  padding-left: 10px;
}
.hover-slide-left:hover {
  left:-20px;
  padding-right:10px;
  padding-left: 0;
}

/*GridSystem -Adjustment*/
@media screen and (max-width:1200px){
  .form-group div[class^="col-lg-"]:not(:first-child){
    margin-top:15px;
  }
  .form-group div[class^="col-lg-"]:not(:first-child).col-mt-sm{
    margin-top:10px;
  }
  .form-group div[class^="col-lg-"]:not(:first-child).col-mt-xs{
    margin-top:5px;
  }
}
@media screen and (max-width:992px){
  .form-group div[class^="col-md-"]:not(:first-child){
    margin-top:15px;
  }
  .form-group div[class^="col-md-"]:not(:first-child).col-mt-sm{
    margin-top:10px;
  }
  .form-group div[class^="col-md-"]:not(:first-child).col-mt-xs{
    margin-top:5px;
  }
}
@media screen and (max-width:768px){
  .form-group div[class^="col-sm-"]:not(:first-child){
    margin-top:15px;
  }
  .form-group div[class^="col-sm-"]:not(:first-child).col-mt-sm{
    margin-top:10px;
  }
  .form-group div[class^="col-sm-"]:not(:first-child).col-mt-xs{
    margin-top:5px;
  }
}