.navbar .navbar-brand-wrapper {background-color: #ffffff;border-bottom: 1px solid #ddd;}
.modal-fullscreen-xl {
  padding: 0 !important;
}
.modal-fullscreen-xl .modal-dialog {
  width: 100%;
  max-width: none;
  height: 100%;
  margin: 0;
}
.modal-fullscreen-xl .modal-content {
  height: 100%;
  border: 0;
  border-radius: 0;
}
.modal-fullscreen-xl .modal-body {
  overflow-y: auto;
}
.modal-fullscreen-xl .modal-control-button {position: fixed;z-index: 1051;padding: 0;background-color: transparent;border: 0;
    -webkit-appearance: none;}
.modal-fullscreen-xl .modal-control-button span {color: #00c292!important;font-size: 2rem!important;}
.modal-fullscreen-xl .close {left:15px;top:15px;}
.modal-fullscreen-xl .zoomIn {left:80px;top:15px;}
.modal-fullscreen-xl .zoomOut {left:140px;top:15px;}

.form-check-label {cursor: pointer;display: inline-block!important;}
.form-check-label .form-control {position: relative!important;opacity: 1!important}
.question-radio .input-helper:before {top: 8px!important}
.question-radio .input-helper:after {top: 14px!important}
.removeChoice, .removeExercise {position: absolute;right: 3px;top: 5px}
.exerciseAudio {height: 23px;}
.exerciseContent * {font-size: 18px!important;}
.question-label, .form-check-label {font-size: 18px!important}
.nav-pills .nav-link.active, .nav-pills .show > .nav-link {color: #fff!important;background-color: #00c292!important;}
.nav-pills .nav-link {background: 0 0;border: solid 1px #EBEBEB;border-radius: 30px!important;}
.user-select-none {
    -webkit-user-select: none!important;
    -moz-user-select: none!important;
    user-select: none!important;
}
.avatar {border: 1px solid #ccc;box-shadow: 1px 1px 6px 0px #c2c2c2;object-fit: cover;object-position: center;cursor: pointer;padding: 3px;}
.avatar, .avatar-blank {
  box-shadow: 1px 1px 6px 0 #c2c2c2;
  object-fit: cover;
  object-position: center;
}
.avatar-blank {
  width: 70px;
  height: 70px;
  border: 1px solid #00c292;
  box-shadow: 1px 1px 6px 0px #c2c2c2;
  object-fit: cover;
  object-position: center;
  border-radius: 50%;
  background: #eea034;
  background: -webkit-linear-gradient(left, #03a9f3 0%, #00c292 100%);
  background: linear-gradient(to right, #03a9f3 0%, #00c292 100%);
  color: #e8e8e8;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  font-size: 30px;
  font-family: "Quicksand", sans-serif;
}
.uploadAvatar {
  width: 25px;
  height: 25px;
  top: 6px;
  left: 85%;
  transform: translateX(-50%);
  background: #fff;
  margin: 0;
  padding: 0 5px;
  border-radius: 50%;
  cursor: pointer;
  border: 1px solid #d2d4d3;
  font-size: 13px;
}
#account-detail .avatar {
  width: 110px;
  height: 110px;
}
.dragBox {
  /*display: grid;
  grid-template-columns: repeat(6, max-content);
  gap: 10px;*/
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.dragBox .box {
  margin-right: 10px;
  margin-bottom: 10px;
}
.dragBox .box:last-child {
  margin-right: 0;
}


@media (max-width: 768px) {
  /*.dragBox {
    grid-template-columns: repeat(6, max-content);
  }*/
}

.box {
  border: 2px solid #b0a9a9;
  background-color: #f1ecec;
  border-radius: .5em;
  padding: 6px 10px;
  cursor: move;
}
.box.not-allowed {
  cursor: not-allowed;
}

.box.over {
  border: 2px dotted #666;
}

[draggable] {
  user-select: none;
}
.words {
  font-size: 20px;
  color: #fb9678;
}
.previewDrag {
  font-size: 20px;
  color: #777;
}
.previewResult {font-size: 20px}
.content-wrapper .form-control[type="text"], .content-wrapper textarea {font-size: 16px}
.content-wrapper textarea {line-height: 1.4; border: 1px solid #d0d0d0}
.content-wrapper .resultText *, .content-wrapper .resultText {font-size: 20px!important;line-height: 1.5}
#loading {
  display: none;
  z-index: 1060;
  background-color: rgba(0,0,0,.5);
}
#loading>div {
  padding: 20px;
  user-select: none;
  -webkit-user-select: none;
}
.visually-hidden, .visually-hidden-focusable:not(:focus):not(:focus-within) {
  position: absolute!important;
  width: 1px!important;
  height: 1px!important;
  padding: 0!important;
  margin: -1px!important;
  overflow: hidden!important;
  clip: rect(0,0,0,0)!important;
  white-space: nowrap!important;
  border: 0!important;
}
@media (max-width: 768px) {
  .content-wrapper {padding: 0}
}
/*Nopbaitap*/
#eventThumb {border-top-left-radius: 15px;border-top-right-radius: 15px;}
#filesList {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
#files-area{
  margin: 0 auto;
}
.file-block{
  width: 100%;
  display: flex;
  flex-direction: column;
  background-color: #f4f4f4;
  margin: 5px;
  padding: 10px;
  color: initial;
  align-items: center;
  & > span.name {margin-top: 5px};
  & > span.name, span.size {
    margin-bottom: 5px;
    overflow:hidden;
    white-space:nowrap;
    width:100%;
  }
}
.file-block > video, .file-block > img, .file-block > audio {
  width: 100%;
  height: 160px;
  object-fit: cover;
  object-position: center;
}
@media(min-width: 576px) {
  .file-block > video, .file-block > img, .file-block > audio {
    width: 100%;
    height: 130px;
    object-fit: cover;
    object-position: center;
  }
}
@media(min-width: 768px) {
  .file-block > video, .file-block > img, .file-block > audio {
    width: 100%;
    height: 180px;
    object-fit: cover;
    object-position: center;
  }
}
.file-delete{
  display: flex;
  width: 28px;
  color: initial;
  background-color: #fb9678;
  color: #fff;
  font-size: large;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  &:hover{
    background-color: #15bdc6;
  }
  & > span{
    transform: rotate(45deg);
    transform-origin: center;
  }
}
#loading #progress {min-width:200px;}
.progress-text {color: #fff;}
.sticky {
  position: relative;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}
@media (min-width: 576px) {
  .file-block{width: calc(50% - 10px)}
}
@media (min-width: 768px) {
  .file-block{width: calc(1 / 3 * 100% - 10px)}
}
@media (min-width: 1200px) {
  .file-block{width: calc(25% - 10px)}
}
.rate-active {background-color: #F8F9FD;border-left: 6px solid;}
.media-left, .media-right {
  height: 100vh;
  height: 100vh;
  display: flex;
  flex-direction: column;
  
  
}
.media-left {
  justify-content: center;
  align-items: center;
}
.media-right .noteContent * {
  font-size: 16px;
}
.media-left img {
  display: block;
  height: 100vh;
  margin: auto;
  object-fit: contain;
  cursor: move;
  touch-action: none;
}
.media-left video {
  display: block;
  width: 100%;
  height: 100vh;
  aspect-ratio: 1/1;
  margin: auto;
}
@media (min-width: 576px) {
  .media-left {display: flex;justify-content: center;align-items: center;}
  .media-right {overflow-y: scroll;overflow-x: hidden;}
}
.media-item * {width: 100%;height: 100%;object-fit: cover;object-position: center center;}
.media-item {
  width: calc(100% / 3 - 4px);
  aspect-ratio: 1 / 1;
  cursor: pointer;
}
/*Style1*/
.style-1 .media-item:first-child, .style-1 .media-item:nth-child(2) {
  width: calc(50% - 3px);
  margin-bottom: 6px;
}
.style-1 .media-item:first-child {margin-right: 6px;}
.style-1 .media-item:nth-child(2), .style-1 .media-item:nth-child(5) {margin-right: 0;}
.style-1 .media-item:nth-child(4) {margin: 0 6px;}
/*Style 2*/
.style-2 .media-item {width: calc(50% - 3px)}
.style-2 .media-item:first-child, .style-2 .media-item:nth-child(2) {
  margin-bottom: 6px;
}
.style-2 .media-item:first-child, .style-2 .media-item:nth-child(3) {
  margin-right: 6px;
}
/*Style 3*/
.style-3 .media-item {width: calc(100% / 3 - 4px)}
.style-3 .media-item:nth-child(2) {margin: 0 6px;}
#deadline {font-size: 22px;color: #00c292;text-align: center;}
.more-item-count {
  display: flex;
  justify-content: center;
  align-items: center;
  left: 0;
  top: 0;
  font-size: 30px;
  color: #fff;
  background: rgba(0,0,0,.3);
}
.note-hide p {margin-bottom: 0;font-size: unset;}
.playVid, .pauseVid {
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 50px!important;
    height: 50px!important;
    border-radius: 50%;
    background: rgba(255,255,255, .8);
    z-index: 2;
}
.playVid i, .pauseVid i {
	display: flex;
	justify-content: center;
	align-items: center;
}