.pd0 {
  padding: 0 !important;
}
.mg0{
  margin: 0 !important;
}
.mg10{
  margin: 10px !important;
}
.mb0{
  margin-bottom: 0 !important;
}
.mt0{
  margin-top: 0 !important;
}
.mt10 {
  margin-top: 10px !important;
}

.ml10 {
  margin-left: 10px;
}

.mb10 {
  margin-bottom: 10px;
}

.mt15{
  margin-top: 15px !important;
}

.mr10{
  margin-right: 10px !important;
}

.mt25{
  margin-top: 25px !important;
}

.mr5 {
  margin-right: 5px;
}

.ml5 {
  margin-left: 5px;
}

.inline{
  display: inline;
}
.fw400{
  font-weight: 400 !important;
}
.fw600 {
  font-weight: 600 !important; }

.w100per {
  width: 100% !important;
}

.role-admin, .role-mod, .block-true, .block-false,
.pending, .undefined, .rejected, .approved {
  font-weight: 400;
}

.role-mod, .pending {
  color: #ff9800;
}
.undefined {
  color: #777;
}
.verified-false,
.block-true, .rejected {
  color: #f44336;
}

.verified-true,
.role-admin, .block-false, .approved {
  color: #4caf50;
}
.main-panel>.content{
  padding-top: 0 !important;
}

.mod-menu li {
  display: none !important;
}
.mod-menu li.mod-visible{
  display: block !important;
}

.table-responsive img {
  width: auto;
}
.btns .btn{
  margin: 0;
}


/* loading */
.spinner {
  text-align: center;
  display: block !important;
  padding: 0 !important;
  margin: 0 !important;
  width: auto;
}

.spinner > div {
  width: 14px;
  height: 14px;
  background-color: #908a8a;

  border-radius: 100%;
  display: inline-block;
  -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
  animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}

.spinner .bounce1 {
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}

.spinner .bounce2 {
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}

@-webkit-keyframes sk-bouncedelay {
  0%, 80%, 100% { -webkit-transform: scale(0) }
  40% { -webkit-transform: scale(1.0) }
}

@keyframes sk-bouncedelay {
  0%, 80%, 100% {
    -webkit-transform: scale(0);
    transform: scale(0);
  } 40% {
      -webkit-transform: scale(1.0);
      transform: scale(1.0);
    }
}


/**/
.table>thead>tr>th{
  font-size: 14px !important;
  font-weight: 400;
}
.login-page .alert-box {
  margin-top: 25px;
  margin-bottom: -15px;
}
.sidebar .logo a.logo-mini{
  width: auto;
}
span.user-email{
  text-transform: lowercase;
}


/* vue modal */
.modal-mask {
  position: fixed;
  z-index: 9998;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .5);
  display: table;
  transition: opacity .3s ease;
}
.modal-wrapper {
  display: table-cell;
  vertical-align: middle;
}
.modal-container {
  width: 800px;
  max-width: 90%;
  margin: 0 auto;
  padding: 15px;
  background-color: #fff;
  border-radius: 2px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .33);
  transition: all .3s ease;
}
.modal-header h3 {
  margin-top: 0;
  color: #42b983;
}
.modal-body {
  margin: 0 0 20px;
  padding: 0;
  overflow: scroll;
  height: 300px;
}
.modal-default-button {
  float: right;
}
.modal-enter {
  opacity: 0;
}
.modal-leave-active {
  opacity: 0;
}
.modal-enter .modal-container,
.modal-leave-active .modal-container {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}
.modal-header{
  padding: 0 0 10px 0;
  font-weight: 400;
}
.modal-footer{
  padding: 10px 0 0 0;
}
.modal-footer button{
  margin: 0 !important;
}

.custom-vuetable-style{
  margin-top: 20px;
}
.custom-vuetable-style table{
  background: #fff;
  border: 2px solid #E5E5E5 !important;
  transition: background-color 0.2s linear;
  margin-bottom: 20px;
  color: #333;
}
.custom-vuetable-style .pagination{
  margin-top: 20px !important;
}
.vue-dropzone{
  padding: 0!important;
  min-height: 130px;
}
.vue-dropzone .dz-preview .dz-progress .dz-upload {
  background: #42bcd4 !important;
}
.vue-dropzone .dz-preview .dz-success-mark, .vue-dropzone .dz-preview .dz-error-mark{
  top: 23%;
}
.vue-dropzone .dz-preview .dz-image img:not([src]) {
  width: 100px;
  height: 100px;
}
.ui.table td{
  padding: 5px !important;
}

.images-list{
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
}
.image-item {
  width: calc(100% / 8);
  padding: 5px;
  cursor: pointer;
}
.image-wrap {
  background: #f3f3f3;
  border: 1px solid #eaeaea;
  padding: 3px;
  /* height: 100%; */
  text-align: center;
  display: flex;
  justify-content: center;
  transition: opacity .3s ease;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
}
.image-wrap img.img-responsive {
  align-self: center;
}
.image-item:hover .image-wrap,
.image-item.active .image-wrap{
  border: 1px solid #42bcd4;
  background: #42bcd4;
  transition: opacity .3s ease;
}

.list-item {
  display: inline-block;
}
.list-enter-active, .list-leave-active {
  transition: all 1s;
}
.list-enter, .list-leave-to /* .list-leave-active below version 2.1.8 */ {
  opacity: 0;
  transform: translateX(-30px);
}

.custom-nav-panel {
  border-bottom: 3px solid #00bcd4;
  display: inline-block;
  position: relative;
  width: 100%;
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.14);
  color: rgba(0, 0, 0, 0.87);
  background: #fff;
}

.custom-nav-panel button {
  margin: 0;
  padding: 8px 20px;
  margin: 4px;
}

.custom-nav {
  width: 80%;
  float: left;
}

.custom-nav>li {
  float: left;
}

.custom-nav-panel, .custom-nav>li>a {
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}

.custom-nav>li.active>a, .custom-nav>li.active>a:focus, .custom-nav>li.active>a:hover {
  background-color: #00bcd4;
  color: #FFFFFF;
  font-weight: bold;
}

.subsubsub {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  font-size: 13px;
  color: #666;
}

.subsubsub li {
  display: inline-block;
  margin: 0;
  padding: 0;
  white-space: nowrap;
}

.subsubsub a {
  font-weight: 400;
  margin: 10px;
  text-decoration: none;
  border-bottom: 1px dotted;
}

.subsubsub a .count {
  color: #555d66;
  font-weight: 400;
}

.order-details {
  margin: 15px;
}

.order-details img{
  width: auto;
}

.order-details .order-user-avatar {
  float: left;
}

.order-details .order-user-meta {
  float: left;
  padding-left: 10px;
}

.order-details .order-data {
  text-align: right;
  float: right;
}

/* Comment Box */
.detailBox {
  width:320px;
  border:1px solid #bbb;
  z-index: 9999;
  position: fixed;;
  bottom:0;
  right: 30px;
  background-color: #FFF;
  border-radius: 5px 5px 0px 0px;
}
.titleBox {
  background-color: #4080fe;
  padding: 5px 10px;
  border-radius: 5px 5px 0px 0px;
}
.titleBox label{
  color: #FFF;
  margin:0;
  display:inline-block;
  font-weight: bold;
}

.commentBox {
  padding:5px;
  border-top:1px dotted #bbb;
}
.commentBox .form-group:first-child, .actionBox .form-group:first-child {
    width:100%;
}
.commentBox .form-group:nth-child(2), .actionBox .form-group:nth-child(2) {
    width:18%;
}
.actionBox .form-group * {
    width:100%;
}
.taskDescription {
    margin-top:10px 0;
}
.commentList {
    padding:0;
    list-style:none;
    max-height:200px;
    min-height: 200px;
    overflow:auto;
}
.commentList li {
    margin:0;
    margin-top:10px;
}
.commentList li > div {
    display:table-cell;
}
.commenterImage {
    width:30px;
    margin-right:5px;
    height:100%;
    float:left;
}
.commenterImage img {
    width:100%;
    border-radius:50%;
}
.commentText p {
    margin:0;
}
.sub-text {
    color:#aaa;
    font-family:verdana;
    font-size:11px;
}
.actionBox {
    border-top:1px dotted #bbb;
    padding:10px;
}

.section-name, .quiz-question {
  border: none;
  outline: none;
  box-shadow: none;
  font-size: 18px;
  color: #888;
  font-weight: 400;
  width: 70%;
  height: 25px;
}

.lesson-name:focus, .answer-name:focus,
.section-name:focus, .quiz-question:focus {
  color: #555;
}

.lesson-name, .answer-name {
  color: #888;
  border: none;
  box-shadow: none;
  outline: none;
  font-size: 15px;
  font-weight: 400;
  width: 70%;
  vertical-align: middle;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  margin-left: 10px;
  background-color: transparent;
}

.section-head:hover .section-actions, .quiz-head:hover .quiz-actions {
  visibility: visible;
}

.lesson:hover .lesson-actions, .answer:hover .answer-actions {
  visibility: visible;
}

.lesson:hover {
  background-color: #f9f9f9;
}

.section-actions, .lesson-actions, .quiz-actions, .answer-actions {
  float: right;
  visibility: hidden;
}

.section-action, .lesson-action, .quiz-action, .answer-action {
  margin-right: 10px;
}

/* Model Select Lessons */
.lessons-select .lesson-title {
  font-size: 16px;
  line-height: 1.5;
  margin-left: 5px;
  color: #777;
}

.lessons-select .modal-footer {
  text-align: left;
}

.lessons-select .modal-footer button {
  margin-right: 10px !important;
}

.lessons-select .modal-body .lessons-box {
  margin-left: 10px;
  margin-top: 10px;
}

.lesson-checkbox input{
  height: 16px;
  width: 16px;
}

.lessons-select .modal-body .lesson-search {
  font-size: 16px;
}

.lesson-icon ul {
  list-style: none;
  display: inline-block;
  padding: 0;
  margin: 0;
  /* display: none; */
}
.lesson-icon li {
  white-space: nowrap;
  float: left;
  height: 24px;
  padding: 0 5px;
}
.lesson-icon:hover ul {
  display: block;
}
.lesson-icon i {
  cursor: pointer;
  color: #0085ba;
}

.answer-isCorrect {
  margin-right: 10px;
}

.footer-section {
  padding: 0 30px;
  position: fixed;
  right: 0px;
  left: 220px;
  width: auto;
  z-index: 9997;
  bottom: 0;
  background: #fff;
  text-align: center;
  border-top: 1px solid #ccc;
}

@media only screen and (max-width: 991px) {
  .footer-section {
    right: 0px;
    left: 0px;
  }
}


/** Table */
.table a:hover {
  text-decoration: none;
}
.table tr:hover .table-actions {
  visibility: visible;
}

.table-actions {
  margin: 5px 0px;
  display: block;
  visibility: hidden;
  font-size: 13px;
}

.table.table-valign-middle td, table td * {
  vertical-align: middle !important;
}

.table tr td {
  vertical-align: top !important;
}

.dive .check {
  z-index: 0 !important;
}

input.disabled {
  background-image: none !important;
  background-color: #f7f7f7 !important;
  border-bottom: 1px dotted #D2D2D2 !important;
  cursor: not-allowed;
}

.btn-edit-slug i {
  font-size: 18px;
  margin-left: 5px;
  color: #9c27b0;
}

/* comment page */
.comment-box {
  background-color: #fff;
}
.comment-container {
  border-right: 1px solid rgba(0, 0, 0, .10);
}
.comment-filter {
  padding: 0 10px;
  border-bottom: 1px solid rgba(0, 0, 0, .10);
}

.comment-list {
  height: calc(100vh - 210px);
  overflow-y: scroll;
}
.comment-item {
  margin: 0;
  padding: 10px;
}
.comment-item:hover {
  background:#ebebeb;
}
.reply-item:hover .actions,
.comment-item:hover .actions, .show {
  display: block;
}

.actions {
  font-size: 16px;
  display: none;
  cursor: pointer;
}
.comment-active{
  background:#ebebeb
}

.comment-info {
  height:50px;
  clear:both;
  position: relative;
}

.reply-info {
  clear: both;
}

.reply-item {
  height:50px;
  clear:both;
  position: relative;
}

.reply-item:hover .avatar-overlay {
  display: flex;
}
.comment-content, .reply-content {
  float: left;
  width: calc(100% - 59px)
}
.comment-content p{
  font-size:14px;
  color:#989898;
  margin:auto;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.avatar-overlay {
  height: 50px;
  width: 50px;
  border-radius: 50%;
  position: absolute;
  background-color: rgb(0,0,0,0.5);
  z-index: 999;
  align-items: center;
  justify-content: center;
  display: none;
}
.avatar-overlay i {
  font-size: 18px;
  color: #d8d8d8;
}
.comment-item:hover .avatar-overlay {
  display: flex;
}
.user-avatar img {
  height: 50px;
  width: 50px;
  border-radius: 50%;
  margin-right: 9px;
}

.user-fullname {
  font-size:14px;
  color: #000;
  margin:0 0 8px 0;
}

.comment-heading {
  border-bottom: 1px solid rgba(0, 0, 0, .10);
  height: 108px;
  padding: 10px 0 10px 0;
}

.reply-item {
  padding-right: 15px;
}
.reply-item:first-child {
  margin-top: 15px;
}
.reply-user-avatar {
  display: inline-block;
  width: 6%;
}
.reply-content {
  padding: 10px;
  margin-bottom: 20px;
  background-color: #f2f3f5;
  border-radius: 10px;
  line-height: 18px;
  max-width: 100%;
  word-wrap: break-word;
  white-space: normal;
  word-break: break-word;
}
/* .reply-content .content{
  background: #ebebeb none repeat scroll 0 0;
  border-radius: 10px;
  color: #646464;
  font-size: 14px;
  margin: 0;
  padding: 5px 10px 5px 12px;
  width: 100%;
} */
.time_date {
  color: #747474;
  font-size: 12px;
}
.reply-form {
  border-top: 1px solid #c4c4c4;
  position: relative;
}
.reply-form #text {
  height: 65px;
  padding-top: 10px;
  width: 100%;
  border: none;
  resize: none;
}
.msg_send_btn {
  background: #05728f none repeat scroll 0 0;
  border: medium none;
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  font-size: 17px;
  height: 33px;
  position: absolute;
  right: 15px;
  top: 20px;
  width: 33px;
}
.reply-list {
  height: calc(100vh - 284px);
  overflow-y: auto;
}

.no-resolve {
  font-weight: 700;
}

.cursor-pointer {
  cursor: pointer;
}
.unpublished p, .unpublished span {
  text-decoration: line-through;
}
.deleted p, .deleted span{
  color: red;
  text-decoration: none;
}

.review-star i {
  color: #dedfe0
}
.review-star i.checked {
  color: orange;
}

.static-checkbox input[type=checkbox] {
  position: relative;
  cursor: pointer;
}
.static-checkbox input[type=checkbox]:before {
  content: "";
  display: block;
  position: absolute;
  width: 16px;
  height: 16px;
  top: 0;
  left: 0;
  border: 2px solid #555555;
  border-radius: 3px;
  background-color: white;
}
.static-checkbox input[type=checkbox]:checked:after {
  content: "";
  display: block;
  width: 5px;
  height: 10px;
  border: solid black;
  border-width: 0 2px 2px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  position: absolute;
  top: 2px;
  left: 6px;
}

/* custom sidebar */
.sidebar {
  width: 220px;
}

.sidebar .sidebar-wrapper {
  width: 220px;
}

/* .main-panel {
  width: calc(100% - 220px);
} */

.sidebar .nav li:first-child>a {
  margin: 0 10px;
}

.sidebar .nav li>a {
  margin: 10px 10px 0;
}

.sidebar .nav i {
  margin-right: 10px;
}

.sidebar .nav .caret {
  right: 5px;
}

.sidebar .nav .sidebar-mini {
  margin-right: 10px !important;
}

.link-input {
  min-height: 40px;
  display: block;
  padding: 8px 15px;
  border-radius: 5px;
  border: 1px solid #e8e8e8;
  background: #fff;
  width: 100%;
}

[v-cloak] {
  display: none;
}

.sub-menu-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 0px 5px 5px;
}

.sub-menu-container:hover {
  background-color: #f5f5f5;
}

.sub-menu-content {
  display: flex;
  justify-content: space-between;
  width: 80%;
}

.sub-menu-content input {
  width: 50%;
}

.sub-menu-actions .btn-delete {
  margin-right: 10px;
}