.fade { opacity: 0; -webkit-transition: opacity 0.15s linear; -o-transition: opacity 0.15s linear; transition: opacity 0.15s linear; }

.fade.show { opacity: 1; }

.modal-open { overflow: hidden; }

.modal { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1051; display: none; overflow: hidden; outline: 0; }

.modal-open .modal { overflow-x: hidden; overflow-y: auto; }

.modal-dialog { position: relative; width: auto; margin: 0.5rem; pointer-events: none; }

.modal.fade .modal-dialog { transition: -webkit-transform 0.3s ease-out; -webkit-transition: -webkit-transform 0.3s ease-out; -o-transition: transform 0.3s ease-out; transition: transform 0.3s ease-out; transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out; -webkit-transform: translate(0, -25%); -ms-transform: translate(0, -25%); transform: translate(0, -25%); }

.modal.show .modal-dialog { -webkit-transform: translate(0, 0); -ms-transform: translate(0, 0); transform: translate(0, 0); }

.modal-dialog-centered { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; min-height: calc(100% - (0.5rem * 2)); }

.modal-content { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; width: 100%; pointer-events: auto; background-color: #fff; background-clip: padding-box; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 0.5rem; outline: 0; }

.modal-backdrop { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1040; background-color: #000; }

.modal-backdrop.fade { opacity: 0; }

.modal-backdrop.show { opacity: 0.7; }

.modal-header { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding: 1rem; border-bottom: 1px solid #e9ecef; border-top-left-radius: 0.3rem; border-top-right-radius: 0.3rem; }

.modal-header .close { padding: 1rem; margin: -1rem -1rem -1rem auto; }

.modal-title { margin-bottom: 0; line-height: 1.5; }

.modal-body { position: relative; -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; padding: 1rem; }

.modal-footer { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; padding: 1rem; border-top: 1px solid #e9ecef; }

.modal-footer > :not(:first-child) { margin-left: .25rem; }

.modal-footer > :not(:last-child) { margin-right: .25rem; }

.modal-scrollbar-measure { position: absolute; top: -9999px; width: 50px; height: 50px; overflow: scroll; }

@media (min-width: 950px) { .modal-dialog { max-width: 900px; margin: 1.75rem auto; } }
@media (min-width: 576px) { .modal-dialog-centered { min-height: calc(100% - (1.75rem * 2)); }
  .modal-sm { max-width: 300px; } }
@media (min-width: 992px) { .modal-lg { max-width: 800px; } }
/* Button Up */
.btn-up { width: 40px; height: 40px; position: fixed; z-index: 9999; bottom: 30px; right: 10px; background-color: rgba(52, 56, 59, 0.3); border-radius: 5px; text-align: center; line-height: 35px; cursor: pointer; opacity: 0; -webkit-transition: opacity 0.2s ease; -o-transition: opacity 0.2s ease; transition: opacity 0.2s ease; }

.btn-up:before { content: "\f106"; display: inline-block; vertical-align: middle; font: 24px "Font Awesome 5 Free"; color: #fff; }

.btn-up.active { opacity: 1; }

.menuzord-menu { width: 100%; }

.menuzord-menu > li { position: relative; width: auto; float: left; padding-right: 20px; }
.menuzord-menu > li > a { color: #fff; text-align: left; display: block; padding: 10px 10px 10px 30px; height: 42px; }
.menuzord-menu > li > a:hover { opacity: 1; color: #fff; }
.menuzord-menu > li > a > i { float: none; display: inline-block; margin-left: 10px; font-size: 12px; }
.menuzord-menu > li > a > i.fa-chevron-up { display: none; }
.menuzord-menu > li > a span.digital { display: inline-block; width: 20px; height: 20px; text-align: center; line-height: 20px; margin-left: 5px; border-radius: 100%; background: #801f19; color: #fff; font-size: 12px; }
.menuzord-menu > li:hover { background: #000; }
.menuzord-menu > li:hover span.digital { background: #cd3930; opacity: 1; }
.menuzord-menu > li:hover > a > i.fa-chevron-up { display: inline-block; }
.menuzord-menu > li:hover > a > i.fa-chevron-down { display: none; }

@media (max-width: 900px) { .menuzord-responsive .menuzord-menu > li > a { color: #fff; }
  .menuzord-responsive .menuzord-menu > li > a > i { display: none; }
  .menuzord-responsive .menuzord-menu > li > a span.digital { background: #fff; color: #801f19; }
  .menuzord-responsive .menuzord-menu > li:hover > a > i { display: none; }
  .menuzord-responsive .menuzord-menu > li:hover span.digital { opacity: 1; } }
.form > div .input-append { display: inline-block; vertical-align: top; }
.form > div .input-append input[type="text"] { width: 180px; height: 32px; background: #fff; border-right: 0; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0); }
.form > div .input-append span.add-on { height: 32px; background: #fff; border-radius: 0; padding: 4px 2px 0; line-height: 25px; }
.form > div .input-append span.add-on i { font-size: 22px; width: 30px; height: auto; }

.form > div.required .input-append span.add-on, .form > div.required .other .input-append span.add-on { border: 1px solid #cd3930; color: #cd3930; }

.form > div.required .other > div .input-append input[type=text] { width: 180px; }

.datetimepicker-months { font-size: 14px; }

.popover-default > .popover-title { font-size: 18px; padding-top: 10px; color: #cd3930; }

.popover-body { font-size: 14px; }
.popover-body p { width: 80px; float: left; padding: 5px 0; margin-bottom: 0; }
.popover-body p:first-child { width: 100%; border-bottom: 1px dotted #ccc; }
.popover-body p span { display: inline-block; width: 80px; color: #20469c; }
.popover-body span.room_detail_video, .popover-body span.room_detail_audio, .popover-body span.room_detail_ec { display: inline-block; width: auto; padding: 0 3px; margin: 5px 3px 0 0; color: #fff; background-color: #00b4ff; }
.popover-body span.room_detail_audio { background-color: #3ebe31; }
.popover-body span.room_detail_ec { background-color: #cd3930; }

.modal-header { background: #cd3930; border-radius: 5px 5px 0 0; border-bottom: 1px solid #dcbfbf; position: relative; }
.modal-header button.close { color: #fff; opacity: .6; position: absolute; right: 20px; }
.modal-header h4 { color: #fff; font-size: 20px; text-align: center; width: 100%; }

.modal-body.form { background: #fff5f4; }
.modal-body.form p { display: inline-block; width: 120px; color: #801f19; vertical-align: top; line-height: 30px; }
.modal-body.form li { padding: 10px; border-bottom: 1px dotted #ccc; }
.modal-body.form li input { margin-bottom: 0; }
.modal-body.form li:last-child { border-bottom: 0; }
.modal-body.form label { cursor: pointer; }
.modal-body.form .trash { font-weight: bold; }
.modal-body.form .textarea { margin-left: 124px; width: 80%; }
.modal-body.form .textarea textarea { width: 100%; }
.modal-body.form .textarea p { width: 100%; color: #cd3930; font-size: 14px; }
.modal-body.form .nbb { border-bottom: none; }
.modal-body.form .nbb span { padding-right: 5px; }

.modal-footer { float: left; width: 100%; text-align: center; background: #fff5f4; border-top: 1px solid #dcbfbf; border-radius: 0 0 5px 5px; display: block; }
.modal-footer button { font-family: Arial, sans-serif,"Microsoft JhengHei", "Microsoft YaHei", "LiHei Pro Medium", "SimHei"; background: #cd3930; color: #fff; font-size: 16px; border: 0; padding: 5px 25px; border-radius: 3px; line-height: 25px; cursor: pointer; }
.modal-footer .cancel { background: #888; }

@media (max-width: 767px) { .modal-body.form .textarea { width: 75%; } }
@media screen and (max-width: 660px) and (orientation: portrait) { .modal-body.form select { min-width: 100%; width: 100%; }
  .modal-body.form input { width: 100%; }
  .modal-body.form .textarea { width: 100%; margin-left: 0; } }
.ssi-uploader { width: 80%; display: inline-block; }
.ssi-uploader img { width: auto; max-width: 100%; height: 89px; }
.ssi-uploader .ssi-buttonWrapper { padding-left: 0; }
.ssi-uploader .ssi-buttonWrapper .ssi-button.success, .ssi-uploader .ssi-buttonWrapper .ssi-button.info { width: auto; font-size: 16px; line-height: 30px; border-radius: 5px; padding: 5px 10px; position: relative; border: 0; margin-right: 5px; }
.ssi-uploader .ssi-InputLabel .ssi-button.success { width: auto; font-size: 16px; color: #fff; background: #cd3930; line-height: 30px; border-radius: 5px; padding: 5px 10px 5px 40px; position: relative; display: inline-block; min-width: 160px; border: 0; margin-right: 0; }
.ssi-uploader .ssi-InputLabel .ssi-button.success:hover { opacity: .9; }
.ssi-uploader .ssi-InputLabel .ssi-button.success::after { position: absolute; left: 0; height: 100%; width: 40px; top: 0; border-radius: 5px 0 0 5px; background: #801f19; text-align: center; line-height: 40px; font-size: 18px; content: "\f055"; font-family: "Font Awesome 5 Free"; font-weight: 600; }
.ssi-uploader .ssi-dropZonePreview { border: 0; background: #dde7fb; color: #444; min-height: 150px; }
.ssi-uploader .ssi-imgToUploadTable { background: #fff; -webkit-box-shadow: 0 2px 6px #aaa; box-shadow: 0 2px 6px #aaa; margin-top: 5px; font-size: 14px; width: 120px; vertical-align: top; }
.ssi-uploader .ssi-imgToUploadTable tr:first-child td:first-child { height: 100px; padding-top: 15px; }
.ssi-uploader .ssi-imgToUploadTable tr td { width: 100%; text-align: center; line-height: 20px; }
.ssi-uploader .ssi-imgToUploadTable tr:last-child td { text-align: left; }
.ssi-uploader .document-item .fileCorner { border-color: white transparent transparent #cd3930; top: 0; }
.ssi-uploader .document-item::before { border: solid 2px #cd3930; top: 0; }
.ssi-uploader .ssi-button.error { width: 30px; height: 30px; border: 0; line-height: 30px; background: #cd3930; border-radius: 100%; }
.ssi-uploader .ssi-button.error span.trash10 { position: relative; width: 100%; height: 100%; padding-right: 0; }
.ssi-uploader .ssi-button.error span.trash10::after { position: absolute; left: 0; height: 100%; width: 30px; top: 0; text-align: center; line-height: 30px; font-size: 16px; content: "\f2ed"; font-family: "Font Awesome 5 Free"; font-weight: 400; }
.ssi-uploader .ssi-button.error span.trash10:hover { opacity: .9; }

@media screen and (max-width: 950px) { .ssi-uploader { width: 75%; } }
@media screen and (max-width: 767px) { .ssi-uploader { width: 100%; } }
@media screen and (max-width: 450px) and (orientation: portrait) { .ssi-uploader .ssi-buttonWrapper .ssi-button.success, .ssi-uploader .ssi-buttonWrapper .ssi-button.info { min-width: 160px; text-align: center; margin-bottom: 10px; }
  .ssi-uploader .ssi-buttonWrapper .ssi-button.info { margin-bottom: 5px; }
  .ssi-btnIn { float: none; } }
.fc-view *::after, .fc-view > table *::after { content: none; }

.fc-icon-left-single-arrow:after, .fc-icon-right-single-arrow:after { font-family: "Font Awesome 5 Free"; font-weight: 600; content: "\f104"; font-size: 20px; }

.fc-icon-right-single-arrow:after { content: "\f105"; }

.fc th { padding: 10px 0; background: #e35e56; color: #fff; border-color: #cd3930; }

.fc-unthemed td.fc-today { background: #FFE5B5; }

.fixed-table-container { border: 0; }

.bootstrap-table .table { border-spacing: 3px; border-collapse: inherit !important; }

.bootstrap-table .table { border: 0; }
.bootstrap-table .table thead > tr > th { padding: 5px; background: #e35e56; color: #fff; text-align: center; }
/*.bootstrap-table .table thead > tr > th:first-child { text-align: left; }*/
.bootstrap-table .table tbody > tr > td { text-align: center; }
.bootstrap-table .table tbody > tr > td.align_left { text-align: left; }
.bootstrap-table .table tbody > tr > td.align_right { text-align: right; }
.bootstrap-table .table tbody > tr > td:first-child { text-align: left; }
.bootstrap-table .table tbody > tr > td:first-child i { color: #00b4ff; padding-left: 5px; }
.bootstrap-table .table tbody > tr > td:first-child a > i { padding: 0; }
.bootstrap-table .table tbody > tr > td:first-child a.plus > i { font-size: 18px; color: #cd3930; }
.bootstrap-table .table tbody > tr > td:first-child a.plus:hover span, .bootstrap-table .table tbody > tr > td:first-child a.plus:focus span { left: -27px; }
.bootstrap-table .table tbody > tr.no-records-found > td { text-align: center; }
.bootstrap-table .table tbody > tr > td.align_center { text-align: center; }
/*.bootstrap-table .table tbody > tr > td:last-child { text-align: left; }*/
.bootstrap-table .table tbody > tr > td a, .sync { display: inline-block; width: 30px; height: 30px; line-height: 30px; text-align: center; border-radius: 100%; margin: 5px; color: #fff; font-size: 16px; position: relative; vertical-align: top; }
.bootstrap-table .table tbody > tr > td a span, .sync span { display: none; }
.bootstrap-table .table tbody > tr > td a:hover, .bootstrap-table .table tbody > tr > td a:focus, .sync:hover { opacity: .7; }
.bootstrap-table .table tbody > tr > td a:hover span, .bootstrap-table .table tbody > tr > td a:focus span, .sync:hover span { position: absolute; border-radius: 0.25rem; display: inline-block; width: auto; font-size: 12px; background: #000; line-height: 25px; padding: 0 10px; top: -30px; left: -8px; white-space: nowrap; text-align: center; }
.bootstrap-table .table tbody > tr > td a:hover span i, .bootstrap-table .table tbody > tr > td a:focus span i, .sync:hover span i { font-family: "Font Awesome 5 Free"; font-size: 16px; color: #000; display: block; position: absolute; width: 100%; bottom: -8px; left: 0; }
.bootstrap-table .table tbody > tr > td a i, .sync i { position: relative; }
.bootstrap-table .table tbody > tr > td a.edit { background: #3ebe31; }
.bootstrap-table .table tbody > tr > td a.trash { background: #cd3930; }
.bootstrap-table .table tbody > tr > td a.edit01 { background: #b8b20c; }
.bootstrap-table .table tbody > tr > td a.edit01:hover span, .bootstrap-table .table tbody > tr > td a.edit01:focus span { left: -20px; }
.bootstrap-table .table tbody > tr > td a.delete { background: #ed621e; }
.bootstrap-table .table tbody > tr > td a.delete > i:after { position: absolute; content: "\f00d"; font-family: "Font Awesome 5 Free"; font-weight: 600; width: 12px; height: 12px; right: -3px; bottom: -3px; background: #ed621e; font-size: 12px; }
.bootstrap-table .table tbody > tr > td a.delete:hover span, .bootstrap-table .table tbody > tr > td a.delete:focus span { left: -20px; }
.bootstrap-table .table tbody > tr > td a.finish { background: #cd3930; }
.bootstrap-table .table tbody > tr > td a.eye { background: #00b4ff; }
.bootstrap-table .table tbody > tr > td a.apply { background: #a74fff; }
.bootstrap-table .table tbody > tr > td a.download { background: #ffc73d; }
.bootstrap-table .table tbody > tr > td a.signin { background: #0088A8; }
.bootstrap-table .table tbody > tr > td a.board { background: #695fb7; font-size: 18px; }
.sync { background: url(../images/bg.png) #f5f5f5; color: #444; }
.sync span { color: #fff; }

.bootstrap-table .table tbody > tr > td a.mcu { background: #D9006C; }
.bootstrap-table .table tbody > tr > td.no, .bootstrap-table .table tbody > tr:nth-child(odd) > td.no { background: #ccc; }
.bootstrap-table .table tbody > tr:nth-child(odd) > td { background: #eee; color: #444; }

.bootstrap-table .table tbody > tr > td span.room_detail_video, .bootstrap-table .table tbody > tr > td span.room_detail_audio, .bootstrap-table .table tbody > tr > td span.room_detail_ec { display: inline-block; width: auto; padding: 0 3px; margin: 5px 3px 0 0; color: #fff; background-color: #00b4ff; }
.bootstrap-table .table tbody > tr > td span.room_detail_audio { background-color: #3ebe31; }
.bootstrap-table .table tbody > tr > td span.room_detail_ec { background-color: #cd3930; }

.fixed-table-container tbody td { border: 0; }

.fixed-table-container thead th .both { background-image: url("../images/icon/both.png"); }

.fixed-table-container thead th .asc { background-image: url("../images/icon/asc.png"); }

.fixed-table-container thead th .desc { background-image: url("../images/icon/desc.png"); }

.fixed-table-body { height: auto; }

.fixed-table-pagination { border-top: 1px dotted #bbb; padding-top: 10px; margin-top: 10px; }
.fixed-table-pagination *:after { content: none; }

.pagination ul > li > a, .pagination ul > li > span { background: #eee; color: #aaa; }

.pagination-detail { color: #888; font-size: 12px; text-align: center; }
.pagination-detail .btn { background: #fff; -webkit-box-shadow: 0 0 0; box-shadow: 0 0 0; }
.pagination-detail .btn-group.dropup.open .btn { background: #eee; -webkit-box-shadow: 0 0 0; box-shadow: 0 0 0; }

.pagination ul > .active > a, .pagination ul > .active > span { background: #fff; color: #666; }

@media screen and (max-width: 1380px) { .pagination-detail, .pagination { width: 100%; text-align: center; }
  .pagination ul { background: none; -webkit-box-shadow: 0 0 0; box-shadow: 0 0 0; margin: auto; width: auto; } }
@media screen and (max-width: 1200px) { .bootstrapTable.table thead th { display: none; }
  .bootstrap-table .table tbody > tr > td { display: block; width: 100%; text-align: left; border-top: 1px dotted #bbb; }
  .bootstrap-table .table tbody > tr > td:before { content: attr(data-th) " : "; font-weight: bold; width: 8em; display: inline-block; color: #3060cd; }
  .bootstrap-table .table tbody > tr > td > span:before { content: ', '; }
  .bootstrap-table .table tbody > tr > td > span.room_detail_video:before, .bootstrap-table .table tbody > tr > td > span.room_detail_audio:before, .bootstrap-table .table tbody > tr > td > span.room_detail_ec:before { content: ''; }
  .bootstrap-table .table tbody > tr > td > span:first-child:before { content: ''; }
  .bootstrap-table .table tbody > tr > td > span:after { display: inline-block; }
  .bootstrap-table .table tbody > tr > td:first-child { border: 0; }
  .bootstrap-table .table tbody > tr > td:last-child:before { display: none; }
  .bootstrap-table .table tbody > tr:nth-child(even) td:first-child { padding-top: 25px; }
  .bootstrap-table .table tbody > tr:nth-child(even) td:last-child { padding-bottom: 25px; }
  .bootstrap-table .table:not(.table-condensed) > tbody > tr > td { padding: 10px; }
  .bootstrap-table .table:not(.table-condensed) > tbody > tr > td { padding: 10px; }
  .bootstrap-table .table tbody > tr > td.no, .bootstrap-table .table tbody > tr:nth-child(odd) > td.no { display: none; } }
@media screen and (max-width: 600px) { .bootstrap-table .table tbody > tr > td:last-child:before { display: none; }
  .history .bootstrap-table .table tbody > tr > td:last-child:before { display: inline-block; } }
.tooltip.in { opacity: 0.7; filter: alpha(opacity=70); }

#department { margin-left: -3px; display: inline-block; }
#department th { background: none; }
#department tr:first-child td { background: none; border: 0 !important; }
#department tr:first-child td input[type=text] { margin-left: -10px; }
#department tr:last-child td { border-bottom: 2px solid #aaa; }
#department tr:nth-child(2) td { border-top: 2px solid #aaa; }
#department td { padding: 10px; vertical-align: top; background: #f5f5f5; line-height: 35px; border-top: 1px dotted #aaa; width: 40px; }
#department td:first-child { max-width: 100%; width: 700px; }
#department td input[type=text] { width: 100%; }
#department button { font-size: 18px; height: 33px; width: 35px; color: #fff; position: relative; border-radius: 100%; cursor: pointer; }
#department button:hover { opacity: .8; }
#department button:hover span { position: absolute; border-radius: 0.25rem; display: inline-block; width: auto; font-size: 12px; background: #000; line-height: 25px; padding: 0 10px; top: -30px; left: -6px; white-space: nowrap; text-align: center; }
#department button:hover span i { font-family: "Font Awesome 5 Free"; font-size: 16px; color: #000; display: block; position: absolute; width: 100%; bottom: -8px; left: 0; }
#department button span { display: none; }
#department button.save { background: #ed621e; border-color: #ed621e; }
#department button.save:hover span { left: -20px; }
#department button.edit { background: #3ebe31; border-color: #3ebe31; }
#department button.trash { background: #cd3930; border-color: #cd3930; }

@media screen and (max-width: 1280px) { #department td:first-child { width: 550px; } }
@media screen and (max-width: 1080px) { #department td:first-child { width: 300px; } }
@media screen and (max-width: 767px) { #department td:first-child { width: 600px; } }
.tagHandler { width: 80%; display: inline-block; padding-left: 5px; }
/*.label{display:inline;padding:.2em .6em .3em;font-size:75%;font-weight:700;line-height:1;color:#fff;text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:.25em}*/
.tagHandler ul.tagHandlerContainer { border-radius: 0; margin: 0; border: 0; padding: 0; }
.tagHandler ul.tagHandlerContainer li { width: auto; display: inline-block; margin: 0; }
.tagHandler ul.tagHandlerContainer li.tagItem, .label-info { cursor: pointer; border: 0; border-radius: 5px; background: #cd3930; height: auto; text-align: center; -webkit-transition: 0.3s all; -o-transition: 0.3s all; transition: 0.3s all; -moz-transition: 0.3s all; -ms-transition: 0.3s all; font-size: 12px; }
.tagHandler ul.tagHandlerContainer li.tagItem span, .label-info { padding: 0; line-height: 25px; padding-right: 15px; position: relative; display: inline-block; }
.tagHandler ul.tagHandlerContainer li.tagItem span::after, .label-info span::after { font-size: 12px; content: "\f00d"; font-family: "Font Awesome 5 Free"; font-weight: 600; position: absolute; right: 0; top: 0; height: 100%; }
.tagHandler ul.tagHandlerContainer li.tagItem:hover, .label-info:hover { background: #801f19; }
.tagHandler ul.tagHandlerContainer li.tagInput { width: 100%; padding-left: 0; }
.tagHandler ul.tagHandlerContainer .ui-helper-hidden-accessible { width: 100%; font-size: 14px; color: #666; }

.tagHandler ul.tagHandlerContainer input.tagInputField { border: 1px solid #aaa; width: 300px; margin-bottom: 0; }

.ui-autocomplete.ui-menu { background: #fff; width: 299px; max-height: 300px; overflow-x: hidden; overflow-y: auto; border: 1px solid #aaa; border-top: 0; }
.ui-autocomplete.ui-menu li { width: 100%; padding: 5px; line-height: 25px; border-top: 1px dotted #aaa; -webkit-transition: 0.3s all; -o-transition: 0.3s all; transition: 0.3s all; -moz-transition: 0.3s all; -ms-transition: 0.3s all; cursor: pointer; }
.ui-autocomplete.ui-menu li:first-child { border: 0; }
.ui-autocomplete.ui-menu li:hover { background: #eee; }

span.ui-helper-hidden-accessible { display: none; }

@media screen and (max-width: 950px) { .tagHandler { width: 75%; } }
@media screen and (max-width: 767px) { .tagHandler { width: 75%; }
  .tagHandler ul.tagHandlerContainer li.tagInput { margin-left: 0; font-size: initial; } }
@media screen and (max-width: 660px) and (orientation: portrait) { .tagHandler { width: 98%; padding-left: 0; }
  .tagHandler ul.tagHandlerContainer input.tagInputField { width: 100%; } }
@media screen and (max-width: 420px) { .ui-autocomplete.ui-menu { width: 249px; max-height: 200px; } }
.fc-event-container .fc-underway { background-color: #cd3930; border: 1px solid #cd3930; }
.fc-underway .fc-event-dot { background-color: #cd3930; }

.fc-event-container .fc-finish { background-color: #aaa; border: 1px solid #aaa; }
.fc-finish .fc-event-dot { background-color: #aaa; }

.fc-event-container .fc-not-started { background-color: #3060cd; border: 1px solid #3060cd; }
.fc-not-started .fc-event-dot { background-color: #3060cd; }

.fc-close.fc-icon.fc-icon-x::after { width: 20px; height: 20px; font-size: 14px; content: "\f00d"; font-family: "Font Awesome 5 Free"; font-weight: 600; display: block; }

@media screen and (max-width: 400px) { .fc-toolbar .fc-center, .fc-toolbar .fc-left, .fc-toolbar .fc-right { float: left; width: 100%; }
  .fc-toolbar .fc-center { display: block; }
  .fc-toolbar .fc-left, .fc-toolbar .fc-right { padding-bottom: 10px; }
  .fc table { font-size: .85em; } }
.alert { margin: 0 0 10px 0; position: relative; }
.alert p { width: 100%; margin: 0; }
.alert .close { position: absolute; top: 10px; right: 20px; }

.tab-content, .list-group { width: 100%; float: left; }

.list-group { padding: 0; background: #000; }
.list-group a { display: inline-block; font-size: 18px; padding: 10px 15px; color: #aaa; line-height: 35px; }
.list-group a.show { color: #000; background: #fff; }

.tab-content { padding: 30px; font-size: 16px; }

@media screen and (max-width: 767px) { .list-group a { font-size: 14px; padding: 5px 10px; }
  .tab-content { padding: 10px; } }
.anchor { width: 100%; float: left; margin-bottom: 30px; }
.anchor > div { width: 100%; float: left; border-radius: 5px; background: #fff5f4; border: 1px solid #dcbfbf; }
.anchor a { display: inline-block; padding: 10px 20px; margin: 5px; color: #801f19; text-decoration: none; }
/*.anchor a:first-child { border-radius: 5px 0 0 5px; }*/
.anchor a.active { border-radius: .25rem; color: #fff; background-color: #801f19 !important; }

.fixednav { position: fixed; z-index: 9999; top: 0; width: 100%; }
.fixednav > div { width: 80%; border-radius: 0; }
/*.fixednav a:first-child { border-radius: 0; }*/

@media screen and (max-width: 1000px) { .fixednav > div { width: 90%; } }
@media screen and (max-width: 500px) { .anchor a { padding: 10px; font-size: 12px; }
  .fixednav { left: 0; }
  .fixednav > div { width: 100%; } }
.form > div li div.confirm.a { padding: 0; }

div.confirm.a .fixed-table-pagination { border: 0; }

.fixed-table-pagination .page-list { display: none; }

/*.fixed-table-toolbar .search { margin-bottom: 0; margin-top: 20px; }*/
.fixed-table-toolbar .search input { width: 100%; font-size: 14px; }

#reportTable, .userTable { border-spacing: 0; padding: 0; }
#reportTable thead > tr > th { margin: 0; border: 0; border-bottom: 1px solid #801f19; border-top: 3px solid #801f19; background: #fff5f4; color: #801f19; }
#reportTable thead > tr > th:first-child, #reportTable thead > tr > th:last-child { border-radius: 0; vertical-align: middle; }
#reportTable thead > tr > th .both { text-align: center; padding-left: 0; }
#reportTable tbody > tr > td { line-height: 30px; }
#reportTable tbody > tr:nth-child(odd) > td { background: #f5f5f5; }
.userTable tbody > tr:nth-child(even) > td { background: #fff; }
#reportTable input[type=checkbox], .userTable input[type=checkbox] { display: block; }

.fixed-table-pagination .pagination-info { font-size: 14px; line-height: 20px; }

.fixed-table-pagination div.pagination { margin: 0; }

.fixed-table-pagination div.pagination ul { -webkit-box-shadow: none; box-shadow: none; }

.fixed-table-pagination div.pagination .pagination li { width: auto; font-size: 14px; border: 0; padding-top: 0; }

@media screen and (max-width: 1200px) { #reportTable tbody > tr > td, .userTable tbody > tr > td { border: 0; display: table-cell; width: auto; }
  #reportTable tbody > tr > td:first-child { width: 10%; }
  #reportTable tbody > tr:nth-child(even) td:last-child, .userTable tbody > tr:nth-child(even) td:last-child { padding-bottom: 8px; }
  #reportTable tbody > tr:nth-child(even) td:first-child, .userTable tbody > tr:nth-child(even) td:first-child { padding-top: 8px; }
  #reportTable tbody > tr > td:before, .userTable tbody > tr > td:before { display: none; } }
header { width: 100%; background-position: center center; background-repeat: no-repeat; background-image: url("../images/login-bg.jpg"); padding: 20px; float: left; position: relative; z-index: 1052; }

@media screen and (min-width: 1921px) { header { background-size: 100%; } }
.logo { width: auto; float: left; line-height: 40px; }
.logo img { -webkit-filter: drop-shadow(0 0 5px #23aaf3); filter: drop-shadow(0 0 5px #23aaf3); height: 40px; }
.logo p { display: inline-block; color: #a4cbff; font-size: 18px; padding-left: 5px; }

@media screen and (max-width: 660px) and (orientation: portrait) { .logo { width: 100%; } }
.logout { width: auto; float: right; line-height: 40px; color: #a4cbff; font-size: 16px; }
.logout a { display: inline-block; margin-left: 10px; color: #a4cbff; text-decoration: none; }
.logout a:last-child { border-radius: 100%; width: 38px; height: 38px; text-align: center; font-size: 22px; margin-left: 10px; background: #6b9fe8; color: #091761; position: relative; }

@media screen and (max-width: 660px) and (orientation: portrait) { .logout { position: absolute; bottom: -35px; left: 20px; line-height: 20px; color: #fff; font-size: 14px; }
  .logout a { font-size: 14px; width: 20px; height: 20px; color: #cd3930; background: #fff; } }
nav { width: 100%; padding-left: 20px; padding-right: 20px; float: left; background: #cd3930; border-top: 6px solid #000; position: relative; z-index: 1051; }
nav li.current { background: #000; }
nav li.current span.digital { background: #cd3930; opacity: 1; }

nav li > a { background-position: 10px 11px; background-repeat: no-repeat; }
nav li > a:hover { background-position: 10px 11px; background-repeat: no-repeat; }

.tab { width: 100%; float: left; border-radius: 5px; background: #fff5f4; border: 1px solid #dcbfbf; }

nav li.calendar > a { background-image: url(../images/icon/icon01.png); }
nav li.calendar > a:hover { background-image: url(../images/icon/icon01a.png); }
nav li.calendar.current > a { background-image: url(../images/icon/icon01a.png); }
nav li.calendar:hover > a { background-image: url(../images/icon/icon01a.png); }

nav li.conference > a { background-image: url(../images/icon/icon02.png); }
nav li.conference > a:hover { background-image: url(../images/icon/icon02a.png); }
nav li.conference.current > a { background-image: url(../images/icon/icon02a.png); }
nav li.conference:hover > a { background-image: url(../images/icon/icon02a.png); }

nav li.control > a { background-image: url(../images/icon/icon03.png); }
nav li.control > a:hover { background-image: url(../images/icon/icon03a.png); }
nav li.control.current > a { background-image: url(../images/icon/icon03a.png); }
nav li.control:hover > a { background-image: url(../images/icon/icon03a.png); }

nav li.template > a { background-image: url(../images/icon/icon04.png); }
nav li.template > a:hover { background-image: url(../images/icon/icon04a.png); }
nav li.template.current > a { background-image: url(../images/icon/icon04a.png); }
nav li.template:hover > a { background-image: url(../images/icon/icon04a.png); }

nav li.statistics > a { background-image: url(../images/icon/icon05.png); }
nav li.statistics > a:hover { background-image: url(../images/icon/icon05a.png); }
nav li.statistics.current > a { background-image: url(../images/icon/icon05a.png); }
nav li.statistics:hover > a { background-image: url(../images/icon/icon05a.png); }

nav li.systems > a { background-image: url(../images/icon/icon06.png); }
nav li.systems > a:hover { background-image: url(../images/icon/icon06a.png); }
nav li.systems.current > a { background-image: url(../images/icon/icon06a.png); }
nav li.systems:hover > a { background-image: url(../images/icon/icon06a.png); }

nav li.equipment > a { background-image: url(../images/icon/icon07.png); }
nav li.equipment > a:hover { background-image: url(../images/icon/icon07a.png); }
nav li.equipment.current > a { background-image: url(../images/icon/icon07a.png); }
nav li.equipment:hover > a { background-image: url(../images/icon/icon07a.png); }

@media (max-width: 900px) { nav ul, nav .menuzord-responsive .menuzord-menu > li .span { display: none; }
  nav li.calendar > a { background-image: url(../images/icon/icon01a.png); }
  nav li.conference > a { background-image: url(../images/icon/icon02a.png); }
  nav li.control > a { background-image: url(../images/icon/icon03a.png); }
  nav li.template > a { background-image: url(../images/icon/icon04a.png); }
  nav li.statistics > a { background-image: url(../images/icon/icon05a.png); }
  nav li.systems > a { background-image: url(../images/icon/icon06a.png); }
  nav li.equipment > a { background-image: url(../images/icon/icon07a.png); } }
.trail { width: 100%; float: left; text-align: right; color: #888; padding: 10px 10%; background: #ddd; }
.trail a, .trail span { display: inline-block; font-size: 14px; }
.trail a { color: #888; }
.trail span { color: #3060cd; }

footer { height: 5%; width: 100vw; margin: auto; text-align: center; font-size: 12px; color: #aaa; border-top: 2px solid #ddd; }
footer p { width: 100vw; float: left; padding-top: 15px; }

body, html { width: 100vw; height: 100vh; }

body { font-family: Arial, sans-serif,"Microsoft JhengHei", "Microsoft YaHei", "LiHei Pro Medium", "SimHei"; position: relative; }
body > div:first-child { position: relative; width: 100vw; min-height: 95%; margin: auto; background: url(../images/bg.png) #f5f5f5; mix-blend-mode: multiply; }

.w5 { width: 5%; }

.w8 { width: 8%; }

.w10 { width: 10%; }

.w11 { width: 11%; }

.w12 { width: 12%; }

.w13 { width: 13%; }

.w14 { width: 14%; }

.w15 { width: 15%; }

.w16 { width: 16%; }

.w17 { width: 17%; }

.w18 { width: 18%; }

.w19 { width: 19%; }

.w20 { width: 20%; }

.w21 { width: 21%; }

.w25 { width: 25%; }

.w30 { width: 30%; }

.w35 { width: 35%; }

.w45 { width: 45%; }

.w50 { width: 50%; }

.w65 { width: 65%; }

.w80 { width: 80%; }

a.search.collapsed { background: #f5f5f5; color: #888; }

a.search { width: auto; font-size: 20px; margin: 0 15px -2px 0; background: #000; color: #fff; border: 1px solid #ddd; line-height: 30px; border-radius: 5px; padding: 5px 10px; text-align: center; float: right; }

.dep a { display: inline-block; width: 30px; height: 30px; line-height: 30px; text-align: center; border-radius: 100%; margin: 5px; color: #fff; font-size: 16px; position: relative; vertical-align: top; }
.logout a span, .dep a span { display: none; }
.logout a:hover, .logout a:focus, .dep a:hover, .dep a:focus { opacity: .7; }
.logout a:hover span, .logout a:focus span, .dep a:hover span, .dep a:focus span { position: absolute; border-radius: 0.25rem; display: inline-block; width: auto; font-size: 12px; background: #000; line-height: 25px; padding: 0 10px; top: -30px; left: -8px; white-space: nowrap; text-align: center; }
.logout a:hover span i, .logout a:focus span i, .dep a:hover span i, .dep a:focus span i { font-family: "Font Awesome 5 Free"; font-size: 16px; color: #000; display: block; position: absolute; width: 100%; bottom: -8px; left: 0; }
.logout a i, .dep a i { position: relative; }
.dep a.edit { background: #3ebe31; }
.dep a.trash { background: #cd3930; }
.dep a.edit01 { background: #b8b20c; }
.dep a.edit01:hover span, .dep a.edit01:focus span { left: -20px; }
.dep a.delete { background: #ed621e; }
.dep a.delete > i:after { position: absolute; content: "\f00d"; font-family: "Font Awesome 5 Free"; font-weight: 600; width: 12px; height: 12px; right: -3px; bottom: -3px; background: #ed621e; font-size: 12px; }
.dep a.delete:hover span, .dep a.delete:focus span { left: -20px; }
.dep a.eye { background: #00b4ff; }
.dep a.board { background: #695fb7; font-size: 18px; }

.logout a:hover span, .logout a:focus span { top: 43px; left: -4px; color: #fff; }
.logout a:hover span i, .logout a:focus span i { top: -10px; }

.form > div.dep li a span { display: none; }
.form > div.dep li a:hover span, .form > div.dep li a:focus span, .block { display: block; }

.bootstrap-table { width: 100%; float: left; }

.collapse, .collapsing { width: 100%; padding: 5px 15px; float: right; line-height: 30px; font-size: 14px; text-align: center; }
.collapse > div, .collapsing > div { width: 100%; padding: 10px; border: 1px solid #ddd; background: #f5f5f5; border-radius: 5px; margin: 10px 0 -15px 0; }
.collapse > div input, .collapsing > div input { height: 32px; font-size: 14px; margin: 0; padding: 5px; font-family: Arial, sans-serif,"Microsoft JhengHei", "Microsoft YaHei", "LiHei Pro Medium", "SimHei"; background-color: #ffffff; border: 1px solid #cccccc; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); transition: border linear .2s, box-shadow linear .2s; }
.collapse > div input[type="text"], .collapsing > div input[type="text"] { width: 20%; background: #fff; border-radius: 4px; }
.collapse > div input[type="submit"], .collapsing > div input[type="submit"] { background: #cd3930; border: 0; color: #fff; border-radius: 3px; padding: 5px 15px; margin-left: 5px; line-height: 20px; cursor: pointer; }
.collapse > div div, .collapsing > div div { display: inline-block; vertical-align: middle; margin: 0 5px; }
.collapse > div div input[type="text"], .collapsing > div div input[type="text"] { width: 80%; background: #fff; border-right: 0; margin-top: 0; -webkit-box-shadow: inset 0 1px 1px transparent; box-shadow: inset 0 1px 1px transparent; -webkit-border-radius: 4px 0 0 4px; -moz-border-radius: 4px 0 0 4px; border-radius: 4px 0 0 4px; }
.collapse > div div span.add-on, .collapsing > div div span.add-on { height: 32px; background: #fff; border-radius: 0; padding: 4px 2px 0; line-height: 25px; width: 40px; -webkit-border-radius: 0 4px 4px 0; -moz-border-radius: 0 4px 4px 0; border-radius: 0 4px 4px 0; }
.collapse > div div span.add-on i, .collapsing > div div span.add-on i { font-size: 22px; width: 30px; height: auto; }

@media screen and (max-width: 1000px) { .collapse, .collapsing { text-align: left; }
  .collapse > div div { margin-bottom: 5px; }
  .collapse > div div input[type="text"], .collapsing > div div input[type="text"] { width: 200px; }
  .collapse > div > input[type="text"], .collapsing > div > input[type="text"] { margin-left: 27px; width: 240px; } }
@media screen and (max-width: 700px) { a.search { margin: 10px 10px 5px 0; }
  .collapse, .collapsing { padding: 5px 10px; }
  .collapse > div div, .collapsing > div div { width: 100%; margin: 0 0 5px; padding: 0; }
  .collapse > div div input[type="text"], .collapsing > div div input[type="text"] { width: 85%; }
  .collapse > div div span.add-on, .collapsing > div div span.add-on { width: 15%; text-align: right; padding-right: 15px; }
  .collapse > div > input[type="text"], .collapsing > div > input[type="text"] { width: 100%; margin: 5px 0; }
  .collapse > div input[type="submit"], .collapsing > div input[type="submit"] { margin: 5px 0; } }
section { width: 100%; float: left; padding: 20px 10%; }
section h1 { width: 100%; float: left; font-size: 22px; line-height: 30px; color: #444; padding-bottom: 20px; }
section h1 img { vertical-align: text-top; margin-right: 10px; }
section h1 a, section h1 a.list { width: auto; float: right; font-size: 16px; color: #fff; background: #3060cd; border-radius: 5px; padding: 5px 20px 5px 45px; position: relative; font-weight: 400; }
.sync { padding: unset; }
section h1 a::after { position: absolute; left: 0; height: 100%; width: 35px; top: 0; border-radius: 5px 0 0 5px; background: url(../images/icon/icon04c.png) center center no-repeat #20469c; }
.sync::after { background: unset; }
section h1 a.search::after { background: none; }
section h1 a.new, section h1 a.search { background: #cd3930; }
section h1 a.new::after { background: #801f19; text-align: center; line-height: 40px; font-size: 18px; content: "\f055"; font-family: "Font Awesome 5 Free"; font-weight: 600; }
section h1 a:hover, section h1 a.new:hover { color: #fff; text-decoration: none; }
section .uri { font-size: 14px; white-space: nowrap; }
section .note { font-size: 10px; white-space: nowrap; }
.sync:hover { color: unset; }

@media screen and (max-width: 1000px) { section { padding: 20px 5%; } }
.master { width: 100%; float: left; padding: 30px; margin-bottom: 30px; border: 1px solid #ddd; border-top: 3px solid #000; border-radius: 5px; background: #fff; word-break: break-all; }

.master.a { padding: 0 0 30px; }

@media screen and (max-width: 767px) { .master { padding: 10px; }
  .master.a { padding: 0 0 10px; } }
span.name { display: inline-block; background: #3060cd; padding: 0 10px; color: #fff; font-weight: 400; font-size: 18px; margin: 0 5px 0 20px; line-height: 35px; border: 1px solid #3060cd; vertical-align: top; }

span.time { display: inline-block; border: 1px solid #3060cd; padding: 0 10px; color: #20469c; font-weight: 400; font-size: 14px; line-height: 35px; vertical-align: top; }

.last-btn { width: 100%; text-align: center; padding-bottom: 20px; }
.last-btn input[type=submit], .last-btn button, .last-btn a { font-family: Arial, sans-serif,"Microsoft JhengHei", "Microsoft YaHei", "LiHei Pro Medium", "SimHei"; background: #cd3930; color: #fff; font-size: 16px; border: 0; padding: 5px 25px; border-radius: 3px; line-height: 30px; display: inline-block; margin: 0 10px; cursor: pointer; }
.last-btn.a input[type=submit] { width: auto; margin-top: 20px; }
.last-btn button { background: #888; }
.last-btn a { text-decoration: none; }
.last-btn a.download { background: #ffc73d; }
.last-btn a.signin { background: #0088A8; }
.last-btn a.edit { background: #3ebe31; }
.last-btn a.apply { background: #a74fff; }

.user_search { margin-bottom: -15px; }

.form { width: 100%; float: left; position: relative; }
.form input, .form textarea { font-family: Arial, sans-serif,"Microsoft JhengHei", "Microsoft YaHei", "LiHei Pro Medium", "SimHei"; border-radius: 0; border: 1px solid #aaa; padding: 5px; font-size: 18px; }
.form input { width: 60%; height: auto; }
.form input.w40 { width: 40%; }
.form input[type=number] { width: auto; }
.form input[type=radio], .form input[type=checkbox] { width: auto; display: none; }
.userTable input[type=checkbox] { display: block; }
.form input[type=checkbox] + label span:not(.room_detail) { display: inline-block; font-size: 22px; vertical-align: middle; cursor: pointer; }
.form input[type=checkbox] + label span i.fa-check-square { display: none; }
.form input[type=checkbox]:checked + label span i.fa-check-square, .form input[type=checkbox]:disabled:checked + label span i.fa-check-square { display: inline-block; }
.form input[type=checkbox]:checked + label span i.fa-square, .form input[type=checkbox]:disabled:checked + label span i.fa-square { display: none; }
.form input[type=checkbox]:disabled + label span i.fa-check-square { opacity: .5; }
.form input[type="radio"] + label { cursor: pointer; }
.form input[type="radio"] + label span { display: inline-block; font-size: 18px; cursor: pointer; border-radius: 100%; }
.form input[type="radio"] + label span i.fa-dot-circle { display: none; }
.form input[type="radio"]:checked + label span i.fa-dot-circle { display: inline-block; }
.form input[type="radio"]:checked + label span i.fa-circle { display: none; }
.form textarea { width: 80%; height: 120px; }
.form > div { width: 100%; float: left; color: #444; }
.form > div > ul, .form > div > div > ul { width: 100%; float: left; padding: 20px; margin-bottom: 30px; border: 1px solid #ddd; border-top: 3px solid #000; border-radius: 5px; background: #fff; }
.form > div ul > li { border-bottom: 1px dotted #ccc; }
.form > div ul > li:last-child { border-bottom: 0; }
.form > div li { width: 100%; float: left; font-size: 16px; padding: 10px 0; }
.form > div li span, .room_detail { display: inline-block; padding-right: 5px; min-width: 10px; font-size: 16px; line-height: 30px; }
.form > div li span.blue { color: #3060cd; padding-left: 3px; }
.form > div li > p > span, .form > div li span.red { color: #cd3930; }
.form > div li label { display: inline-block; padding-right: 30px; font-size: 16px; position: relative; margin-bottom: 0; }
.form > div li > p, .outdoor p { width: 120px; display: inline-block; vertical-align: top; line-height: 30px; margin-bottom: 0; }
.form > div li > p::after { width: 100%; }
.form > div li .checkbox { display: inline-block; }
.form > div li .indoor, .form > div li .outdoor { display: contents; width: 100%; }
.form > div li ol, .indoor ol { display: inline-block; width: 80%; }
.form > div li ol li, .indoor ol li { width: 16.66%; padding: 0; }
.form > div li ol li label, .indoor ol li label { padding-right: 0; }
.form > div li ol li span, .indoor ol li span { cursor: pointer; }
.form > div li div.yes, .form > div li div.confirm { background: #dde7fb; width: 80%; display: block; margin-left: 120px; margin-top: 10px; padding: 10px 15px; }
.form > div li div.yes ol, .form > div li div.confirm ol { width: 100%; }
.form > div li div.yes ol li, .form > div li div.confirm ol li { width: 100%; padding: 5px 0; }
.form > div li div.yes ol li.ec_situation_detail { width: 25% }
.form > div li div.yes ol li label, .form > div li div.confirm ol li label { padding-right: 10px; margin-bottom: 0; }
.form > div li div.ec_situation, .form > div li div.seat { margin-left: 0; width: 100%; }
.form > div li div.confirm { background: none; padding-left: 0; }
.form > div li .textarea { margin-left: 124px; width: 80%; }
.form > div li .textarea textarea { width: 100%; }
.form > div li .textarea p { width: 100%; color: #cd3930; font-size: 14px; padding-top: 5px; margin-bottom: 0; }
.form > div li a { display: inline-block; }
.form > div li a.seat { margin-top: 5px; }
.form > div li div.seat { margin-bottom: 5px; }
.form > div li a.add, .form > div li a.web, .form > div li a.setting, .form > div li a.screen { width: auto; font-size: 16px; color: #fff; background: #cd3930; line-height: 30px; border-radius: 5px; padding: 5px 10px 5px 45px; position: relative; display: inline-block; min-width: 160px; text-align: center; }
.form > div li a.add:hover, .form > div li a.web:hover, .form > div li a.setting:hover, .form > div li a.screen:hover { text-decoration: none; }
.form > div li a.add::after, .form > div li a.web::after, .form > div li a.setting::after, .form > div li a.screen::after { position: absolute; left: 0; height: 100%; width: 40px; top: 0; border-radius: 5px 0 0 5px; background: #801f19; text-align: center; line-height: 40px; font-size: 18px; content: "\f0e8"; font-family: "Font Awesome 5 Free"; font-weight: 600; }
.form > div li a.add::after { content: "\f055"; }
.form > div li a.setting::after { content: "\f0ad"; }
.form > div.dep div.text { width: 75%; display: inline-block; line-height: 30px; padding-left: 5px; }
.form > div.required > div { width: 50%; vertical-align: top; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; padding-bottom: 30px; }
.form > div.required > div:first-child { padding-right: 15px; }
.form > div.required > div:last-child { padding-left: 15px; }
.form > div.required > ul, .form > div.required > div > ul { border: 1px solid #dcbfbf; border-top: 3px solid #cd3930; background: #fff5f4; }
.form > div.required > div > ul { height: 100%; padding-bottom: 0; }
.form > div.required input, .form > div.required textarea, .form > div.required select { border: 1px solid #cd3930; }
.form > div.required input[type="radio"] + label span, .form > div.required input[type="checkbox"] + label span:not(.room_detail) { color: #cd3930; }
.form > div.required ol.checkbox { width: 100%; padding-left: 124px; }
.form > div.required ol.checkbox li { width: 14.28%; padding-right: 0; }
.form > div.required ol.checkbox li label { padding-right: 0; }
.form > div.required .other { width: 100%; padding-left: 124px; }
.form > div.required .other p { width: 40%; float: left; }
.form > div.required .other p input[type=text] { width: 30%; }
.form > div.required .other > div { width: 60%; float: left; }
.form > div.required .other > div div { width: 60%; }
.form > div.required .other > div span.add-on { border: 1px solid #aaa; color: #aaa; }
.form > div.required .other > div input[type=text] { border-right: 0; margin-left: 0; font-size: 16px; }
.form > div.required .other input { border: 1px solid #cd3930; width: 80%; margin-left: 5px; margin-bottom: 0; }
.form > div.required .other input[type="number"] { width: auto; }
.form > div.required .other label { padding-right: 0; }
.form > div.required .other input[type="radio"] + label span { color: #444; }
.form > div.required li.no textarea { border: 1px solid #aaa; }
.form > div.required li .checkbox input[type="checkbox"] + label span { color: #444; }
.form > div.required li div.checkbox { padding: 0; padding-top: 5px; line-height: 30px; }
.form > div.required:first-child { display: -webkit-box; display: -ms-flexbox; display: flex; }

.form.a input[type=text], .form.a input[type=password] { width: 300px; }

.form.detail { word-break: break-all; }
.form.detail div.text, .view_mode { width: 75%; display: inline-block; line-height: 30px; padding-left: 5px; }
.form.detail li span i { opacity: .5; margin-right: 5px; }
.form.detail a { line-height: 30px; color: #cd3930; }
.form.detail a.blue { color: #007bff; }
.form.detail div.confirm { margin: 0; width: 75%; display: inline-block; padding: 0; }
.form.detail div.confirm li { padding: 0; padding-bottom: 5px; }
.form.detail div.confirm select { opacity: .7; }

.modal-body.form ul.web { width: 100%; float: left; margin-bottom: 0; }
.modal-body.form ul.web > li { width: 19%; float: left; margin: 0 .5%; background: #fff; min-height: 380px; border: 1px solid #dcbfbf; padding: 0; }
.modal-body.form ul.web > li img { width: 100%; }
.modal-body.form ul.web > li:hover { -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5); box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5); background: rgba(255, 199, 199, 0.2); border: 2px solid #cd3930; }
.modal-body.form ul.web > li label { font-size: 15px; margin-bottom: 0; }
.modal-body.form ul.web > li label:hover { cursor: pointer; }
.modal-body.form ul.web > li label span { padding-right: 5px; }
.modal-body.form ul.web > li ol li { border: 0; border-top: 1px dotted #dcbfbf; line-height: 1.2; }
.modal-body.form ul.pane > li { width: 32%; }
.modal-body.form ul.pane > li ol li { padding: 6px; }

@media screen and (max-width: 1690px) { .form > div textarea, .form > div .w75 { width: 75%; }
  .form > div.required ol.checkbox { padding-top: 5px; /*padding-bottom: 5px;*/ }
  .form > div.required ol.checkbox li { width: 25%; padding: 0; }
  .form > div.required ol.checkbox li label { margin-bottom: 0; }
  .form > div.required .other p { width: 100%; padding-top: 5px; padding-bottom: 10px; }
  .form > div.required .other > div { width: 100%; }
  .form > div li ol li { width: 25%; } }
@media screen and (max-width: 1380px) { .form > div.required > div { width: 100%; vertical-align: top; padding: 0; }
  .form > div.required > div > ul { padding-bottom: 20px; }
  .form > div.required > div:first-child { padding-right: 0; }
  .form > div.required > div:last-child { padding-left: 0; }
  .form > div.required > div > ul { height: auto; }
  .form > div.required ol.checkbox li { width: 14.28%; padding: 5px; }
  .form > div.required .other p { width: 60%; }
  .form > div.required .other p:first-child { width: 20%; padding-bottom: 0; }
  /*.form > div.required .other div { width: 60%; padding-bottom: 0; }*/
  .form > div.required:first-child { display: block; } }
@media screen and (max-width: 950px) { .form > div.required ol.checkbox li { width: 25%; padding: 0; }
  .form > div li ol { width: 75%; }
  .form > div li ol li { width: 33.33%; }
  .form > div li .textarea { width: 75%; }
  .form > div li div.yes, .form > div li div.confirm { width: 75%; }
  .modal-body.form ul.web > li { min-height: 350px; } }
@media screen and (max-width: 767px) { .form > div li span { min-width: 1px; }
  .form > div li > p { width: 100%; }
  .form > div li > p span { display: none; }
  .form > div.required li > p span { display: inline-block; }
  .form > div.required li.no textarea, .form > div li ol, .form > div li .textarea, .form > div li div.yes, .form > div li div.confirm { width: 98%; margin-left: 0; }
  .form > div.dep div.text { width: 98%; padding-left: 0; }
  .form > div.required li.no textarea { margin-left: 2px; }
  .form > div.required ol.checkbox, .form > div.required .other { padding-left: 0; }
  .form > div li a.add { margin-left: 0; }
  .form > div li ol li { width: 50%; }
  .form > div.required .other p:first-child, .form > div.required .other p, .form.detail div.text, .form > div textarea { width: 100%; }
  .form > div.required .other p:first-child { padding-bottom: 10px; }
  .form.a input[type=text], .form.a input[type=password] { width: 60%; }
  .modal-body.form ul.web > li { min-height: 10px; width: 100%; margin: 5px 0; }
  .modal-body.form ul.web > li img { width: 18%; display: inline-block; vertical-align: middle; border-right: 1px solid #dcbfbf; }
  .modal-body.form ul.web > li ol { width: 82%; margin-left: -1%; display: inline-block; vertical-align: middle; }
  .modal-body.form ul.web > li ol li { padding: 5px 10px; border-top: 0; }
  .modal-body.form ul.web > li:nth-child(2) ol li { width: 50%; float: left; border-top: 0; border-bottom: 1px dotted #dcbfbf; }
  .modal-body.form ul.web > li:nth-child(2) ol li:last-child { border: 0; }
  .modal-body.form ul.web > li:nth-child(4) ol li { width: 50%; float: left; border-top: 0; border-bottom: 1px dotted #dcbfbf; }
  .modal-body.form ul.web > li:nth-child(4) ol li:nth-child(3), .modal-body.form ul.web > li:nth-child(4) ol li:last-child { border: 0; } }
@media screen and (max-width: 700px) { .modal-body.form ul.web > li img { width: 20%; }
  .modal-body.form ul.web > li ol { width: 70%; margin-left: -1%; } }
@media screen and (max-width: 520px) { .modal-body.form ul.web > li img { width: 25%; }
  .modal-body.form ul.web > li ol { width: 75%; margin-left: -1.5%; } }
@media screen and (max-width: 350px) { .modal-body.form ul.web > li img { width: 35%; }
  .modal-body.form ul.web > li ol { width: 65%; margin-left: -1.8%; } }
@media screen and (max-width: 660px) and (orientation: portrait) { .form > div li a.add { margin-top: 10px; }
  .form > div.required ol.checkbox li { width: 33.33%; }
  .form > div li ol li { width: 100%; }
  section h1 a { float: none; width: 150px; text-align: center; display: block; margin-top: 10px; } }
select { padding: 5px 30px 5px 5px; line-height: 20px; background-image: url(../images/arrow.png); background-position: right 10px center; background-repeat: no-repeat; width: auto; height: auto; border-radius: 0; font-size: 16px; color: #444; margin-bottom: 0; margin-right: 5px; border: 1px solid #ccc; background-color: #fff; }

@media screen and (max-width: 660px) and (orientation: portrait) { select { min-width: 50%; margin-bottom: 10px; }
  div.yes select, div.confirm select { min-width: 10px; margin-bottom: 0; } }
.master.no { text-align: center; }
.master.no > a { color: #cd3930; text-decoration: underline; }

.fas.fa-phone.no { position: relative; }

.fas.fa-phone.no::after { font-size: 2em; position: absolute; width: 2px; height: 100%; -webkit-transform: matrix(-0.8, 0.8, -0.8, -0.8, 0, 0); -ms-transform: matrix(-0.8, 0.8, -0.8, -0.8, 0, 0); transform: matrix(-0.8, 0.8, -0.8, -0.8, 0, 0); background: #000; top: 0; left: 49%; }

.bootstrap-table.a { padding: 20px; margin-bottom: 30px; border: 1px solid #ddd; border-top: 3px solid #000; border-radius: 5px; background: #fff; }
.bootstrap-table.a .table a.web { width: auto; font-size: 16px; color: #fff; background: #cd3930; line-height: 30px; border-radius: 5px; padding: 5px 10px 5px 45px; position: relative; display: inline-block; min-width: 160px; text-align: center; height: 40px; }
.bootstrap-table.a .table a.web:hover { text-decoration: none; }
.bootstrap-table.a .table a.web::after { position: absolute; left: 0; height: 100%; width: 40px; top: 0; border-radius: 5px 0 0 5px; background: #801f19; text-align: center; line-height: 40px; font-size: 18px; content: "\f0e8"; font-family: "Font Awesome 5 Free"; font-weight: 600; }

.bootstrap-table.a a.setting, .bootstrap-table.a a.add, .bootstrap-table.a a.screen, .bootstrap-table.a a.lock, .bootstrap-table.a a.unlock { width: auto; font-size: 16px; color: #fff; margin: 0 5px 5px 0; background: #cd3930; line-height: 30px; border-radius: 5px; padding: 5px 10px 5px 45px; position: relative; display: inline-block; min-width: 155px; text-align: center; float: right; }
.bootstrap-table.a a.setting::after, .bootstrap-table.a a.add::after, .bootstrap-table.a a.screen::after, .bootstrap-table.a a.lock::after, .bootstrap-table.a a.unlock::after { position: absolute; left: 0; height: 100%; width: 40px; top: 0; border-radius: 5px 0 0 5px; background: #801f19; text-align: center; line-height: 40px; font-size: 18px; content: "\f0e8"; font-family: "Font Awesome 5 Free"; font-weight: 600; }
.bootstrap-table.a a.setting:hover, .bootstrap-table.a a.add:hover, .bootstrap-table.a a.screen:hover, .bootstrap-table.a a.lock:hover, .bootstrap-table.a a.unlock:hover { color: #fff; text-decoration: none; }

.bootstrap-table.a a:nth-child(1), .bootstrap-table.a a:nth-child(7) { margin-right: 14px; }
.bootstrap-table.a a.unlock { background: #26ca6a; }

.bootstrap-table.a a.setting::after { content: "\f00a"; }
.bootstrap-table.a a.add::after { content: "\f055"; }
.bootstrap-table.a a.lock::after { content: "\f023"; }
.bootstrap-table.a a.unlock::after { content: "\f3c1"; background: #096831; }
.bootstrap-table.a a.mute::after { content: "\f131"; }
.bootstrap-table.a a.unmute::after { content: "\f130"; }
.bootstrap-table.a a.connect::after { content: "\f095"; }
.bootstrap-table.a a.disconnect::after { content: "\f3dd"; }
.bootstrap-table.a a.export::after { content: "\f56e"; }

.bootstrap-table.a .table { width: 100%; }
.bootstrap-table.a .table th, .bootstrap-table.a .table td { padding: 10px; line-height: 25px; border: 0; }
.bootstrap-table.a .table i { font-size: 22px; color: #000; }
.bootstrap-table.a .table .fun { width: 30px; height: 30px; line-height: 30px; background: #cd3930; border: 0; border-radius: 100%; background-position: center center; background-repeat: no-repeat; margin: 0 5px 5px; cursor: pointer; }
.bootstrap-table.a .table .fun.btn01 { background-image: url(../images/icon/volume.png); background-size: 20px; background-color: #3ebe31; }
.bootstrap-table.a .table .fun.btn01a { background-image: url(../images/icon/volume-no.png); background-size: 20px; }
.bootstrap-table.a .table .fun.btn02 { background-image: url(../images/icon/phone.png); background-size: 20px; background-color: #3ebe31; }
.bootstrap-table.a .table .fun.btn02a { background-image: url(../images/icon/phone-no.png); background-size: 20px; }
.bootstrap-table.a .table .fun.btn03 { background-image: url(../images/icon/microphone.png); background-size: 20px; }
.bootstrap-table.a .table .fun.btn03a { background-image: url(../images/icon/microphone-no.png); background-size: 20px; }
.bootstrap-table.a .table .fun.off { opacity: .7; }

@media screen and (max-width: 600px) { .bootstrap-table.a .table tbody > tr > td:last-child:before { display: inline-block; } }
.bootstrap-table .table tbody > tr > td .department { font-size: 14px; line-height: 20px; text-align: left; padding: 0; }
.bootstrap-table .table tbody > tr > td .department > div { padding: 5px; margin: 5px 0; background: none; border: 0; border: 1px solid #ccc; border-left: 3px solid #ccc; border-radius: 0; }
.bootstrap-table .table tbody > tr > td .department a { width: auto; height: auto; line-height: 20px; font-size: 14px; margin: 0; display: inline-block; color: #000; text-decoration: underline; }

.bootstrap-table .table tbody > tr > td a.department-btn { display: inline-block; font-size: 12px; width: auto; height: auto; padding: 0 10px; margin: 0 10px; line-height: 20px; border-radius: 3px; background: #20469c; }

.bootstrap-table .table tbody > tr > td a.department-btn i { color: #fff; }

.form > div.a li > p { width: 140px; min-height: 40px; vertical-align: top; }
.form > div.a li > ol, .form > div.a li > span { min-height: 40px; vertical-align: baseline; }

.form > div.a li select, .form > div.a li input { margin-left: -5px; }

.form > div.a ul > li:nth-child(2) { border-top: 1px solid #ddd; padding-top: 20px; }

.form > div ul > li.text-h1 { font-size: 18px; color: #cd3930; width: auto; min-width: 150px; border-bottom: 2px solid #cd3930; padding: 10px; }

@media screen and (max-width: 767px) { .form > div.a li > p { width: 100%; }
  .form > div.a li select { margin-left: 0; } }
.all-dep { width: 100%; float: left; }
.all-dep > li { padding: 5px; width: 100%; float: left; border-bottom: 1px dotted #bbb; }
.all-dep > li:last-child { border: 0; }
.all-dep > li ol { width: 100%; float: left; padding: 5px 0; }
.all-dep > li ol > li { padding: 5px 10px; margin: 5px 0; background: #ddd; }
.all-dep > li ol > li ol > li { border-bottom: 1px solid #bbb; margin: 0; list-style: disc inside; }
.all-dep > li ol > li ol > li:first-child { border-top: 2px solid #bbb; }
.all-dep > li ol > li ol > li:last-child { border: 0; }