@charset "UTF-8";

/* user agent sty;esheet reset */
table {
  font-size:100%;
}

form {
  margin-bottom: 0;
}




/* header */
#header {
}
#header-top {
  padding: 8px 0 0 0;
  background-color: #fff;
  /* border-top: 8px solid #111; */
}
#header-top .nav-user {
  margin: 5px 0;
}
#header-top .nav-menu {
  margin: 5px 0;
}

#header-top .nav-user:before {
  margin-right: 5px;
  content: "\f007";
  font-family: FontAwesome;
}
#header-top .header-top-menu {
  margin-bottom: 0;
  list-style: none;
}
#header-top .header-top-menu li {
  display: inline-block;
  margin-left: 1em;
}
#header-top .header-top-menu a:hover {
  text-decoration: none;
}
#header .nav-password:before {
  margin-right: 5px;
  content: "\f023";
  font-family: FontAwesome;
}
#header .nav-login:before {
  margin-right: 5px;
  content: "\f090";
  font-family: FontAwesome;
}
#header .nav-logout:before {
  margin-right: 5px;
  content: "\f08b";
  font-family: FontAwesome;
}
@media (max-width: 767px) {
  #header-top {
    padding: 10px 0 0;
  }
  #header-top .nav-user {
    margin: 15px -15px 0;
    padding: 10px 15px;
    color: #fff;
    background-color: #607d8b;
  }
  .navbar-toggle .navbar-toggle-text {
    display: block;
    font-size: 10px;
  }
}


/* global navigation */
#g-nav span,
#g-nav a {
  display: block;
  color: #fff;
  line-height: 20px;
}
#g-nav a {
  padding: 15px 20px;
}
#g-nav a:hover {
  background-color: #1a252f;
}
#g-nav a:before {
  margin-right: 7px;
  font-family: FontAwesome;
}
#g-nav .nav-org:before {
  content: "\f0c0";
}
#g-nav .nav-user:before {
  content: "\f007";
}
#g-nav .nav-title {
  padding: 15px 0;
  font-weight: bold;
}
@media (min-width: 768px) {
  #g-nav {
    height: 50px;
  }
  #g-nav ul {
    border-left: 1px solid rgba(255,255,255,.75);
  }
  #g-nav ul li {
    width: 160px;
    text-align: center;
    border-right: 1px solid rgba(255,255,255,.75);
  }
  #g-nav ul li:last-child a:after {
    content: none;
  }
}
@media (max-width: 767px) {
  #g-nav {
    width: 100%;
    padding: 0;
    position: absolute;
    left: 0;
    top: 80px;
    z-index: 10000;
  }
  #g-nav .navbar-nav {
    margin: 15px 0;
  }
  #g-nav ul li + li {
    border-top: 1px solid rgba(255,255,255,.75);
  }
  #g-nav ul li a {
    padding: 12px 10px;
  }
  #g-nav ul li a:after {
    content: "\f105";
    font-family: FontAwesome;
    margin: auto;
    position: absolute;
    right: 15px;
    top: auto;
    bottom: auto;
  }
  #g-nav .nav-btn {
    margin: 10px 0;
  }
  #g-nav .nav-btn:last-child {
    margin-bottom: 15px;
  }
  #g-nav .nav-btn a {
    padding: 10px;
    color: #607d8b;
    background-color: #fff;
    border: 1px solid #fff;
    border-radius: 3px;
    text-align: center;
  }
}


/* main */
#main {
  display: block;
  padding-bottom: 70px;
  position: relative;
}
.bs-docs-section {
  margin-bottom: 30px;
}

/* sidebar */
#sidebar a {
  text-decoration: underline;
}
@media (max-width: 767px) {
  #sidebar {
    margin-top: 30px;
  }
}

/* footer */
#footer {
  margin: 0;
  padding: 0;
  color: #fff;
  background-color: #607d8b;
  position: relative;
}
#footer a {
  color: #fff;
}
#f-nav ul {
  margin: 0;
}
.copyright {
  padding: 10px;
  font-size: 75%;
  text-align: center;
  background: #111;
}
@media (min-width: 768px) {
  #f-nav {
    padding: 15px 0;
  }
  #f-nav li {
    padding: 0 1em;
    line-height: 1;
    border-left: 1px solid #fff;
  }
  #f-nav li:first-child {
    border-left: none;
  }
}
@media (max-width: 767px) {
  #f-nav {
    margin: 0 -15px;
  }
  #f-nav li {
    display: block;
    padding: 0;
    text-align: left;
    border-bottom: 1px solid rgba(255,255,255,.5);
  }
  #f-nav li:last-child {
    border-bottom: none;
  }
  #f-nav li a {
    display: block;
    padding: 10px 20px;
  }
  #f-nav li a:after {
    content: "\f105";
    font-family: FontAwesome;
    margin: auto;
    position: absolute;
    right: 15px;
    top: auto;
    bottom: auto;
  }
}


/* page top button */
#page-top {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 100;
}
#page-top a {
  display: block;
  width: 50px;
  height: 50px;
  padding-top: 13px;
  color: #fff;
  font-size: 20px;
  font-weight: bold;
  line-height: 1;
  text-decoration: none;
  text-align: center;
  border-radius: 50%;
  background-color: #607d8b;
  opacity: 0.9;
}
#page-top a:hover {
  text-decoration: none;
  background-color: #1a252f;
}
@media (max-width: 767px) {
  #page-top {
    right: 10px;
    bottom: 10px;
  }
}

/* button */
.btn {
  min-width: 150px;
  position: relative;
}
.btn-sm {
  min-width: 135px;
}
.btn.btn-table {
	min-width : 0 !important;
}
.table .btn-sm:not(.arrow-r) {
  min-width: 155px;
  padding-left: 35px !important;
  padding-right: 10px !important;
  text-align: left;
}
.btn:before {
  font-family: FontAwesome;
  margin: auto;
  position: absolute;
  top: auto;
  bottom: auto;
}
.btn.initial {
  min-width: 0 !important;
  padding-left: 12px !important;
  padding-right: 12px !important;
  position: static;
}
.btn.initial:before {
  content: none !important;
}
.btn.arrow-l {
  padding-left: 25px;
  padding-right: 20px;
}
.btn.arrow-l:before {
  content: "\f105";
  left: 12px;
}
.btn.arrow-r {
  padding-left: 20px;
  padding-right: 25px;
}
.btn.arrow-r:before {
  content: "\f105";
  right: 12px;
}
.btn.back {
  padding-left: 25px;
  padding-right: 20px;
  background-color: #666;
  border-color: #666;
}
.btn.back:before {
  content: "\f104";
  left: 12px;
}
.btn.back:hover {
  background-color: #777;
  border-color: #777;
}
.btn.search {
  padding-left: 25px;
  padding-right: 20px;
}
.btn.search:before {
  content: "\f002";
  left: 12px;
}
.btn.add {
  padding-left: 30px;
  padding-right: 25px;
}
.btn.add:before {
  content: "\f067";
  left: 12px;
}
.btn.user {
  padding-left: 30px;
  padding-right: 25px;
}
.btn.user:before {
  content: "\f007";
  left: 12px;
}
.btn.user-add {
  padding-left: 30px;
  padding-right: 25px;
}
.btn.user-add:before {
  content: "\f234";
  left: 12px;
}
.btn.edit {
  padding-left: 30px;
  padding-right: 25px;
}
.btn.edit:before {
  content: "\f044";
  left: 12px;
}
.btn.login {
  padding-left: 25px;
  padding-right: 20px;
}
.btn.login:before {
  content: "\f090";
  left: 12px;
}
.btn.logout {
  padding-left: 25px;
  padding-right: 20px;
}
.btn.logout:before {
  content: "\f08b";
  left: 12px;
}
.btn.remove {
  padding-left: 25px;
  padding-right: 20px;
}
.btn.remove:before {
  content: "\f127";
  left: 12px;
}
.btn.delete {
  padding-left: 30px;
  padding-right: 25px;
  background-color: #666;
  border-color: #666;
}
.btn.delete:hover {
  background-color: #777;
  border-color: #777;
}
.btn.delete:before {
  content: "\f1f8";
  left: 12px;
}
.btn.doc {
  padding-left: 30px;
  padding-right: 25px;
}
.btn.doc:before {
  content: "\f15c";
  left: 12px;
}
.btn.cancel {
  background-color: #666;
  border-color: #666;
}
.btn.cancel:hover {
  background-color: #777;
  border-color: #777;
}
.btn.upload {
  padding-left: 30px;
  padding-right: 25px;
}
.btn.btn-link.upload {
  padding-right: 5px;
}
.btn.upload:before {
  content: "\f093";
  left: 12px;
}
.btn.download {
  padding-left: 30px;
  padding-right: 25px;
}
.btn.btn-link.download {
  padding-right: 5px;
}
.btn.download:before {
  content: "\f019";
  left: 12px;
}
.btn.list {
  padding-left: 35px;
  padding-right: 20px;
}
.btn.list:before {
  content: "\f00b";
  left: 12px;
}

.btn-primary.bottom {
  margin-bottom: 7px;
}
.btn-center {
  margin-left: 0 !important;
  margin-right: 0 !important;
  text-align: center;
}
.btn-center .btn {
  margin: 5px 3px;
}
@media (max-width: 767px) {
  .btn:not(.btn-sm):not(.btn-link) {
    min-width: 190px;
  }
}

.btn.contents-xs{
	min-width: 20px;
}

tr.expire>td {
	background-color: #dcdcdc;
}
.messagetable.infomark{
	width : 10%;
}

.messagetable.infomark>span {
	font-size: 90%;
}

.messagetable.date{
	width : 30%;
}

.messagetable.message {

	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 0;
	white-space: nowrap;
	width : 40%;

}

.messagetable.operation{
	width : 20%;
}

.messageform.orderNo {
	width : 3em;
}

.messageform.date {
	width : 10em;
}

.messageform.message {
	width : 30em;
	height: 15em;
}

.modal-header.edit {
	padding-bottom : 0px;
}
#modal-form-message {
	white-space : pre-line;
}

.contentsMessage.edit  th {
	padding : 0.5em;
}

.messageform.alert{
	margin-top: 10px;
}
.dialog-operation {
	float: left;
}

.button-area {
	position:relative;
	height :15px;
	z-index : 10;
}

.modal-title.page-title {
	top : -10px;
}
button.close {
	width : 20px;
	height: 20px;
}

/* large label */
.label-lg {
  display: inline-block;
  min-width: 8em;
  line-height: 1;
  color: #fff;
  padding: 8px 1em;
  font-size: 100%;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: 2px;
}
.label-learner {
  background-color: #f39c12;
}
.label-instructor {
  background-color: #128f76;
}
.label-administrator {
  background-color: #e74c3c;
}

.label-contentmanager {
  background-color: rgb(52, 152, 219);
}

.label-status-01 {
  background-color: #8bc4ea;
}
.label-status-02 {
  background-color: #3498db;
}
.label-status-03 {
  background-color: #999;
}
.label-lg + .txt-status {
  display: inline-block;
  min-width: 6em;
  text-align: left;
}

/* list */
ol.arrow-l li,
ul.arrow-l li {
  margin-bottom: 5px;
  padding-left: 7px;
}
ol.arrow-l li:before,
ul.arrow-l li:before {
  content: "\f0da";
  color: #607d8b;
  font-family: FontAwesome;
  position: relative;
  left: -7px;
}

/* icon */
.fa-external-link {
  padding-left: 7px;
}

/* title */
.page-title {
  position: relative;
  margin-top: 0;
  margin-bottom: .7em;
  padding-bottom: .3em;
  border-bottom: 4px solid #ccc;

}
.page-title:after {
  position: absolute;
  bottom: -4px;
  left: 0;
  z-index: 2;
  content: '';
  width: 20%;
  height: 4px;
  background-color: #607d8b;
}
.section-title {
  margin-bottom: .7em;
  padding-left: 10px;
  border-left: 4px solid #607d8b;
}
.well .section-title {
  margin-top: 0;
}
@media (max-width: 767px) {
  .page-title {
    border-bottom-witdh: 3px;
  }
  .page-title:after {
    bottom: -3px;
    height: 3px;
  }
  .section-title {
    border-left-width: 3px;
  }
}

/* book box */
.book-box .thumbnail {
  max-width: 200px;
  margin-left: auto;
  margin-right: auto;
}
.book-box h3 {
  margin-top: 0;
}
@media (min-width: 768px) {
  .book-box .thumbnail {
    margin-bottom: 0;
  }
}
@media (max-width: 767px) {
  .book-box .book-box-btn {
    margin-bottom: 0;
    text-align: center;
  }
  .book-box .btn {
    margin-left: auto;
    margin-right: auto;
  }
}


/* form layout */
form .text-danger.small {
  margin: 5px 0;
}
.form-control.half {
  width: 50% !important;
}
select.form-control {
  max-width: 100%;
  width: initial !important;
}
.form-narrow .form-group {
  margin-bottom: 5px;
}





@media (min-width: 768px) {
  .form-control.middle {
    width: 50%;
  }
}
@media (max-width: 767px) {
  .form-sort .btn-group {
    width: 100%;
  }
  .form-sort .btn-group + .btn-group {
    margin-top: 5px;
  }
  .form-sort .btn-group .btn {
    width: 100%;
  }
}

.form-control.short-text {
	display : inline-block;
	width : 10em;
}

/* table layout */
.table thead th {
  white-space: nowrap;
}
.table-bordered tbody th {
  background-color: #f5f5f5;
}
.table-striped tbody th {
  background-color: transparent;
}
.th-no {
  width: 60px;
}
.th-select {
  width: 60px;
}
.th-date {
  min-width: 10em;
}
.th-id {
  width: 25%;
}

/* smp list talbe */
.table-xs-list th {
  text-align: center;
}
.table-xs-list td .list-inline {
  margin: 0;
}
@media (max-width: 767px) {
  .table-xs-list {
    border: none !important;
  }
  .table-xs-list thead {
    display: none;
  }
  .table-xs-list tr {
    display:block;
    margin: 0 -15px;
    padding: 7px 0;
    border-bottom: 1px solid #ddd;
  }
  .table-xs-list tr:first-child {
    border-top: 1px solid #ddd !important;
  }
  /*.table-xs-list th {
    display: block;
    width: 100%;
    padding: 7px 15px 7px 9em !important;
    text-align: left !important;
    border: none !important;
    position: relative;
  }
  .table-xs-list th::before {
    content: attr(data-label);
    width: 7em;
    margin-right: 1em;
    font-weight: bold;
    position: absolute;
    left: 15px;
  }
  .table-xs-list td {
    display: block;
    width: 100%;
    min-height:35px;
    padding: 7px 15px 7px 9em !important;
    text-align: left !important;
    border: none !important;
    position: relative;
  }
  .table-xs-list td::before {
    content: attr(data-label);
    width: 7em;
    margin-right: 1em;
    font-weight: bold;
    position: absolute;
    left: 15px;
  }*/
  .table-xs-list th,
  .table-xs-list td {
    display: table;
    width: 100%;
    min-height:35px;
    padding: 7px 15px;
    text-align: left !important;
    border: none !important;
  }
  .table-xs-list th::before,
  .table-xs-list td::before {
    content: attr(data-label);
    width: 10em;
    min-width: 10em;
    padding: 7px 15px;
    font-weight: bold;
    display: table-cell;
    vertical-align: top;
  }
  .table-xs-list .cell-inr {
    padding: 7px 15px 7px 0;
    display: table-cell;
    vertical-align: top;
  }
}

/* pagination container */
.pagination-wrap .pull-left {
  margin: 0 0 24px;
}
.pagination-wrap .pull-right {
  margin: 0 0 24px;
}
@media (max-width: 767px) {
  .pagination-wrap .pull-left {
    margin: 0 0 12px;
  }
  .pagination-wrap .pull-right {
    margin: 0 0 12px;
  }
}

/* step bar */
.step-bar {
  position: relative;
  list-style: none;
  margin-bottom: 35px;
  padding: 0;
  font-weight: bold;
  text-align: center;
  width: 100%;
  overflow: hidden;
  *zoom: 1;
}
.step-bar .step {
  position: relative;
  float: left;
  display: inline-block;
  line-height: 40px;
  padding: 0 20px 0 5px;
  background-color: #ddd;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.step-bar .step:before, .step-bar .step:after {
  position: absolute;
  left: -7px;
  display: block;
  content: '';
  background-color: #ddd;
  border-left: 3px solid #FFF;
  width: 20px;
  height: 20px;
}
.step-bar .step:after {
  top: 0;
  -moz-transform: skew(30deg);
  -ms-transform: skew(30deg);
  -webkit-transform: skew(30deg);
  transform: skew(30deg);
}
.step-bar .step:before {
  bottom: 0;
  -moz-transform: skew(-30deg);
  -ms-transform: skew(-30deg);
  -webkit-transform: skew(-30deg);
  transform: skew(-30deg);
}
.step-bar .step:first-child {
  -moz-border-radius-topleft: 4px;
  -webkit-border-top-left-radius: 4px;
  border-top-left-radius: 4px;
  -moz-border-radius-bottomleft: 4px;
  -webkit-border-bottom-left-radius: 4px;
  border-bottom-left-radius: 4px;
}
.step-bar .step:first-child:before, .step-bar .step:first-child:after {
  content: none;
}
.step-bar .step:last-child {
  -moz-border-radius-topright: 4px;
  -webkit-border-top-right-radius: 4px;
  border-top-right-radius: 4px;
  -moz-border-radius-bottomright: 4px;
  -webkit-border-bottom-right-radius: 4px;
  border-bottom-right-radius: 4px;
}
.step-bar .step.current {
  color: #FFF;
  background-color: #607d8b;
}
.step-bar .step.current:before, .step-bar .step.current:after {
  background-color: #607d8b;
}
.step-bar.step-2 .step {
  width: 50%;
}
.step-bar.step-3 .step {
  width: 33.333%;
}
.step-bar.step-4 .step {
  width: 25%;
}
.step-bar.step-5 .step {
  width: 20%;
}
@media (max-width: 767px) {
  .step-bar {
    margin-bottom: 25px;
  }
}

/* information list */
.info-list {
  margin: 20px 0;
}
.info-list dl {
  margin: 0 0 15px;
  padding: 0 0 15px;
  border-bottom: 1px solid #ddd;
}
.info-list dl:last-child {
  border-bottom: none;
}
.info-list dl dt,
.info-list dl dd {
  padding: 0;
}
.info-list dl dd a {
  text-decoration: underline;
}
@media (max-width: 767px) {
  .info-list dl dt {
    margin-bottom: 5px;
  }
}

/* information detail */
.info-title {
  padding-bottom: .3em;
  border-bottom: 3px solid #ddd;
}
.info-detail-content {
  padding-top: 10px;
  padding-bottom: 30px;
}
.info-detail-content > *:first-child {
  margin-top: 0;
}
.info-detail-content h3 {
  margin-top: 1em;
  margin-bottom: 1em;
  padding: .5em 10px;
  background-color: #efefef;
  border-left: 4px solid #607d8b;
}
.info-detail-content h4 {
  margin-top: 1em;
  margin-bottom: .7em;
  padding: 0 0 .3em 5px;
  border-bottom: 1px solid #ddd;
}
.info-detail-content img {
  max-width: 100%;
  height: auto;
  margin: 2% 0;
}
.info-detail-content img.img-md {
  max-width: 48%;
}


/* accordion */
.panel-acco {
}
.panel-acco .panel-heading {
  padding: 0;
}
.panel-acco .panel-heading a {
  display: block;
  padding: 10px 15px 10px 30px;
  position: relative;
}
.panel-acco .panel-heading a:before {
  margin: auto;
  content: "\f056";
  font-family: FontAwesome;
  position: absolute;
  top: auto;
  bottom: auto;
  left: 10px;
}
.panel-acco .panel-heading.collapsed a:before {
  content: "\f055";
}

.card-acco {
}
.card-acco .card-header {
  padding: 0;
}
.card-acco .card-header a {
  display: block;
  padding: 10px 15px 10px 30px;
  position: relative;
}
.card-acco .card-header a:before {
  margin: auto;
  content: "\f056";
  font-family: FontAwesome;
  position: absolute;
  top: auto;
  bottom: auto;
  left: 10px;
}
.card-acco .card-header.collapsed a:before {
  content: "\f055";
}

/* searchForm */
.control-label {
	white-space: nowrap;
}


/* other */

@media (min-width: 768px) {
  .box-md {
    width: 50%;
  }
}

.centering {
  display: table;
  width: 100%;
}
.centering .centering-inr {
  display: table-cell;
  width: 100%;
  height: 100%;
  vertical-align: middle;
}

.underline {
  text-decoration: underline;
}

@media (max-width: 767px) {
  .text-center-xs {
    text-align: center !important;
    float: none !important;
  }
}
tr.user-status-ng {
	background-color: #d0d0d9 !important;
}

.nowrap {
	white-space : nowrap;
}

td.accountLock> div::after{
	content: "\f023";
	margin-left : 1em;
	color : #ff0000;
	font-size : 1.1em;
	font-family: FontAwesome;
}