/*
* LAYOUT
*/
body {
    background-color: #efefef;
    min-width: 1360px;
    overflow-x: auto;
    overflow-y: scroll;
}

body.stop-scrolling {
    overflow-y: scroll;
}

body.modal-open {
    overflow: hidden;
}

em {
    font-style: normal;
}

#header .navbar-fixed-top {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    min-width: 1360px;
    height: 50px;
    border-bottom: 0;
    box-shadow: 0 2px 4px rgba(33, 33, 33, .2);
    -webkit-box-shadow: 0 2px 4px rgba(33, 33, 33, .2);
    -moz-box-shadow: 0 2px 4px rgba(33, 33, 33, .2);
    -o-box-shadow: 0 2px 4px rgba(33, 33, 33, .2);
    -ms-box-shadow: 0 2px 4px rgba(33, 33, 33, .2);
    background-color: #0f81cf;
}

.navbar-fixed-top .navbar {
    height: 40px;
    background-color: #0f81cf;
    border-radius: 0;
}

.navbar-header {
    height: 100%;
}

.navbar-brand {
    display: flex;
    align-items: center;
    height: 100%;
    line-height: 50px;
    padding: 0 25px;
}

.navbar-brand > img {
    display: inline-block;
    width: 60%;
    height: auto;
    color: #fff;
    vertical-align: middle;
}

.navbar {
    margin-bottom: 0;
    border: none;
}

.navbar-right {
    margin-right: 0;
    padding-right: 15px;
}

.navbar-default .navbar-nav > li > a {
    vertical-align: middle;
    display: inline-block;
}

.navbar-default .navbar-nav > li,
.navbar-default .navbar-nav > li > a,
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:focus,
.navbar-default .navbar-nav > .open > a:hover {
    color: rgba(255, 255, 255, .85);
}

.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:focus,
.navbar-default .navbar-nav > .open > a:hover {
    color: #fff;
    background-color: rgba(0, 0, 0, .15);
}

.navbar-default .navbar-nav > li:before {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    width: 1px;
    height: 10px;
    background-color: rgba(255, 255, 255, 0.6);
    z-index: 1;
    opacity: 0;
}

.navbar-default .navbar-nav > li:first-child:before {
    display: none;
}

.nav > li > a:focus,
.nav > li > a:hover {
    background-color: transparent;
}

.navbar-default .navbar-nav > li > a:focus,
.navbar-default .navbar-nav > li > a:hover {
    color: #fff;
}

.navbar-default .navbar-nav > li > time,
.navbar-default .navbar-nav > li > .user-name {
    display: inline-block;
    padding: 15px;
    line-height: 20px;
    vertical-align: middle;
}

#container {
    position: relative;
    box-sizing: border-box;
    min-width: 100%;
    min-height: 100%;
    padding-top: 50px;
}

.sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 100;
    display: block;
    width: 220px;
    height: 100%;
    padding-top: 50px;
    padding-bottom: 100px;
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: auto;
    background-color: #fff;

    box-shadow: 0 2px 4px rgba(33, 33, 33, .2);
    -webkit-box-shadow: 0 2px 4px rgba(33, 33, 33, .2);
    -moz-box-shadow: 0 2px 4px rgba(33, 33, 33, .2);
    -o-box-shadow: 0 2px 4px rgba(33, 33, 33, .2);
    -ms-box-shadow: 0 2px 4px rgba(33, 33, 33, .2);
}

.nav-sidebar {
    margin: 0;
    padding: 0;
}

.nav-sidebar + .nav-sidebar {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #d6d6d6;
    box-shadow: inset 0 2px 0 0 #f7f7f7;
}

.nav-sidebar li a {
    display: block;
    line-height: 42px;
    min-height: 42px;
    height: auto;
    color: #424242;
    text-decoration: none;
    padding-left: 5px;
    clear: both;
    border-left: 4px solid transparent;
    white-space: nowrap;
}

.nav-sidebar li a i {
    position: relative;
    width: 25px;
    height: 34px;
    line-height: 34px;
    text-align: center;
    top: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.nav-sidebar ul li a {
    padding-left: 42px;
}

.nav-sidebar li a:hover {
    color: #0f81cf;
}

.nav-sidebar li.active > a,
.nav-sidebar li.active .panel-heading > a {
    background-color: #efefef;
    border-left: 4px solid #0f81cf;
}

.nav-sidebar li.active > a:hover,
.nav-sidebar li.active .panel-heading > a:hover {
    color: #424242;
}

.sidebar .manual {
    color: #fff;
    line-height: 42px;
    position: fixed;
    bottom: 50px;
    left: 10px;
    display: block;
    width: 200px;
    height: 42px;
    border-top: 0;
    box-shadow: inset 0 0 0 transparent;
    background-color: #000;
}

.sidebar .manual .fa {
    text-align: center;
    width: 45px;
    height: 34px;
    line-height: 34px;
}

.nav-sidebar .nav-second li a {
    margin-bottom: 1px;
    padding: 0 0 0 45px;
    line-height: 36px;
    min-height: 36px;
}

.sidebar ~ .contents {
    position: relative;
    min-height: 500px;
    padding: 30px 30px 81px 250px;
}

#footer {
    position: fixed;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 1000;
    margin-top: -41px;
    height: 41px;
    border-top: 1px solid #cecece;
    background-color: #2a2725;
}

#footer p {
    padding-right: 20px;
    line-height: 40px;
}

#footer p a {
    color: #fff;
}

/*
* COMMON
*/
.ellipsis {
	display:inline-block;
	text-overflow:ellipsis;
	white-space:nowrap;
	word-wrap:normal;
	max-width:100%;
	overflow:hidden;
 	line-height:1;
}
.ml5 {
    margin-left: 5px;
}

.ml10 {
    margin-left: 10px;
}

.ml15 {
    margin-left: 15px;
}

.mr10 {
    margin-right: 10px;
}

.mt5 {
    margin-top: 5px;
}

.mt10 {
    margin-top: 10px;
}

.mb10 {
    margin-bottom: 10px;
}
.pl20 {
	padding-left:20px !important;
}
.pl10 {
	padding-left:10px !important;
}

.bt {
    border-top: 1px solid #ddd;
}
.bt-none {
    border-top: 0;
}
.c-gray {
	color:#666 !important;
}
.info-desc {
	font-size:12px;
	margin-bottom:3px;
}
.info-desc strong {
	color:red;
}

.icon-new {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-left: 5px;
    border-radius: 50%;
    text-align: center;
    font-size: 9px;
    color: #fff;
    line-height: 16px;
    font-style: normal;
    vertical-align: middle;
    background-color: #f00;
}

.icon-delete {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 10px;
    height: 10px;
    padding: 0;
    border-radius: 50%;
    border: 0;
    background-color: transparent;
}

.icon-delete .fa {
    font-size: 11px;
    vertical-align: top;
}

.row.no-space {
    margin: 0;
}

.row.row-space {
    margin-bottom: 50px;
}

.row-fixed {
    position: sticky;
    top: 50px;
    z-index: 1;
}

.row-fixed .fixed-content {
    background-color: #fafafa;
}

.row-fixed .fixed-utils {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    border-top: 1px dashed #eee;
}

.row-fixed .fixed-content .table-bordered {
    border-top-width: 1px;
}

.no-space .col-xs-9,
.no-space .col-xs-3 {
    padding: 0;
}

.no-gutters {
    margin-right: 0;
    margin-left: 0;
}

.no-gutters > .col,
.no-gutters > [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
}

.col-space {
    margin-left: 5px;
}

dl {
    margin-bottom: 0;
}

dt {
    font-weight: normal;
}

dd {
    font-size: 11px;
    color: #848484;
}

dd > small {
    font-size: 11px;
    color: #848484;
}

.btn,
.form-control {
    font-size: 13px;
}

.form-control {
    border-color: #ddd;
    box-shadow: none;
}

.form-control.bg-warning {
    background-color: #fcf8e3;
}

.form-wrap {
    margin-bottom: 15px;
    padding: 15px;
    border: 1px solid #ddd;
    border-top: none;
    background: #fff;
}

.form-inline .form-group {
    display: inline-block;
    margin-bottom: 0;
    vertical-align: middle
}

.form-inline .form-control {
    display: inline-block;
    width: auto;
    vertical-align: middle
}

.form-inline .form-control-static {
    display: inline-block
}

.form-inline .input-group {
    display: inline-table;
    vertical-align: middle
}

.form-inline .input-group .form-control,
.form-inline .input-group .input-group-addon,
.form-inline .input-group .input-group-btn {
    width: auto
}

.form-inline .input-group > .form-control {
    width: 100%
}

.form-inline .control-label {
    margin-bottom: 0;
    vertical-align: middle
}

.form-inline .checkbox, .form-inline .radio {
    display: inline-block;
    margin-top: 0;
    margin-bottom: 0;
    vertical-align: middle
}

.form-inline .checkbox label, .form-inline .radio label {
    padding-left: 0
}

.form-inline .checkbox input[type=checkbox], .form-inline .radio input[type=radio] {
    position: relative;
    margin-left: 0
}

.form-inline .has-feedback .form-control-feedback {
    top: 0
}

.radio-inline + .radio-inline, .checkbox-inline + .checkbox-inline {
    margin-left: 15px;
}

.checkbox-inline {
    display: inline-flex;
    align-items: center;
}

a,
a:hover,
a:focus {
    color: #0f74ba;
}

.btn {
    border-radius: 0;
}

.btn.btn-space {
    margin-left: 10px;
}

.btn-icon {
    border: 0;
    background-color: transparent;
}

.btn-default {
    border-color: #ddd;
}

.btn-secondary {
    background-color: #333;
    color: #fff;
}

.btn-secondary:hover {
    background-color: #000;
    color: #fff;
}

.btn-default:hover {
    border-color: #ccc;
}

.btn-xs {
	display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 25px;
    height:auto;
    line-height: 16px;
    font-size: 12px;
    white-space:normal;
    word-break:keep-all;
}

.btn .fa ~ span {
    margin-left: 3px;
}

.btn-primary {
    color: #fff;
    background-color: #0f81cf;
    border-color: transparent;
}

.btn-primary.active,
.btn-primary:active,
.btn-primary:hover,
.btn-primary:focus,
.open > .dropdown-toggle.btn-primary {
    color: #fff;
    background-color: #275b89;
}

.btn-bright {
    background-color: #5bc0de;
}

.btn-bright.active,
.btn-bright:active,
.btn-bright:hover,
.btn-bright:focus,
.open > .dropdown-toggle.btn-bright {
    background-color: #3fb0d2;
    border-color: transparent;
}

.btn.disabled,
.btn[disabled],
fieldset[disabled] .btn {
    opacity: .5;
}

label {
    font-weight: normal;
    margin-bottom: 0;
}

.form-control {
    height: 32px;
    border-radius: 0;
}

.form-control.input-sm {
    font-size: 12px;
    height: 22px;
}

textarea {
    width: 100%;
    min-height: 32px;
    padding: 10px;
}

textarea,
textarea.form-control {
    resize: vertical;
}

.input-icon {
    position: relative;
    left: 0;
    display: inline-block;
}

.input-group-full {
    width: 100%;
}

.input-group-addon {
    font-size: 12px;
}

.input-group-addon.non-style {
    padding: 0;
    border: none;
    background-color: transparent;
}

.input-icon > .form-control {
    padding-left: 33px
}

.input-group .input-icon + .input-group-addon {
    border-left: 0;
    border-right: 0;
}

.input-group .input-icon {
    display: table-cell;
}

.input-group.custom-term .txt {
	display:table-cell;
	vertical-align:middle;
	padding-right:10px;
}
.input-group.custom-term .input-icon {
	width:70px;
}

.term-guide {
	position:relative;
	margin:5px 0 0;
	color:#0f74ba;
	line-height:25px;
	padding-left:5px;
}
.term-guide:before {
	content:'*';
	display:inline-block;
	position:absolute;
	top:50%;
	left:0;
	transform: translateY(-40%);
}

.term-guide .form-control {
	display:inline-block;
	width:110px;
	height:25px;
	padding:0;
	background: transparent;
    border: 0 none;
    color: #0f74ba;
    line-height: 25px;
    text-align:center;
    cursor: default;
}

.input-group-btn > .btn {
    height: 32px;
    border-radius: 0;
}
.input-group-btn .black_btn {
    background-color: #333;
    border: 1px solid #333;
    color: #fff;
}
.input-icon > i {
    color: #ccc;
    position: absolute;
    top: 50%;
    left: 8px;
    transform: translateY(-50%);
    width: 16px;
    margin-top: -1px;
    text-align: center;
    z-index: 5;
}

label input[type=checkbox], label span {
    margin-top: 0;
    vertical-align: middle;
}

small {
    margin-left: 5px;
}

.required {
    margin: 0 3px;
    color: red;
}

.box-link {
    margin-bottom: 15px;
}

.input-group.add-url {
    margin-right: 10px;
}

.input-group.add-url > .form-control {
    width: 400px;
}

.fa:before {
    vertical-align: middle;
}

.fa.fa-android {
    color: #a4c639;
}

/*
* LOGIN
*/

.login {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

}

.login .modal-dialog {
    margin: 0;
    max-width: 600px;
}

.modal-content .form-signin {
    max-width: 400px;
    margin: 0 auto;
    text-align: center;
}

.form-signin-heading {
    margin: 0;
}

.form-signin-heading {
    padding: 15px 10px;
}

.form-signin-heading .fa {
    color: #6ebaff;
}

.form-signin .checkbox {
    font-weight: normal;
}

.form-signin .form-control {
    position: relative;
    height: auto;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 10px;
}

.form-signin .form-control:focus {
    z-index: 2;
}

.form-signin .input-group {
    margin-bottom: 15px;
}

.form-map {
    height: 500px;
    border-bottom: 1px solid #ddd;
}

/*
* contents
*/
.page-header,
h1:last-child.page-header {
    margin: 0 0 15px;
    padding: 0;
    border: 0;
    color: rgba(118, 118, 118, 1.0);
    font-weight: normal;
    font-size: 25px;
}

.contents.wide {
    min-width: 2000px;
}

.box {
    margin-bottom: 15px;
    background-color: #fff;
    border-width: 1px 1px 0;
    border-style: solid;
    border-color: #d7d7d7;
}

.box.bordered {
    border-width: 1px;
}

.box.win {
    margin: 15px 0;
    border-width: 1px 0;
}

.widget {
    margin-bottom: 0;
}

.box-search {
    margin: 0 0 10px 0;
    padding: 10px;
    background-color: #fbfbfb;
    border: 1px solid #ccc;
}

.transbar {
    height: 50px;
}

.searchbar .btn-search {
    background-color: #333;
    border: 1px solid #333;
    color: #fff;
}

.searchbar ~ .row .table {
    border-top-width: 1px;
}

.box-search .btn-collapse {
    background-color: #fbfbfb;
    border: 0;
}

.box-search #toggle-filter .row {
    padding-top: 10px;
}

.box-search .checkbox-inline + .form-control {
    margin-left: 10px;
}

.widget-header {
    position: relative;
    height: 34px;
    color: #fff;
    border-color: #45474b;
    background: #4c4f53;
}

.widget-header h2 {
    position: relative;
    display: inline-block;
    width: auto;
    height: 100%;
    margin-left: 10px;
    line-height: 34px;
    font-weight: 400;
    letter-spacing: 0;
    font-size: 14px;
}

.widget h3 {
    padding: 8px 0;
    border-bottom: 1px dashed rgba(0, 0, 0, .2);
    background: #fff;
    font-size: 16px;
    font-weight: 300;
    color: #222;
    margin: 25px 0 20px;
}

.widget-header .form-control {
    height: 32px;
    border: 0;
    border-right: 1px solid #ddd;
    border-radius: 0;
}

.widget-header small {
    display: inline-block;
    margin-left: 10px;
    color: #fff;
}

.widget-header .btn {
    float: right;
    height: 32px;
    padding: 0 12px;
    font-size: 12px;
    line-height: 22px;
    border: 0;
    color: #fff;
    background-color: transparent;
}

.widget-header .btn.collapsed i:before {
    content: '\f078';
}

.widget-header .btn-icon {
    position: absolute;
    right: 0;
    top: 0;
    height: 32px;
    color: #fff;
    background-color: transparent;
}

.widget-body {
    position: relative;
    border: 1px solid #ccc;
    border-top: 0;
}

.widget-body .toolbar {
    position: relative;
    padding: 20px;
    background: #fafafa;
}

.widget-body .toolbar-footer,
.box .box-header,
.box .box-footer {
    background: #fafafa;
    padding: 10px;
    box-shadow: inset 0 1px #fff;
}

.box-header.bordered {
    border-bottom: 1px solid #d7d7d7;
}

.box-footer {
    display: flex;
    flex-wrap: wrap;
    border-bottom: 1px solid #d7d7d7;
}

.box-footer:after {
    content: '';
    clear: both;
}

.box-footer .row {
    display: flex;
    align-items: center;
    width: 100%;
}

.box-footer .row .text-right {
    display: flex;
    justify-content: flex-end;
}

.box-footer .btn + .btn {
    margin-left: 5px;
}

h2.box-header {
    margin: 50px 0 10px;
    font-size: 20px;
    font-weight: 700;
}

h2.box-header:first-of-type {
    margin-top: 0;
}

h3.box-header {
    font-size: 16px;
}

.row h2.box-header {
    margin: 0;
}

.widget-body .toolbar select.form-control {
    max-width: 250px;
}

.box .box-footer .total,
.widget-body .toolbar .total {
    padding-top: 9px;
}

.box .box-footer .total {
    padding-top: 0;
}

.box .box-footer .total p {
    margin-bottom: 0;
}

.box .box-footer .align-center .col-xs-6 {
    display: flex;
}

.box .box-footer .align-center .text-right {
    justify-content: flex-end;
}

.total {
    display: inline-block;
    margin-right: 10px;
}

.total + .form-inline {
    display: inline-block;
}

.widget-footer {
    display: block;
    padding: 7px 14px 15px;
    border-top: 1px solid rgba(0, 0, 0, .1);
    background: rgba(248, 248, 248, .9);
}

.widget-footer .btn {
    height: 31px;
    margin: 10px 0 0 5px;
    padding: 0 22px;
}

.widget .widget {
    margin: 0;
    border: 0;
}

.nav-tabs {
    display: flex;
    margin-bottom: 15px;
    padding: 0;
    list-style: none;
    border-bottom: none;
    background-color: #fff;
}

.nav-tabs li {
    flex: 1;
    position: relative;
    height: 50px;
    margin-bottom: 0;
}

.nav-tabs li a:after {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    background-color: transparent;
    z-index: 1;
}

.nav-tabs li.active a:after,
.nav-tabs li a:hover:after {
    bottom: 0;
    height: 2px;
    background-color: #0f80d0;
}

.nav-tabs li a {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    border-radius: 0;
    padding: 0 15px;
    color: #555;
    border-width: 0;
}

.nav-tabs li a:hover,
.nav-tabs li a:focus,
.nav-tabs li.active a,
.nav-tabs li.active a:hover,
.nav-tabs li.active a:focus {
    background-color: #f2faff;
    color: rgba(0, 0, 0, .8);
    border: 0;
    font-weight: 700;
}

.nav-tabs li.active a:hover,
.nav-tabs li.active a:focus {
    background-color: #eaf7ff;
}

.nav-tabs.nav-pills > li + li {
    margin-left: 0;
}

.modal .nav-tabs {
    margin-bottom: -1px;
}

.nav-pills > li > a,
.nav-pills > li > a:focus,
.nav-pills > li > a:hover {
    background-color: #e5e5e5;
}

.nav-pills > li.active > a,
.nav-pills > li.active > a:focus,
.nav-pills > li.active > a:hover {
    background-color: #fff;
    color: rgba(0, 0, 0, 0.87);
    border-top: 2px solid #0f81cf;
}

.tab-searchbar {
    margin-bottom: 15px;
}

.tab-searchbar .tabmenu {
    margin-bottom: 0;
}

.tab-searchbar .tabmenu > li > a,
.tab-searchbar .tabmenu > li > a:focus,
.tab-searchbar .tabmenu > li > a:hover {
    border-color: #ddd #ddd transparent;
    background-color: #ddd;
}

.tab-searchbar .tabmenu > li.active > a,
.tab-searchbar .tabmenu > li.active > a:focus,
.tab-searchbar .tabmenu > li.active > a:hover {
    background-color: #fff;
    color: rgba(0, 0, 0, 0.87);
    border-top: 2px solid #2952ab;
}

.tab-pane .widget-header {
    display: none;
}

.tab-pane .widget-body {
    border: 0;
}

.table-bordered + .content,
.content + .content,
.content + .table-bordered {
    margin-top: -1px;
    border-top: 0;
}

.searchbar select.form-control {
    min-width: 150px;
    max-width: 100%;
}

.searchbar .form-inline .input-group .form-control.datetimepicker {
    width: 130px;
}

.searchbar .checkbox-inline,
.searchbar .radio-inline {
    margin: 0 5px;
    line-height: 32px;
    font-size: 13px;
}

.searchbar .checkbox input[type=checkbox],
.searchbar .checkbox-inline input[type=checkbox],
.searchbar .radio input[type=radio],
.searchbar .radio-inline input[type=radio] {
    top: 50%;
    transform: translateY(-50%);
    margin-top: 0;
}

.category-1depth,
.category-1depth td {
    background-color: #ebecef;
}

.depth-in .fa-level-up {
    margin-right: 5px;
    transform: rotate(90deg);
    opacity: .6;
}

.depth-in {
    padding-left: 20px;
}

.box-category {
    position: relative;
}

.box-category .btn {
    position: absolute;
    right: 0;
}

.box-category .btn {
    position: absolute;
    right: 0;
    background-color: transparent;
    border: 0;
}

.box-category .btn.fold i:before {
    content: '\f078';
}

.box-progress {
    display: flex;
    width: 100%;
    padding: 10px;
    align-items: center;
    border-bottom: 1px solid #d7d7d7;
}

.box-progress .participant {
    order: 2;
    margin: 0 10px;
}

.box-progress .progress {
    flex: 1;
    margin-bottom: 0;
}

/* table */
.table {
    margin-bottom: 0;
    background-color: #fff;
    table-layout: fixed;
}

.table + .table {
    margin-top: -1px;
}

.table > tbody > tr > td,
.table > tbody > tr > th,
.table > tfoot > tr > td,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > thead > tr > th {
    padding: 5px;
    vertical-align: inherit;
    word-break: break-word;
}

.table th.space-between label {
    float: right;
}

.table th.space-between:after {
    content: '';
    clear: both;
}

.table td {
    position: relative;
    height: 43px;
}

.table td.disabled {
    background-color: #f2f2f2;
}

.table td.checkbox-list {
    padding: 5px 10px 5px 0;
}

.table td.checkbox-list .checkbox-inline {
    margin-left: 10px;
}

.table thead {
    background-color: #eee;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f2f2f2), to(#fafafa));
    background-image: -webkit-linear-gradient(top, #f2f2f2 0, #fafafa 100%);
    font-size: 12px
}

.table thead tr.bordered {
    border-bottom: 1px solid #ddd;
}

.table tr.end .item-status {
    text-decoration: line-through;
}

.table tr.status-open td {
    background-color: #d9edf7;
}

.table tr.status-change td {
    background-color: #f7e5d9;
}

.table tr.status-close td {
    color: #aeaeae;
    background-color: #f5f5f5;
}

.table tr.status-delete td {
    text-decoration: line-through;
    color: #aeaeae;
    background-color: #f5f5f5;
}

.table tr.status-close td a,
.table tr.status-delete td a {
    color: #aeaeae;
}

.table tr td.cancel {
    opacity: .3;
    text-decoration: line-through;
}

.box .horizontal.table-bordered:first-child {
    border-top: 0;
}

.box .horizontal.table-bordered:first-child tr:first-child th,
.box .horizontal.table-bordered:first-child tr:first-child td {
    border-top: 0;
}

table.table-bordered {
    border-left: 0;
    border-right: 0;
}

table.table-bordered thead td,
table.table-bordered thead th {
    border-left-width: 0;
    border-top-width: 0
}

table.table-bordered tbody tr:first-child td,
table.table-bordered tbody tr:first-child th {
    border-top-width: 0;
}

table.table-bordered tbody td,
table.table-bordered tbody th,
table.table-bordered tfoot td,
table.table-bordered tfoot th {
    border-left-width: 0;
    border-bottom-width: 0;
    word-break: break-word;
}

.table-bordered > thead > tr > th,
.table-bordered > thead > tr > td {
    border-bottom-width: 1px;
}

table.table-bordered td:last-child,
table.table-bordered th:last-child {
    border-right-width: 0
}

.table.vertical thead th {
    text-align: center;
}

.table.vertical tfoot td,
.table.vertical tfoot th {
    font-weight: bold;
    background: #f5f5f5;
    text-align: center;
}

.table.vertical tbody tr th {
    text-align: center;
}

.table.vertical tbody tr th strong {
    font-weight: bold;
}

.table.vertical thead tr th,
.table.vertical tbody tr td {
    text-align: center;
    height: 40px;

}

.table.vertical tbody tr td.text-left {
    text-align: left;
}

.table.vertical tbody tr td.text-right {
    text-align: right;
}

.table.vertical tbody tr.end td,
.table.vertical tbody tr.end td a {
    color: #d7d7d7;
}

.table.horizontal tbody th {
    font-size: 12px;
}

.table > tbody > tr:hover {
    background-color: #ecf3f8
}

.table.horizontal > tbody > tr:hover {
    background-color: #fff;
}

.table.horizontal > tbody > tr > th {
    background-color: #fafafa;
}

.table.horizontal > tbody > tr > th.th-emphasis {
    background-color: #cfe4f3;
    color: #194a6a;
}

.table.horizontal > tbody > tr > th.th-emphasis ~ td {
    background-color: #f1f7fb;
}

.table-fixed {
    background-color: #eee;
    background-image: -webkit-linear-gradient(top, #f2f2f2 0, #fafafa 20%);
    border-bottom: 1px solid #eee;
}

.table-fixed thead {
    width: 98%;
}

.table-fixed tbody {
    width: 100%;
    height: 400px;
    background-color: #fff;
    overflow-y: auto;
}

.table-fixed thead,
.table-fixed tbody,
.table-fixed tr,
.table-fixed td,
.table-fixed th {
    display: block;
}

.table-fixed tbody td,
.table-fixed thead > tr > th {
    float: left;
    border-bottom-width: 0;
}

.table-fixed thead > tr > th.header {
    position: relative;
}

.table-fixed tr:after {
    content: '';
    display: block;
    clear: both;
}

.table.vertical.table-fixed tbody td {
    min-height: 32px;
    /* 	line-height: 32px; */
}

.table-fixed tbody tr {
    display: table;
    width: 100%;
}

.table-fixed tbody td {
    float: none;
}

.table-scroll {
    max-height: 300px;
    overflow-y: auto;
}

.table-scroll.full {
    max-height: 600px;
}

.table-scroll .table {
    border-bottom-width: 0;
}

.table .empty {
    clear: both;
    width: 100%;
    text-align: center;
}

table.table-location th[rowspan] {
    border-right: 1px solid #ddd;
}

.box table.table-bordered.table-location tr:first-child th[rowspan] {
    border-top: 1px solid #ddd;
}

.box .table-bordered {
    border-top-width: 0;
}

.tr-selected,
.tr-selected > td,
.tr-selected > th {
    background-color: #cfe4f3;
}

.table > tbody > tr.tr-selected:hover,
.tr-selected:hover > td,
.tr-selected:hover > th {
    background-color: #cfe4f3;
}

.table.underline, .bt-border {
	border-bottom:1px solid #d7d7d7 !important;
}

.custom-checkbox {
    display: inline-block;
    height: 32px;
    color: #333;
    vertical-align: middle;
    border-radius: 2px;
    background-color: #fff;
}

.custom-checkbox label {
    display: inline-block;
    height: 100%;
    font-size: 13px;
    padding: 0 12px;
    line-height: 30px;
    cursor: pointer;
    vertical-align: top;
    user-select: none;
    border: 1px solid #ccc;
}

.custom-checkbox input[type="checkbox"]:checked + label {
    color: #fff;
    border: 1px solid #0f81cf;
    background-color: #0f81cf;
}

.custom-checkbox label .fa-square-o {
    width: 13px;
    height: 13px;
    margin-right: 3px;
    text-align: center;
}

.custom-checkbox input[type="checkbox"]:checked + label .fa-square-o:before {
    content: "\f046";
}

/* switch */
.onoffswitch + .btns,
.onoffswitch ~ .btn {
    margin-top: 5px;
}

.onoffswitch {
    display: inline-block;
    vertical-align: middle;
    height: 23px;
}

.onoffswitch.block {
    display: block;
}

.onoffswitch-checkbox {
    position: absolute;
    left: 2px;
    z-index: -1;
    opacity: 0;
    filter: Alpha(Opacity=0);
}

.onoffswitch-label {
    position: relative;
    text-align: center;
}

.onoffswitch-label .inner {
    position: relative;
    width: 52px;
    height: 23px;
    display: inline-block;
    margin-bottom: 0;
    overflow: hidden;
    cursor: pointer;
    border-radius: 23px;
    background-color: #ccc;
}

.onoffswitch-label .inner:before,
.onoffswitch-label .inner:after {
    display: block;
    float: left;
    width: 50%;
    padding: 0;
    line-height: 23px;
    font-size: 10px;
    font-weight: bold;
    color: #fff;
    box-sizing: border-box;
    font-style: normal;
}

.onoffswitch-label .inner:before {
    content: "ON";
}

.onoffswitch-label .inner:after {
    content: "OFF";
    margin-left: -1px;
}

.onoffswitch-label .switch {
    display: block;
    width: 24px;
    height: 19px;
    background-color: #fff;
    border-radius: 19px;
    position: absolute;
    top: 2px;
    left: 2px;
    transition: all 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
    transform: translateX(0px);
    cursor: pointer;
}

.onoffswitch-checkbox:checked ~ .onoffswitch-label .inner {
    background-color: #0f81cf;
}

.onoffswitch-checkbox:checked ~ .onoffswitch-label .switch {
    transform: translateX(24px);
}

.reservation-check {
    display: inline-block;
    min-height: 32px;
    line-height: 32px;
    margin-right: 10px;
}

.reservation-check input[type=checkbox],
.reservation-check input[type=radio] {
    margin-top: 9px;
}

/* pagination */
.pagination {
    margin: 5px 0 0;
}

.pagination > li > a,
.pagination > li > span {
    color: #0f81cf;
}

.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus {
    background-color: #0f81cf;
    border-color: #0f81cf;
}

.box-footer .pagination {
    margin-top: 0;
}

.thumbnail {
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 0;
}

.thumbnail img {
    max-height: 40px;
}

.thumbnail img[src=""] {
    width: 40px;
    height: 40px;
    background: url('../images/common/logo_atomy.png') no-repeat center center/70% auto;
}

.ui.fluid.multiple.search.selection.dropdown {
    border-radius: 0;
}

.dropzone {
    min-height: 60px;
    position: relative;
    padding: 10px;
    border: 1px dashed rgba(0, 0, 0, 0.3);
}

.dropzone .dz-message {
    margin: 1em 0;
}

.dropzone .btn-delete {
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1000;
    cursor: pointer;
}

.dropzone .btn-delete:active {
    left: auto;
}

.dropzone .image-wrap {
    position: relative;
    display: inline-block;
    max-width: 250px;
    padding: 5px;
    box-sizing: border-box;
}

.dropzone .image-wrap .btn-remove {
    color: #721c24;
    font-size: 28px;
    position: absolute;
    top: -5px;
    right: -5px;
    width: 26px;
    height: 28px;
    padding: 0;
}

.dropzone .image-wrap .btn-remove:before {
    content: '';
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: #fff;
    border-radius: 50%;
}

.dropzone .image-wrap .btn-remove:before,
.dropzone .image-wrap .btn-remove .fa {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}

.dropzone img,
.dropzone .dz-preview .dz-image img {
    max-width: 100%;
}

.wrap-image {
    text-align: center;
}

.wrap-image img {
    max-width: 100%;
}

.cke_editable {
    min-height: 200px;
}

.cke_editable img {
    max-width: 100%;
}

.bootstrap-tagsinput {
    width: 100%;
    border-radius: 0;
}

.list-group {
    list-style: none;
    margin-bottom: 0;
}

.select-category .form-inline {
    display: table;
    width: 50%;
}

.select-category .form-inline > span {
    display: table-cell;
    padding-right: 2px;
}

.select-category .form-inline > span.buttons {
    width: 1%;
    padding-right: 0;
}

.select-category .form-inline select.form-control {
    width: 100%;
}

.list-category-select {
    max-width: 50%;
}

.list-category-select select.form-control {
    min-width: 150px;
}

.list-group li {
    margin-top: 10px;
}

.list-group li:first-child {
    margin-top: 0;
}

.list-category-select li + li .input-group {
    margin-top: 2px;
}

.comments .comment {
    border-top: 15px solid #efefef;
}

.comments .comment:first-child {
    border-top: none;
}

.sticky {
    position: sticky;
    top: 0;
    z-index: 1;
}

.sticky-vod {
    top: 90px;
}

.split .row {
    margin: 0;
}

.split .col-left {
    float: left;
    width: 25%;
}

.split .col-right {
    width: 75%;
    float: right;
}

.btns {
    margin: -2px 0;
}

.btns .btn {
    margin: 2px 0;
}

.btns-position {
    font: 0/0 a;
    width: 68px;
}

.btns-position p {
    font-size: 11px;
    line-height: 1.5;
    margin-top: 3px;
}

.btns-position p input {
    vertical-align: middle;
    margin-top: -2px;
}

.btns-position .btn {
    margin: -1px;
    border-radius: 0;
}

.btns-position .btn.active {
    color: #fff;
    background-color: #3276b1;
    border-color: #2c699d;
}

.bootstrap-tagsinput .tag {
    padding: 1px 4px;
    font-weight: normal;
    font-size: 100%;
}

.content-video {
    margin: 0;
}

.content-video .col-xs-4 {
    position: sticky;
    top: 60px;
    padding: 0 0 0 10px
}

.content-video .col-xs-8 {
    padding: 0;
}

.wrap-player {
    text-align: center;
    padding: 10px;
    background-color: #efefef;
}

.player {
    position: relative;
    padding-top: 56.25%;
}

.player .btn-search {
    color: #ccc;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border: 3px dashed #ccc;
    background-color: #efefef;
}

.player .btn-search:after {
    content: '\f03d';
    color: #ddd;
    font: normal normal normal 70px/2 FontAwesome;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
}

.player .video,
.player #video {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.player.active-video .video,
.player.active-video #video {
    z-index: 1;
}

.player.active-video .btn-search {
    z-index: 2;
    bottom: auto;
    left: auto;
    right: 10px;
    top: 10px;
    color: #fff;
    text-shadow: 0 0 5px #000;
    background-color: rgba(255, 255, 255, 0.7);
    border-style: solid;
}

.player.active-video .btn-search:after {
    display: none;
}

.player .video-player {
    width: 100%;
    height: 100%;
}

.player .vjs-big-play-button {
    display: none;
}

.player .vjs-control-bar {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    opacity: 1;
}

.video-js .vjs-time-tooltip,
.video-js .vjs-mouse-display:after,
.video-js .vjs-play-progress:after,
.video-js .vjs-progress-control .vjs-mouse-display {
    white-space: nowrap;
}

.box-scroll {
    height: 200px;
    overflow-y: scroll;
    border: 1px solid #ccc;
}

.guide-main {
    margin: 0 auto;
    max-width: 50%;
}

.guide-main .item {
    position: relative;
    display: block;
    margin: 10px;
}

.guide-main a:before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    display: block;
    border: 4px solid #999;
    background-color: rgba(0, 0, 0, 0.3);
}

.guide-main a:after {
    content: attr(title);
    color: #fff;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    transform: translate(-50%, -50%);
}

.guide-main img {
    width: 100%;
    filter: blur(2px);
    transition: all 0.3s;
}

.guide-main a:hover {
    z-index: 5;
    transition: all 0.3s;
    transform: scale(1.15);
}

.guide-main a:hover:before {
    transition: all 0.3s;
    background-color: rgba(0, 0, 0, 0);
}

.guide-main a:hover:after {
    color: rgba(255, 255, 255, 0);
    transition: all 0.3s;
}

.guide-main a:hover img {
    filter: blur(0);
}

.item-type {
    font-size: 20px;
    color: #848484;
}

.item-status {
    display: inline-block;
    margin: 0 10px;
    visibility: visible;
}

.item-status > span {
    font: 0/0 a;
}

.item-status:before {
    content: ' ';
    display: inline-block;
    width: 10px;
    height: 10px;
    margin: 0 2px;
    border-radius: 5px;
    box-shadow: 0 0.08em 0.15em -0.1em rgba(0, 0, 0, 0.5) inset
}

.item-status.ing:before {
    background: linear-gradient(rgba(0, 0, 0, 0.07), rgba(255, 255, 255, 0.1)), #7ad4f5;
}

.item-status.invisible:before {
    background: linear-gradient(rgba(0, 0, 0, 0.07), rgba(255, 255, 255, 0.1)), #ddd;
}

.item-status.reservation:before {
    background: linear-gradient(rgba(0, 0, 0, 0.07), rgba(255, 255, 255, 0.1)), #FFC107;
}

.item-status.deadline:before {
    background: linear-gradient(rgba(0, 0, 0, 0.07), rgba(255, 255, 255, 0.1)), #ff4207;
}

.item-status.end:before {
    background: linear-gradient(rgba(0, 0, 0, 0.07), rgba(255, 255, 255, 0.1)), #ddd;
}

.item-status.end {
    text-decoration: line-through;
}

.item-status.invisible {
    color: #d7d7d7;
}

.item-status.end.invisible {
    text-decoration: line-through;
    color: #d7d7d7;
}

.item-status.none:before {
    background: linear-gradient(rgba(0, 0, 0, 0.07), rgba(255, 255, 255, 0.1)), #bdb5e6;
}

.item-status.assigning:before {
    background: linear-gradient(rgba(0, 0, 0, 0.07), rgba(255, 255, 255, 0.1)), #a7d9f2;
}

.item-status.assigned:before {
    background: linear-gradient(rgba(0, 0, 0, 0.07), rgba(255, 255, 255, 0.1)), #a3e3c4;
}

.item-status.feedback:before {
    background: linear-gradient(rgba(0, 0, 0, 0.07), rgba(255, 255, 255, 0.1)), #f0ef9e;
}

.item-status.confirmed_wait_last:before {
    background: linear-gradient(rgba(0, 0, 0, 0.07), rgba(255, 255, 255, 0.1)), #edb5a1;
}

.item-status.confirmed:before {
    background: linear-gradient(rgba(0, 0, 0, 0.07), rgba(255, 255, 255, 0.1)), #f2845c;
}

.guide {
    display: inline-block;
}

.guide .item-status {
    font-size: 13px;
    color: rgba(0, 0, 0, .87);
}

.user-grade {
    display: inline-block;
    height: 20px;
    margin-top: -3px;
    line-height: 20px;
    text-align: center;
    font-size: 10px;
    vertical-align: middle;
    white-space: nowrap;
    background-color: transparent;
    overflow: hidden;
    border-radius: 10px;
}

.user-grade + .user-grade {
    margin-left: 5px;
}

.dropzone .dz-preview .dz-image {
    border-radius: 0;
}

.add-thumbnail .dropzone {
    width: 372px;
    height: 218px;
}

.add-thumbnail .dropzone .dz-preview .dz-image {
    width: 100%;
    height: 100%;
}

.add-thumbnail .dropzone .dz-preview .dz-image img {
    max-height: 198px;
}

.add-thumbnail .dropzone .dz-preview {
    margin: 0;
}

.form-time .form-control {
    width: 30px;
    padding: 0;
    text-align: center;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0;
}

.btn-delete,
.btn-reverse {
    margin: 0 10px;
}

.btn-confirm {
    margin-left: 10px;
}

.video-content {
    margin-top: -1px;
    border-top: 0;
}

.table-bordered.vod-area {
    border: 0;
}

.tab-pane .toolbar {
    padding: 20px;
    background-color: #fff;
}

#tab-chapter .table > tbody > tr:hover {
    background-color: transparent;
}

hr.split {
    margin: 0 -1px;
    padding: 10px 0;
    background-color: #efefef;
}

.btn-sticky {
    margin: 5px 0;
    transition: all 0.3s;
}

.btn-sticky .btn-delete {
    margin-left: 0;
}

.active-sticky {
    position: fixed;
    top: 55px;
    right: 30px;
    left: 250px;
    z-index: 50;
    padding: 5px;
    border-radius: 3px;
    border: 1px solid rgba(204, 204, 204, 0.8);
    background-color: rgba(248, 248, 248, 0.8);
    box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.25);
}

.active-sticky .input-eng {
    float: left;
}

#videoContent:not(.hidden) ~ #product {
    display: none;
}

.help-block {
    font-size: 12px;
    margin-bottom: 0;
}

span.help-block {
    display: inline-block;
    margin-left: 10px;
    margin-bottom: 5px;
    vertical-align: middle;
}

.media-detail {
    position: relative;
}

.media-detail .nav-tabs {
    margin-bottom: 10px;
}

.media-detail .toolbar-header {
    padding: 0;
}

.media-detail .toolbar-header .text-right {
    height: 0;
}

.media-detail .toolbar-header .btn {
    margin-top: -85px;
}

.media-detail .table tbody tr td {
    text-align: left;
    word-break: break-all;
}

.media-detail .btn-delete {
    margin-left: 0;
}

.media-detail .table tbody tr td.text-center {
    text-align: center;
}

.media-detail .table thead th {
    white-space: nowrap;
}

.box-add {
    padding: 10px 0;
}

.accordion-head td {
    background-color: #cfe4f3;
}

.table tbody tr.accordion-body > td {
    padding: 0;
}

.table tbody tr.accordion-body > td:hover {
    background-color: #fff;
}

.accordion-body .content-video {
    padding: 10px;
    border: 5px solid #cfe4f3;
    border-top: none;
    box-sizing: border-box;
}

.sortable {
    table-layout: fixed;
}

th.header {
    position: relative;
}

th.header:after {
    content: '\f0dc';
    position: absolute;
    right: 15px;
    top: 10px;
    font: normal normal normal 14px/1 FontAwesome;
}

th.header.sort:after {
    top: 13px;
    right: 4px;
    font-size: 12px;
}

.tablesorter .header[data-sort="asc"]:after {
    content: '\f0dd';
}

.tablesorter .header[data-sort="desc"]:after {
    content: '\f0de';
}

th.headerSortUp:after {
    content: '\f0dd';
}

th.headerSortDown:after {
    content: '\f0de';
}

.bootstrap-tagsinput input {
    min-width: 60px;
}

.sa-button-container .btn,
.sa-confirm-button-container .btn {
    min-width: 80px;
}

.loader {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(255, 255, 255, 0.3);
}

.loader .inner {
    width: 0;
    height: 0;
    margin: 0 auto;
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 1000;
}

.loader span {
    width: 6px;
    height: 20px;
    position: absolute;
    left: -10px;
    bottom: 15px;
    border-radius: 5px;
    transform-origin: 10px 35px;
    transform: rotate(0deg);
    animation: loader 0.8s infinite;
}

.loader span:nth-child(2) {
    transform: rotate(45deg);
    animation-delay: 0.1s;
}

.loader span:nth-child(3) {
    transform: rotate(90deg);
    animation-delay: 0.2s;
}

.loader span:nth-child(4) {
    transform: rotate(135deg);
    animation-delay: 0.3s;
}

.loader span:nth-child(5) {
    transform: rotate(180deg);
    animation-delay: 0.4s;
}

.loader span:nth-child(6) {
    transform: rotate(225deg);
    animation-delay: 0.5s;
}

.loader span:nth-child(7) {
    transform: rotate(270deg);
    animation-delay: 0.6s;
}

.loader span:nth-child(8) {
    transform: rotate(315deg);
    animation-delay: 0.7s;
}

@keyframes loader {
    0% {
        background: transparent;
        left: -10px;
        transform-origin: 10px 35px;
    }
    30% {
        background: #000;
    }
    100% {
        background: transparent;
        left: 10px;
        transform-origin: -10px 35px;
    }
}

.list-auth,
.list-admin {
    text-align: left;
}

.list-admin li,
.list-auth li {
    display: inline-block;
    margin: 2px;
    padding: 5px 0;

}

.list-auth li {
    padding: 5px 10px;
}

.list-admin li div {
    display: inline-table;

}

.list-admin li div span {
    display: table-cell;
    text-align: center;
    padding: 0 10px;
}

.thumbnail-list {
    text-align: left;
    display: table;
    table-layout: fixed;
    width: 100%;
    margin-bottom: 15px;
}

.thumbnail-list .box-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    width: 100%;
    height: auto;
}

.thumbnail-list ul,
.thumbnail-list li {
    list-style: none;
    margin: 0;
    padding: 0;
}

.thumbnail-list .box-scroll {
    white-space: nowrap;
}

.thumbnail-list li {
    vertical-align: top;
    display: inline-block;
    margin: 5px;
    border: 1px solid #f2f2f2;
}

.thumbnail-list li a {
    display: block;
    height: 108px;
}

.thumbnail-list li a img {
    height: 100%;
}

.visitors {
    margin-bottom: 15px;
}

.visitors:after {
    content: '';
    display: block;
    clear: both;
}

.visitors .today {
    float: left;
}

.visitors .yesterday {
    float: left;
    margin-left: 20px;
}

.visitors .col {
    float: left;
    width: 150px;
    padding: 8px 10px;
    text-align: center;
    border: 1px solid #ddd;
}

.visitors .col-txt {
    background-color: #fafafa;
}

.visitors .col-num {
    margin-left: -1px;
    font-weight: bold;
    background-color: #fff;
}

.con-result {
    padding: 25px;
    border: 1px solid #ddd;
    background: #fff;
}

.con-result .period {
    float: left;
}

.con-result .total {
    float: right;
}

.con-result .total strong {
    font-size: 16px;
}

.con-result .graph {
    clear: both;
    width: 100%;
}

.widget-card {
    margin-bottom: 30px;
}

.widget-card .card {
    padding: 10px 0;
    height: 100%;
}

.widget-card .card .card-body a {
    display: block;
    padding: 20px 10px;
    color: #fff;
}

.widget-card .card strong,
.widget-card .card p {
    font-weight: normal;
    margin: 0;
}

.widget-card .card p {
    font-size: 12px;
    margin-top: 10px;
}

.widget-card .card strong {
    font-size: 25px;
}

.blue-bg {
    background: #3a86c8;
}

.green-bg {
    background: #3eb15b
}

.red-bg {
    background: #ea423f
}

.dark-red-bg {
    background: #f35454
}

.blue-bg {
    background: #3a86c8
}

.yellow-bg {
    background: #ffb400
}

.mustard-bg {
    background: #e3b442
}

.pink-bg {
    background: #F782AA
}

.brown-bg {
    background: #8f6e5a
}

.light-green-bg {
    background: #aed048
}

.violet-bg {
    background: #c38fbb
}

.teal-bg {
    background: #47BCC7
}

.orange-bg {
    background: #ed6d49
}

.grey-bg {
    background: #4d4d4d
}

.dark-grey-bg {
    background: #333
}

.fb-bg {
    background: #3B5998
}

.tw-bg {
    background: #688dab
}

.purple-bg {
    background: #500776
}


.panel-group .panel,
.panel-heading {
    padding: 0;
    border-radius: 0;
}

.panel {
    /* box-shadow: 0 2px 1px rgba(0,0,0,.05); */
    margin-bottom: 0;
    box-shadow: none;
}

.panel-group .panel + .panel {
    margin-top: 20px;
}

.panel-default > .panel-heading {
    position: relative;
    background-color: #C9C9C9;
    border-color: #ddd;
}

.panel-title {
    font-size: 14px;
    font-weight: bold;
}

.panel-title a {
    display: block;
}

.panel-title a:after {
    content: '\f077';
    position: absolute;
    right: 15px;
    top: 11px;
    display: block;
    font: normal normal normal 14px/1 FontAwesome;
}

.panel-title a.collapsed:after {
    content: '\f078';
    position: absolute;
    display: block;
}

.panel-heading .result {
    position: absolute;
    right: 40px;
    top: 10px;
}

.panel-body {
    word-break: keep-all;
    line-height: 1.6;
}

.vow {
    padding: 20px 0;
}

.vow .form-group {
    margin: 20px 0 0;
}

.vow .form-group .form-control {
    margin: 5px 0;
}

.vow .detail {
    display: inline-block;
    padding: 0 5px;
    font-weight: 700;
    line-height: 2;
    color: #337ab7;
    border-bottom: 1px solid #020202;
}

.signature {
    margin-top: 20px;
}

.signature .user-name {
    display: inline-block;
    margin-left: 10px;
    font-size: 20px;
}

.stepwizard-row {
    position: relative;
    display: table;
    width: 100%;
    margin: 0 auto 20px;
    padding: 0;
    table-layout: fixed;
    background-color: #fff;
    border: 1px solid #ddd;
}

.stepwizard-step {
    position: relative;
    display: table-cell;
    height: 40px;
    text-align: center;
    list-style: none;
}

.stepwizard-step:before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 20px 0 20px 15px;
    border-color: transparent transparent transparent #fff;
}

.stepwizard-step.active:after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 100%;
    z-index: 2;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 20px 0 20px 15px;
    border-color: transparent transparent transparent #0f81cf;
}

.stepwizard-step:first-child:before,
.stepwizard-step:last-child.active:after {
    display: none;
}

.stepwizard-step a {
    position: relative;
    z-index: 2;
    display: block;
    width: 100%;
    height: 100%;
    line-height: 40px;
    color: rgba(0, 0, 0, .87);
}

.stepwizard-step a:hover {
    text-decoration: none;
}

.stepwizard-step a:hover strong {
    text-decoration: underline;
}

.stepwizard-step a.disabled {
    cursor: default;
    background-color: #ececec;
}

.stepwizard-step span {
    display: inline-block;
    width: 25px;
    height: 25px;
    font-size: 15px;
    font-weight: bold;
    line-height: 25px;
    vertical-align: middle;
    background-color: #fff;
    margin: -2px 5px 0 0;
    border-radius: 50%;
}

.stepwizard-step.active {
    color: #fff;
    background-color: #0f81cf;
}

.stepwizard-step.active a {
    color: #fff;
}

.stepwizard-step.active a:after {
    content: '';
    position: absolute;
}

.stepwizard-step.active span {
    color: #0f81cf;
}

.user-image {
    border-top: 1px solid #ddd;
    border-right: 1px solid #ddd;
    height: 112px;
    box-sizing: border-box;
    text-align: center;
}

.user-image:after {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

.user-image img {
    max-width: 100%;
    max-height: 100%;
    vertical-align: middle;
}

.list-image {
    display: table;
    width: 100%;
    table-layout: fixed;
    margin: 0;
    padding: 0;
}

.list-image li {
    display: table-cell;
    width: 20%;
    padding: 10px;
    box-sizing: border-box;
}

.list-image li a {
    display: block;
    width: 100%;
    height: 100%;
    border: 1px solid #ccc;
    padding: 3px;
}

.list-image li img {
    width: 100%;
}

.list-question li {
    margin: 5px 0;
}

.list-question li .fa {
    margin-top: 2px;
}

.list-question li .fa-check-square {
    color: #2952ab;
}

.list-question .unchecked,
.list-question li .fa-square,
.list-question li .fa-square + span {
    color: #a94442;
}

.file-list {
    margin: 0;
    padding: 0;
}

.file-list,
.file-list li {
    list-style: none;
}

.file-list li a {
    color: #555;
}

.file-list li button {
    background-color: transparent;
    border-color: transparent;
}

.error-wrapper {
    padding-top: 100px;
    font-size: 15px;
    color: #555;
}

.error-wrapper strong {
    font-size: 25px;
}

.error-wrapper .fa {
    display: inline-block;
    width: 100px;
    height: 100px;
    margin-bottom: 20px;
    font-size: 80px;
}

.error-wrapper .fa:before {
    vertical-align: middle;
}

.error-wrapper .fa:after {
    content: '';
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}

.calendar {
    display: inline-block;
    vertical-align: middle;
}

.ui-datepicker {
    z-index: 10 !important;
}

.ui-datepicker .ui-datepicker-month {
    height: 25px;
}

.ui-datepicker .ui-icon {
    text-indent: 0;
}

.ui-datepicker .ui-datepicker-prev-hover,
.ui-datepicker .ui-datepicker-next-hover {
    top: 2px;
    cursor: pointer;
}

.ui-datepicker .ui-datepicker-prev-hover {
    left: 2px;
}

.ui-datepicker .ui-datepicker-next-hover {
    right: 2px;
}

.ui-datepicker .ui-datepicker-prev span,
.ui-datepicker .ui-datepicker-next span {
    text-align: center;
}

.ui-datepicker .ui-datepicker-prev span:before,
.ui-datepicker .ui-datepicker-next span:before {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome !important;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.ui-datepicker .ui-datepicker-prev span:before {
    content: '\f053';
}

.ui-datepicker .ui-datepicker-next span:before {
    content: '\f054';
}

.ui-timepicker-container.bottom {
    top: auto;
    bottom: -20px;
}

.ui-sortable-handle, .drag {
    cursor: move;
}

.daterangepicker td.active,
.daterangepicker td.active:hover {
    background-color: #0f81cf;
}

.grade {
    margin-bottom: 0;
}

.grade li {
    margin-top: 5px;
}

.grade label {
    display: inline-block;
    width: 130px;
    margin-right: 3px;
}

.grade input {
    width: 70px;
}

.grade--choice label {
    width: 100%;
}

.grade--choice input[type="radio"], .grade--choice input[type="checkbox"] {
    width: auto;
}

.schedule-box {
    padding: 15px 0 5px;
    border-top: 1px dashed #ddd;
}

.schedule-box:first-child {
    padding-top: 5px;
    border-top: none;
}

.schedule-box .schedule-date:after {
    content: '';
    clear: both;
    display: block;
}

.schedule-box .schedule-time {
    list-style: none;
}

.schedule-box .schedule-time li {
    padding-top: 10px;
}

.box.schedule:first-of-type {
    border-top: 1px solid #d7d7d7;
}

/* jcf style */
.jcf-button {
    display: inline-block;
    vertical-align: top;
    position: relative;
    overflow: hidden;
    border: 1px solid #777;
    background: #fff;
    margin: 0 10px 10px 0;
    padding: 5px 10px;
}

.jcf-button .jcf-real-element {
    position: absolute;
    min-height: 100%;
    min-width: 100%;
    outline: none;
    opacity: 0;
    padding: 0;
    margin: 0;
    border: 0;
    bottom: 0;
    right: 0;
    left: 0;
    top: 0;
}

.jcf-number {
    display: inline-block;
    position: relative;
    height: 32px;
}

.jcf-number input {
    -moz-appearance: textfield;
}

.jcf-number input::-webkit-inner-spin-button,
.jcf-number input::-webkit-outer-spin-button {
    -webkit-appearance: none;
}

.jcf-number input {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 3px 27px 3px 7px;
    margin: 0;
    height: 100%;
}

.jcf-number .jcf-btn-dec,
.jcf-number .jcf-btn-inc {
    position: absolute;
    background: #eee;
    width: 20px;
    height: 15px;
    right: 1px;
    top: 1px;
}

.jcf-number .jcf-btn-dec {
    top: auto;
    bottom: 1px;
}

.jcf-number .jcf-btn-dec:hover,
.jcf-number .jcf-btn-inc:hover {
    background: #ccc;
}

.jcf-number.jcf-disabled .jcf-btn-dec:hover,
.jcf-number.jcf-disabled .jcf-btn-inc:hover {
    background: #ccc;
}

.jcf-number .jcf-btn-dec:before,
.jcf-number .jcf-btn-inc:before {
    position: absolute;
    content: '';
    width: 0;
    height: 0;
    top: 50%;
    left: 50%;
    margin: -6px 0 0 -4px;
    border-width: 4px;
    border-style: solid;
    border-color: transparent transparent #000 transparent;
}

.jcf-number .jcf-btn-dec:before {
    margin: -1px 0 0 -4px;
    border-color: #000 transparent transparent transparent;
}

.jcf-number.jcf-disabled .jcf-btn-dec:before,
.jcf-number.jcf-disabled .jcf-btn-inc:before,
.jcf-number .jcf-btn-dec.jcf-disabled:before,
.jcf-number .jcf-btn-inc.jcf-disabled:before {
    opacity: 0.3;
}

.jcf-number.jcf-disabled input {
    background: #ddd;
}

.jcf-disabled {
    background: #ddd !important;
}


.no-required-file {
    position: relative;
    display: inline-block;
    padding: 5px;
    border: 1px dashed #ccc;
}

.no-required-file input[type="file"] {
    display: inline-block;
    vertical-align: middle;
}

.no-required-file .btn-remove {
    display: none;
}

.is-file .btn-remove {
    display: inline-block;
    margin-left: 5px;
    vertical-align: middle;
}

.is-file .btn-remove i {
    color: #d43f3a;
}

.no-required-file .form-file {
    opacity: 0;
    -webkit-appearance: none;
}

.no-required-file .form-file ~ label {
    position: absolute;
    top: 5px;
    left: 5px;
    padding: 0 5px;
    line-height: 20px;
    border: 1px solid #ccc;
    font-size: 11px;
}

.img-list {
    margin-top: 10px;
    padding: 20px;
    border: 1px dashed #ccc;
    border-radius: 3px;
}

.img-list li {
    position: relative;
    display: inline-block;
    margin: 0 10px;
    padding-bottom: 20px;
    text-align: center;
}

.img-list li input[type="radio"] {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
}

.img-list label {
    display: block;
    width: 100px;
    height: 100px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    cursor: pointer;
}

.img-list label > span {
    white-space: normal;
    vertical-align: middle;
}

.img-list label > span:after {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

.img-list label img {
    max-width: 100%;
    max-height: 100%;
}

.img-list li input[type="radio"]:checked + label {
    background-color: #eee;
}

div#image {
    border-top: 1px solid #ddd;
}

@media (min-width: 768px) {
    .modal-dialog {
        width: 1024px;
    }

    .modal-dialog.wide {
        width: 1600px;
    }

    #add-admin .modal-dialog,
    #add-country .modal-dialog,
    #product-srch .modal-dialog,
    #seminar-copy .modal-dialog,
    #manage-detail .modal-dialog,
    #instructor-srch .modal-dialog,
    .modal-dialog.narrow {
        width: 700px;
    }

}

.received-quantity.form-inline .form-control {
    width: 55px;
}


#teacherList img,
#productChoiceList img {
    max-width: 100%;
    max-height: 100%;
}

.modal-transperfact .modal-body {
    background-color: #f5f5f5;
}

.modal-transperfact .box {
    background-color: #f5f5f5;
    border: 0;
}

.modal-transperfact .content {
    border-top: 0;
}

.modal-transperfact .section {
    margin-bottom: 15px;
    padding: 0 15px 15px;
    border-width: 1px 0;
    border-style: solid;
    border-color: #ddd;
    background-color: #fff;
}

.modal-transperfact h1 {
    font-size: 18px;
    font-weight: bold;
}

.modal-transperfact h2 {
    font-size: 14px;
    font-weight: bold;
    padding: 10px;
    background-color: #f4f4f4;
}

.modal-footer .btn + .btn {
    margin-left: 0;
}

.transperfact .col-md-6 {
    width: 49%;
}

.transperfact .col-split {
    display: flex;
    float: left;
    width: 2%;
    padding-top: 35px;
}

.transperfact li {
    margin-top: 15px;
    padding-top: 15px;
}

.transperfact .row label + textarea {
    margin-top: 5px;
}


/* ckeditor */
.cke_chrome {
    border-top: 0 !important;
}

.cke_top {
    position: sticky !important;
    top: 115px;
    border-top: 1px solid #d1d1d1 !important;
}

.cke_maximized .cke_top {
    position: static !important;
}

.cke_inner .content-box {
    padding: 20px !important;
    background-color: #f9f9f9 !important;
}

.cke_inner .dot-box {
    padding: 20px;
    border: 1px dashed #ccc;
}

.dialog-upload-loading .cke_dialog:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    z-index: 99999;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.5);
}

.cke_reset_all .editor-image-lists {
    white-space: normal;
    width: 100%;
    max-width: 800px;
}

.cke_reset_all .editor-image-lists span {
    text-align: center;
    white-space: nowrap;
    vertical-align: top;
    display: inline-block;
    width: 100px;
    height: 100px;
    margin: 0 2px 2px;
    border: 1px solid #f4f4f4;
    background-color: #fff;
    cursor: move;
}

.cke_reset_all .editor-image-lists span:after {
    content: '';
    vertical-align: middle;
    display: inline-block;
    height: 100%;
}

.cke_reset_all .editor-image-lists span img {
    vertical-align: middle;
    display: inline-block;
    max-width: 100%;
    max-height: 100%;
    cursor: move;
}

.cke_reset_all .dialog-upload-form .file {
    position: relative;
    height: 50px;
}

.cke_reset_all .dialog-upload-form .file:after {
    content: 'Selected files ';
    font-size: 20px;
    text-align: center;
    line-height: 46px;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border: 2px dotted #ccc;
}

.cke_reset_all .dialog-upload-form input {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.cke_reset_all .dialog-upload-loadings {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 999999;
    height: 5px;
    background-color: #c9302c;
    transition: width 0.3s;
}

.success-tour {
    position: relative;
}

.btn-toggle-table {
    position: absolute;
    top: 5px;
    right: 10px;
}

.hide-list .btn-toggle-table .fa {
    transform: rotate(180deg);
}

.hide-list tr {
    display: none;
}

.hide-list tr:first-child {
    display: table-row;
}

.term-calendar {
    margin-top: 10px;
}

.term-calendar:first-child {
    margin-top: 0;
}

.term-calendar.meal-check {
    width: 100%;
}

.term-calendar.meal-check .form-control {
    max-width: 150px;
}

.term-calendar.meal-check .form-inline > .btn {
    float: right
}

td .term-calendar {
    margin-top: 0;
}

.form-calendar .term-calendar {
    margin-top: 0;
}

.country-list {
    margin-left: -10px;
}

.country-list .checkbox-inline:first-child {
    margin-left: 15px;
}

.country-list .checkbox-inline input {
    top: 50%;
    transform: translateY(-50%);
    margin-top: 0;
}

.select-round-country .checkbox-inline {
    margin-left: 0;
    margin-right: 15px;
}

.fc-content {
    text-align: right;
}

.fc-event.empty {
    background-color: transparent;
    color: #3788d8;
}

.btn-side {
    display: none;
}

.summary-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #eee;
}

.summary-result em {
    font-style: normal;
}

.btn-trans {
    border: 1px solid #ccc;
}

.btn-trans, .trans-area {
    background-color: rgba(15, 129, 207, 0.2);
}

.row .form-group {
    margin-bottom: 0;
}

.align-center {
    display: flex;
    align-items: center;
}

.justify-end {
    display: flex;
    justify-content: flex-end;
}

.sweet-alert:focus {
    outline: none;
}

.sweet-alert .sa-icon.sa-success::before {
    top: -15px;
}

.sweet-alert h2 {
    font-size: 20px;
}

.badge {
    font-weight: 500;
}

.badge.global {
    height: 22px;
    line-height: 22px;
    margin-left: 5px;
    padding: 0 10px;
    font-size: 12px;
    color: #fff;
    background-color: #2b8fd4;
    border-radius: 22px;
}

/* calendar */
.fc-view-container {
    padding: 10px;
    letter-spacing: -0.5px;
    color: #555;
    background-color: #fafafa;
}

.fc-head {
    line-height: 30px;
}

.fc-head tr {
    background-color: #f5f5f5;
    font-size: 12px;
    text-transform: uppercase;
}

.fc-sun {
    color: #cd0000;
}

.fc-sat {
    color: #0c68a7;
}

.fc-day-number {
    color: inherit;
}

.fc-time {
    display: none
}

.fc-ltr .fc-dayGrid-view td.fc-day-top .fc-day-number,
.fc-ltr .fc-basic-view td.fc-day-top .fc-day-number {
    display: inline-block;
    padding: 5px;
    float: none;
}

.fc .alert-info {
    color: inherit;
}

.fc-popover {
    background-color: #fff;
}

.fc-ltr .fc-popover .fc-header span.fc-title {
    float: none;
    display: block;
    margin-top: 10px;
    text-align: center;
}

.fc-popover .fc-content {
    color: rgba(0, 0, 0, .8);
}

.box .fc-bootstrap4 .fc-row {
    border-top: 1px solid #ddd;
}

.box .fc-bootstrap4 .fc-head-container {
    border-bottom-width: 0;
}

.fc-bootstrap4 .fc-row tr td.fc-event-container .fc-event,
.fc-event-container .fc-event {
    padding: 0 10px;
    line-height: 24px;
    border: 0;
    border-radius: 0;
    background-color: #c6dff1;
    color: rgba(0, 0, 0, .8);
    font-size: 14px;
}

.fc-event-container a.fc-event {
    cursor: pointer;
}

.fc-event-container a.fc-event:hover {
    background-color: #0f81cf;
}

.fc-event-container a.fc-event:hover .fc-title span:before {
    background-color: rgba(255, 255, 255, .2);
}

.fc-event-container .fc-day-grid-event {
    margin: 2px 4px;
}

.fc-event-container .fc-event.fullColor {
    background-color: rgba(200, 235, 200, 1);
}

.fc-event-container .fc-event.fullColor:hover {
    background-color: #20a120;
}

.fc-event-container .fc-content {
    text-align: center;
}

.fc-title span {
    position: relative;
    display: inline-block;
    min-width: 50px;
}

.fc-title span:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 1px;
    height: 10px;
    background-color: rgba(0, 0, 0, .1);
}

.fc-title .time {
    margin-right: 15px;
}

.fc-title .lang {
    text-align: center;
    text-transform: uppercase;
}

.fc-title .occupancy {
    text-align: right;
}

.fc-toolbar {
    padding: 20px 10px;
    border-top: 1px solid rgba(215, 215, 215, .5);
    background-color: #fafafa;
}

.fc-toolbar .fc-button,
.fc-toolbar .btn {
    width: 35px;
    height: 35px;
    padding: 5px;
    border-radius: 4px;
}

.fc-toolbar .fc-today-button {
    width: auto;
    padding: 5px 10px;
    background-color: #2c3e50;
    color: #fff;
    border: 1px solid #2c3e50;
}

div.fc-toolbar.fc-header-toolbar {
    margin: 0;
}
div.fc-toolbar.fc-header-toolbar h2 {
	text-align:center;
	margin:0;
	font-weight:bold;
	line-height:35px;
}
div.fc-toolbar.fc-header-toolbar.row {
	border:0 none;
	border-bottom:1px solid #d7d7d7;
}
.fc-button-group .fc-button-primary,
.btn-group .btn-primary {
    background-color: #fff;
    border-color: #ccc;
    color: #777;
}

.fc-button:disabled {
    transition: opacity .3s;
}

button.fc-button:disabled,
.fc-toolbar .btn:disabled {
    opacity: 0.3;
}

.fc-toolbar .btn:focus {
    outline: transparent;
}

button.fc-button-primary:focus {
    box-shadow: none;
}

.fc-bootstrap4 tr td.fc-today,
.fc-unthemed tr td.fc-today {
    background-color: rgba(77, 157, 212, 0.1);
}

.fc-today .fc-day-number {
    font-weight: 700;
}

.fc-more-cell {
    text-align: right;
}

.meal .fc-scroller {
    height: auto !important;
    overflow-y: auto;
}

.meal .fc-dayGrid-view .fc-body .fc-row {
    max-height: 10em;
}

.meal .fc-event.fullMeal {
    margin-top: 10px;
    font-size: 4em;
    font-weight: 700;
    color: rgba(0, 0, 0, .7);
}

.meal .fc-event-container a.fc-event:hover {
    background-color: transparent;
}

.meal .fc-event-container .fc-event {
    line-height: normal;
    background-color: transparent;
}

.meal .fc-title span:before {
    display: none;
}

.popover {
    max-width: 320px;
}

.cancel-reason {
    margin-top: 20px;
}

.cancel-reason div + div {
    margin-top: 5px;
}

/* mobile */

@media (max-width: 768px) {
    body {
        min-width: 0;
    }

    input[type="file"] {
        width: 100%;
    }

    .login {
        left: 20px;
        right: 20px;
        transform: translateY(-50%);
    }

    .navbar-header,
    .navbar-brand {
        height: 100%;
    }

    .navbar-brand {
        line-height: 50px;
        padding: 0 20px;
    }

    .navbar-brand > img {
        max-width: 120px;
        width: 100%
    }

    .nav-sidebar li:not(.mo) {
        opacity: .5;
        pointer-events: none;
    }

    .nav-sidebar .nav-second li a {
        background-color: transparent;
        border-color: transparent;
    }

    #header .navbar-fixed-top {
        min-width: 0;
    }

    #header .navbar-right {
        display: none;
    }

    .sidebar {
        width: 100%;
        padding-bottom: 60px;
        transform: translateY(-100%);
        transition: transform .3s;
        z-index: 1001;
    }

    .sidebar .manual {
        width: auto;
        right: 10px;
        bottom: 10px;
    }

    .sidebar.active {
        transform: none;
    }

    .sidebar ~ .epilogue {
        padding: 20px 20px 50px;
    }

    .epilogue .pull-right {
        float: none !important;
    }

    .epilogue .title {
        display: flex;
        flex-direction: column;
        margin-bottom: 10px;
    }

    .epilogue .active-sticky {
        left: 20px;
        right: 20px;
    }

    .epilogue .title > div {
        width: auto;
    }

    .epilogue .content {
        overflow: hidden;
    }

    .epilogue .content .row {
        overflow: scroll;
        margin-right: 0;
    }

    .epilogue .calendar {
        width: 100%;
    }

    .epilogue .calendar .input-group-addon {
        display: none;
    }

    .epilogue .calendar .input-group .input-icon {
        display: block;
        margin-top: 5px;
    }

    .epilogue .content .input-group {
        margin-top: 5px;
        width: 100%;
    }

    .epilogue .content .input-group-btn {
        width: 1px;
    }

    .epilogue .content .input-group .form-control {
        float: none;
        width: 100%;
    }

    .epilogue .box-footer .row {
        overflow: hidden;
    }

    .epilogue .modal-body .content {
        border-top: 0;
    }

    .epilogue-list .content .table {
        min-width: 1100px;
    }

    .epilogue-detail .btn-cancel,
    .epilogue-detail .btn-list,
    .epilogue-detail .btn-prev {
        display: none;
    }

    .epilogue-detail .stepwizard {
        display: none;
    }

    .epilogue-detail .content .table th,
    .epilogue-detail .content .table td {
        display: block;
        border-right: 0;
    }

    .content > .table-bordered {
        border: 0;
    }

    .btn-side {
        display: block;
        position: absolute;
        top: 50%;
        right: 10px;
        padding: 10px;
        transform: translateY(-50%);
        background-color: transparent;
        color: #fff;
    }

    .btn-side:hover,
    .btn-side:active,
    .btn-side:focus {
        color: #fff;
    }
}

.layer-dropdown {
    display: none;
    position: absolute;
    left: 50%;
    width: 150%;
    padding: 0 10px;
    transform: translateX(-50%);
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 5px;
}

.layer-dropdown p {
    margin: 5px 0;
}

.btn-dropdown {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #333;
}

.btn-dropdown .fa:before {
    margin-left: 4px;
    color: #0f80d0;
}

.btn-dropdown:hover ~ .layer-dropdown {
    display: block;
    z-index: 1;
}

.assign-info {
    margin-bottom: 15px;
    padding: 10px;
    background-color: #f7f7f7;
}

.assign-seminar {
    margin-bottom: 10px;
}

.assign-instructor strong ~ span {
    margin-left: 5px;
}

.assign-instructor span span + span:not(:empty):before {
    content: '/';
    display: inline-block;
    margin: 0 5px;
}

.instructor-default-info {
    display: flex;
    margin: 0 0 15px;
}

.instructor-photo {
    width: 200px;
    height: 200px;
}

.instructor-photo-area {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    border: 1px dashed #ccc;
}

.instructor-photo-area img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

.instructor-photo-area .no-required-file {
    position: relative;
    width: 100%;
    height: 100%;
    border: 0;
}

.instructor-photo-area .no-required-file .inner,
.instructor-photo-area .no-required-file .photo {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.instructor-photo-area .no-required-file .photo {
    display: flex;
    align-items: center;
    justify-content: center;
}

.instructor-photo-area .file-attach {
    position: absolute;
    left: -6px;
    bottom: 3px;
    width: 200px;
    overflow: hidden;
}

.instructor-photo-area .file-attach .form-file ~ label {
    top: 0;
    left: auto;
    right: 1px;
    background-color: #efefef;
}

.instructor-detail {
    flex: 1;
    margin-left: 15px;
}

.instructor-detail tr {
    height: 50px;
}

.capability > div {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    border-top: 1px solid #eee;
}

.capability > div:first-child {
    border-top: 0;
}

.capability > div > span {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 15px;
}

.capability .checkbox-inline {
    width: 200px;
    padding: 10px 15px 10px 30px;
    background-color: #f7f7f7;
}

.statistics {
    margin: 10px 0;
    border: 1px solid #ddd;
    border-radius: 10px;
    background-color: #fff;
    overflow: hidden;
}

.statistics li {
    list-style: none;
}

.chart {
    display: flex;
}

.chart .box {
    display: flex;
    flex: 1 1 50%;
    flex-direction: column;
    align-items: center;
    margin-bottom: 0;
    padding-bottom: 50px;
    border: 0;
}

.chart .box + .box {
    border-left: 1px solid #efefef;
}

.chart .box h4 {
    margin: 50px 0 30px;
    font-weight: 700;
}

.chart .chart-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 400px;
}

.chart .type li {
    display: flex;
    justify-content: space-between;
    min-width: 150px;
    margin: 5px 0;
}

.chart .type li span {
    margin-left: 10px;
}

.chart-my-lecture {
    width: 150px;
    height: 150px;
}

.status {
    background-color: #eaf3fab3;
}

.status ul {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
}

.status ul li {
    display: flex;
    align-items: center;
    flex-direction: column;
    padding: 20px 50px;
}

.status ul li strong {
    color: #555;
    font-weight: 400;
}

.status ul li span {
    font-size: 24px;
    font-weight: 700;
}

.box-wrap {
    padding: 15px;
    border-bottom-width: 1px;
}

.sms-box {
    margin-bottom: 15px;
}

.sms-edit {
    display: flex;
    flex-wrap: wrap;
}

.sms-edit-box {
    flex-basis: calc((100% - 10px) / 2);
}

.sms-edit-box + .sms-edit-box {
    margin-left: 10px;
}

.sms-form {
    flex-basis: 50%;
}

.sms-form textarea {
    min-height: 200px;
}

.sms-number {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex-basis: 50%;
    padding-left: 30px;
}

.sms-number > div {
    display: flex;
    align-items: center;
}

.sms-number strong {
    display: inline-block;
    min-width: 80px;
    margin-right: 10px;
}

.sms-number ul {
    display: inline-flex;
    margin-bottom: 0;
}

.sms-number ul li {
    margin-right: 10px;
}

.sms-number .btn-send {
    align-self: flex-end;
}

.sms-edit-box ~ .sms-number {
    padding-left: 0;
    display: flex;
    flex-direction: row;
    flex-basis: 100%;
    margin-top: 10px;
}

.sms-edit ~ .sub-title,
.staff-wrap {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px dashed #ddd;
}

.staff-list .table {
    border-top-width: 1px;
}

.sub-title {
    font-size: 16px;
    font-weight: 700;
}

.row ~ .sub-title {
    margin-top: 15px;
}

.instructor-calendar .fc-content-skeleton {
    pointer-events: none;
}

.instructor-schedule {
    margin-top: -1px;
}
.instructor-schedule .area {
	font-weight:bold;
}
.instructor-schedule ins,
.instructor-schedule a:hover {
    text-decoration: none;
}

.instructor-schedule .link-default {
    color: #333;
}

.instructor-schedule .instructor-check {
    position: absolute;
    top: 0;
    left: 3px;
}

.instructor-schedule .fa-user-circle {
    display: block;
    margin-top: 3px;
}

.instructor-schedule .btn[disabled] {
    color: #aaa;
}

.instructor-schedule td .possible,
.schedule-info td .possible {
    color: #0f80d0;
}

.instructor-schedule td .impossible,
.schedule-info td .impossible {
    color: #ff5b5b;
}

.instructor-schedule td .response,
.schedule-info td .response {
    color: #bbb;
}

.instructor-schedule td.confirmed:after {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    bottom: -1px;
    right: -1px;
    border: 1px dashed #ff5b5b;
    pointer-events: none;
}

.instructor-schedule tr:first-child td.confirmed:after {
    top: 0;
}

td.type-success {
    background-color: #ffd7d3;
}

td.type-buup {
    background-color: #ffe174;
}

td.type-kbnh {
    background-color: #c5eaff;
}

td.type-local {
    background-color: #80d1f7;
}

td.type-online {
    background-color: #d9e271;
}
/* 온라인 석세스 아카데미 */
td.type-onsa {
    background-color: #dde497;
}
/* 온라인 원데이 세미나 */
td.type-onods {
    background-color: #afb747;
}
/* 온라인 부업가 세미나 */
td.type-onspt {
    background-color: #6d903e;
}


.gender-man:after, .gender-woman:after, .icon-update:after {
    content: '';
    position: absolute;
    top: 5px;
    right: 5px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1px solid #fff;
}

.gender-man:after {
    background-color: #4acdff;
}

.gender-woman:after {
    background-color: #ff8383;
}

.icon-update:after {
    background-color: orange;
}

.feedback-period {
    margin-top: 5px;
    font-size: 13px;
}

.feedback-period > span {
    display: block;
}

.feedback-period .ongoing {
    color: #ff5b5b;
    font-weight: 500;
}

.seminar-area:before, .seminar-area:after {
    display: inline-block;
}

.seminar-area:before {
    content: '[';
}

.seminar-area:after {
    content: ']';
}

.seminar-date {
    font-weight: 500;
}

.schedule-info .sub-title {
    font-size: 14px;
}

.schedule-info h6 {
    margin-top: 0;
}

.schedule-info ul li {
    display: flex;
    align-items: center;
    margin: 10px 0;
}

.schedule-info ul li strong {
    margin-right: 5px;
}

.schedule-standard td p {
    margin: 10px;
}

.schedule-standard td strong {
    margin-right: 4px;
}

.schedule-standard td span {
    display: block;
    margin: 3px 0;
}

.list-info {
    position: relative;
    display: inline-block;
    width: 12px;
    height: 12px;
    margin: 0 1px;
}

.list-info.circle:after {
    position: absolute;
    top: 1px;
    left: 1px;
    right: auto;
}

.list-info.outlined {
    border: 1px dashed #ff5b5b;
}

.relationship .deletable,
.reservation-calendar .erasable {
    margin-top: 5px;
    margin-bottom: 0;
}

.modified {
    color: #ff5b5b;
}

.spouse {
    color: #bbb;
}

.layer-instructor .text-muted {
    max-height: 150px;
    padding: 20px;
    line-height: 1.5;
    background-color: #f7f7f7;
    font-size: 14px;
    text-align: left;
    overflow-y: scroll;
}

.db-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    margin: 0;
}

.db-page .error-wrapper {
    padding-top: 0;
}

.db-page strong {
    display: block;
    margin-bottom: 10px;
    text-align: center;
}

.db-page .summary {
    margin: 20px 0 30px;
    padding: 30px;
    background-color: #e7e7e7;
}

.db-page .summary p {
    margin: 10px 0;
}

.db-page .detail {
    line-height: 1.5;
}


.pl5 {
	padding-left:5px !important;
}
.mb0 {
	margin-bottom:0 !important;
}
.ml5 {
    margin-left: 5px !important;
}

.ml10 {
    margin-left: 10px !important;
}

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

.mt5 {
    margin-top: 5px !important;
}

.mt10 {
    margin-top: 10px !important;
}
.mb5 {
    margin-bottom: 5px !important;
}
.mb10 {
    margin-bottom: 10px !important;
}

.bt {
    border-top: 1px solid #ddd;
}

.bt-none {
    border-top: 0;
}

.icon-new {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-left: 5px;
    border-radius: 50%;
    text-align: center;
    font-size: 9px;
    color: #fff;
    line-height: 16px;
    font-style: normal;
    vertical-align: middle;
    background-color: #f00;
}

.icon-delete {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 10px;
    height: 10px;
    padding: 0;
    border-radius: 50%;
    border: 0;
    background-color: transparent;
}

.icon-delete .fa {
    font-size: 11px;
    vertical-align: top;
}

.row.no-space {
    margin: 0;
}

.row.row-space {
    margin-bottom: 50px;
}

.row-fixed {
    position: sticky;
    top: 50px;
    z-index: 1;
}

.row-fixed .fixed-content {
    background-color: #fafafa;
}

.row-fixed .fixed-utils {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    border-top: 1px dashed #eee;
}

.row-fixed .fixed-content .table-bordered {
    border-top-width: 1px;
}

.no-space .col-xs-9,
.no-space .col-xs-3 {
    padding: 0;
}

.no-gutters {
    margin-right: 0;
    margin-left: 0;
}

.no-gutters > .col,
.no-gutters > [class*="col-"] {
    padding-right: 0;
    padding-left: 0;
}

.col-space {
    margin-left: 5px;
}

dl {
    margin-bottom: 0;
}

dt {
    font-weight: normal;
}

dd {
    font-size: 11px;
    color: #848484;
}

dd > small {
    font-size: 11px;
    color: #848484;
}

.btn,
.form-control {
    font-size: 13px;
}

.form-control {
    border-color: #ddd;
    box-shadow: none;
}

.form-control.bg-warning {
    background-color: #fcf8e3;
}

.form-wrap {
    margin-bottom: 15px;
    padding: 15px;
    border: 1px solid #ddd;
    border-top: none;
    background: #fff;
}

.form-inline .form-group {
    display: inline-block;
    margin-bottom: 0;
    vertical-align: middle
}

.form-inline .form-control {
    display: inline-block;
    width: auto;
    vertical-align: middle
}

.form-inline .form-control-static {
    display: inline-block
}

.form-inline .input-group {
    display: inline-table;
    vertical-align: middle
}

.form-inline .input-group.wide {
	width:300px;	
}
.form-inline .input-group.wide .input-group-btn {
	width:38px;
}
.form-inline .input-group .form-control,
.form-inline .input-group .input-group-addon,
.form-inline .input-group .input-group-btn {
    width: auto
}

.form-inline .input-group > .form-control {
    width: 100%
}

.form-inline .control-label {
    margin-bottom: 0;
    vertical-align: middle
}

.form-inline .checkbox, .form-inline .radio {
    display: inline-block;
    margin-top: 0;
    margin-bottom: 0;
    vertical-align: middle
}

.form-inline .checkbox label, .form-inline .radio label {
    padding-left: 0
}

.form-inline .checkbox input[type=checkbox], .form-inline .radio input[type=radio] {
    position: relative;
    margin-left: 0
}

.form-inline .has-feedback .form-control-feedback {
    top: 0
}

.radio-inline + .radio-inline, .checkbox-inline + .checkbox-inline {
    margin-left: 15px;
}

.checkbox-inline {
    display: inline-flex;
    align-items: center;
}

a,
a:hover,
a:focus,
.txt-sky {
    color: #0f74ba;
}

.btn {
    border-radius: 0;
}

.btn.btn-space {
    margin-left: 10px;
}

.btn-icon {
    border: 0;
    background-color: transparent;
}

.btn-default {
    border-color: #ddd;
}

.btn-secondary {
    background-color: #333;
    color: #fff;
}

.btn-secondary:hover {
    background-color: #000;
    color: #fff;
}

.btn-default:hover {
    border-color: #ccc;
}

.btn .fa ~ span {
    margin-left: 3px;
}

.btn-primary {
    color: #fff;
    background-color: #0f81cf;
    border-color: transparent;
}

.btn-primary.active,
.btn-primary:active,
.btn-primary:hover,
.btn-primary:focus,
.open > .dropdown-toggle.btn-primary {
    color: #fff;
    background-color: #275b89;
}

.btn-bright {
    background-color: #5bc0de;
}

.btn-bright.active,
.btn-bright:active,
.btn-bright:hover,
.btn-bright:focus,
.open > .dropdown-toggle.btn-bright {
    background-color: #3fb0d2;
    border-color: transparent;
}

.btn.disabled,
.btn[disabled],
fieldset[disabled] .btn {
    opacity: .5;
}

label {
    font-weight: normal;
    margin-bottom: 0;
}

.form-control {
    height: 32px;
    border-radius: 0;
}

.form-control.input-sm {
    font-size: 12px;
    height: 22px;
}

textarea {
    width: 100%;
    min-height: 32px;
    padding: 10px;
}

textarea,
textarea.form-control {
    resize: vertical;
}

.input-icon {
    position: relative;
    left: 0;
    display: inline-block;
}

.input-group-full {
    width: 100%;
}

.input-group-addon {
    font-size: 12px;
}

.input-group-addon.non-style {
    padding: 0;
    border: none;
    background-color: transparent;
}

.input-icon > .form-control {
    padding-left: 33px
}

.input-group .input-icon + .input-group-addon {
    border-left: 0;
    border-right: 0;
}

.input-group .input-icon {
    display: table-cell;
}

.input-group-btn > .btn {
    height: 32px;
    border-radius: 0;
}

.input-icon > i {
    color: #ccc;
    position: absolute;
    top: 50%;
    left: 8px;
    transform: translateY(-50%);
    width: 16px;
    margin-top: -1px;
    text-align: center;
    z-index: 5;
}

label input[type=checkbox], label span {
    margin-top: 0;
    vertical-align: middle;
}

small {
    margin-left: 5px;
}

.required {
    margin: 0 3px;
    color: red;
}

.box-link {
    margin-bottom: 15px;
}

.input-group.add-url {
    margin-right: 10px;
}

.input-group.add-url > .form-control {
    width: 400px;
}

.fa:before {
    vertical-align: middle;
}

.fa.fa-android {
    color: #a4c639;
}

/*
* LOGIN
*/

.login {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

}

.login .modal-dialog {
    margin: 0;
    max-width: 600px;
}

.modal-content .form-signin {
    max-width: 400px;
    margin: 0 auto;
    text-align: center;
}

.form-signin-heading {
    margin: 0;
}

.form-signin-heading {
    padding: 15px 10px;
}

.form-signin-heading .fa {
    color: #6ebaff;
}

.form-signin .checkbox {
    font-weight: normal;
}

.form-signin .form-control {
    position: relative;
    height: auto;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 10px;
}

.form-signin .form-control:focus {
    z-index: 2;
}

.form-signin .input-group {
    margin-bottom: 15px;
}

.form-map {
    height: 500px;
    border-bottom: 1px solid #ddd;
}

/*
* contents
*/
.page-header,
h1:last-child.page-header {
    margin: 0 0 15px;
    padding: 0;
    border: 0;
    color: rgba(118, 118, 118, 1.0);
    font-weight: normal;
    font-size: 25px;
}

.contents.wide {
    min-width: 2000px;
}

.box {
    margin-bottom: 15px;
    background-color: #fff;
    border-width: 1px 1px 0;
    border-style: solid;
    border-color: #d7d7d7;
}

.box.bordered {
    border-width: 1px;
}

.box.win {
    margin: 15px 0;
    border-width: 1px 0;
}

.widget {
    margin-bottom: 0;
}

.box-search {
    margin: 0 0 10px 0;
    padding: 10px;
    background-color: #fbfbfb;
    border: 1px solid #ccc;
}

.searchbar .btn-search {
    background-color: #333;
    border: 1px solid #333;
    color: #fff;
}

.searchbar ~ .row .table {
    border-top-width: 1px;
}

.box-search .btn-collapse {
    background-color: #fbfbfb;
    border: 0;
}

.box-search #toggle-filter .row {
    padding-top: 10px;
}

.box-search .checkbox-inline + .form-control {
    margin-left: 10px;
}

.widget-header {
    position: relative;
    height: 34px;
    color: #fff;
    border-color: #45474b;
    background: #4c4f53;
}

.widget-header h2 {
    position: relative;
    display: inline-block;
    width: auto;
    height: 100%;
    margin-left: 10px;
    line-height: 34px;
    font-weight: 400;
    letter-spacing: 0;
    font-size: 14px;
}

.widget h3 {
    padding: 8px 0;
    border-bottom: 1px dashed rgba(0, 0, 0, .2);
    background: #fff;
    font-size: 16px;
    font-weight: 300;
    color: #222;
    margin: 25px 0 20px;
}

.widget-header .form-control {
    height: 32px;
    border: 0;
    border-right: 1px solid #ddd;
    border-radius: 0;
}

.widget-header small {
    display: inline-block;
    margin-left: 10px;
    color: #fff;
}

.widget-header .btn {
    float: right;
    height: 32px;
    padding: 0 12px;
    font-size: 12px;
    line-height: 22px;
    border: 0;
    color: #fff;
    background-color: transparent;
}

.widget-header .btn.collapsed i:before {
    content: '\f078';
}

.widget-header .btn-icon {
    position: absolute;
    right: 0;
    top: 0;
    height: 32px;
    color: #fff;
    background-color: transparent;
}

.widget-body {
    position: relative;
    border: 1px solid #ccc;
    border-top: 0;
}

.widget-body .toolbar {
    position: relative;
    padding: 20px;
    background: #fafafa;
}

.widget-body .toolbar-footer,
.box .box-header,
.box .box-footer {
    background: #fafafa;
    padding: 10px;
    box-shadow: inset 0 1px #fff;
}

.box-header.bordered {
    border-bottom: 1px solid #d7d7d7;
}

.box-footer {
    display: flex;
    flex-wrap: wrap;
    border-bottom: 1px solid #d7d7d7;
}

.box-footer:after {
    content: '';
    clear: both;
}

.box-footer .row {
    display: flex;
    align-items: center;
    width: 100%;
}

.box-footer .row .text-right {
    display: flex;
    justify-content: flex-end;
}

.box-footer .btn + .btn {
    margin-left: 5px;
}

h2.box-header {
    margin: 50px 0 10px;
    font-size: 20px;
    font-weight: 700;
}

h2.box-header:first-of-type {
    margin-top: 0;
}

h3.box-header {
    font-size: 16px;
}

.row h2.box-header {
    margin: 0;
}

.widget-body .toolbar select.form-control {
    max-width: 250px;
}

.box .box-footer .total,
.widget-body .toolbar .total {
    padding-top: 9px;
}

.box .box-footer .total {
    padding-top: 0;
}

.box .box-footer .total p {
    margin-bottom: 0;
}

.box .box-footer .align-center .col-xs-6 {
    display: flex;
}

.box .box-footer .align-center .text-right {
    justify-content: flex-end;
}

.total {
    display: inline-block;
    margin-right: 10px;
}

.total + .form-inline {
    display: inline-block;
}

.widget-footer {
    display: block;
    padding: 7px 14px 15px;
    border-top: 1px solid rgba(0, 0, 0, .1);
    background: rgba(248, 248, 248, .9);
}

.widget-footer .btn {
    height: 31px;
    margin: 10px 0 0 5px;
    padding: 0 22px;
}

.widget .widget {
    margin: 0;
    border: 0;
}

.nav-tabs {
    display: flex;
    margin-bottom: 15px;
    padding: 0;
    list-style: none;
    border-bottom: none;
    background-color: #fff;
}

.nav-tabs li {
    flex: 1;
    position: relative;
    height: 50px;
    margin-bottom: 0;
}

.nav-tabs li a:after {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    background-color: transparent;
    z-index: 1;
}

.nav-tabs li.active a:after,
.nav-tabs li a:hover:after {
    bottom: 0;
    height: 2px;
    background-color: #0f80d0;
}

.nav-tabs li a {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    border-radius: 0;
    padding: 0 15px;
    color: #555;
    border-width: 0;
}

.nav-tabs li a:hover,
.nav-tabs li a:focus,
.nav-tabs li.active a,
.nav-tabs li.active a:hover,
.nav-tabs li.active a:focus {
    background-color: #f2faff;
    color: rgba(0, 0, 0, .8);
    border: 0;
    font-weight: 700;
}

.nav-tabs li.active a:hover,
.nav-tabs li.active a:focus {
    background-color: #eaf7ff;
}

.nav-tabs.nav-pills > li + li {
    margin-left: 0;
}

.modal .nav-tabs {
    margin-bottom: -1px;
}

.nav-pills > li > a,
.nav-pills > li > a:focus,
.nav-pills > li > a:hover {
    background-color: #e5e5e5;
}

.nav-pills > li.active > a,
.nav-pills > li.active > a:focus,
.nav-pills > li.active > a:hover {
    background-color: #fff;
    color: rgba(0, 0, 0, 0.87);
    border-top: 2px solid #0f81cf;
}

.tab-searchbar {
    margin-bottom: 15px;
}

.tab-searchbar .tabmenu {
    margin-bottom: 0;
}

.tab-searchbar .tabmenu > li > a,
.tab-searchbar .tabmenu > li > a:focus,
.tab-searchbar .tabmenu > li > a:hover {
    border-color: #ddd #ddd transparent;
    background-color: #ddd;
}

.tab-searchbar .tabmenu > li.active > a,
.tab-searchbar .tabmenu > li.active > a:focus,
.tab-searchbar .tabmenu > li.active > a:hover {
    background-color: #fff;
    color: rgba(0, 0, 0, 0.87);
    border-top: 2px solid #2952ab;
}

.tab-pane .widget-header {
    display: none;
}

.tab-pane .widget-body {
    border: 0;
}

.table-bordered + .content,
.content + .content,
.content + .table-bordered {
    margin-top: -1px;
    border-top: 0;
}

.searchbar select.form-control {
    min-width: 150px;
    max-width: 100%;
}

.searchbar .form-inline .input-group .form-control.datetimepicker {
    width: 130px;
}

.searchbar .checkbox-inline,
.searchbar .radio-inline {
    margin: 0 5px;
    line-height: 32px;
    font-size: 13px;
}

.searchbar .checkbox input[type=checkbox],
.searchbar .checkbox-inline input[type=checkbox],
.searchbar .radio input[type=radio],
.searchbar .radio-inline input[type=radio] {
    top: 50%;
    transform: translateY(-50%);
    margin-top: 0;
}

.category-1depth,
.category-1depth td {
    background-color: #ebecef;
}

.depth-in .fa-level-up {
    margin-right: 5px;
    transform: rotate(90deg);
    opacity: .6;
}

.depth-in {
    padding-left: 20px;
}

.box-category {
    position: relative;
}

.box-category .btn {
    position: absolute;
    right: 0;
}

.box-category .btn {
    position: absolute;
    right: 0;
    background-color: transparent;
    border: 0;
}

.box-category .btn.fold i:before {
    content: '\f078';
}

.box-progress {
    display: flex;
    width: 100%;
    padding: 10px;
    align-items: center;
    border-bottom: 1px solid #d7d7d7;
}

.box-progress .participant {
    order: 2;
    margin: 0 10px;
}

.box-progress .progress {
    flex: 1;
    margin-bottom: 0;
}

/* table */
.table {
    margin-bottom: 0;
    background-color: #fff;
    table-layout: fixed;
}

.table + .table {
    margin-top: -1px;
}

.table > tbody > tr > td,
.table > tbody > tr > th,
.table > tfoot > tr > td,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > thead > tr > th {
    padding: 5px;
    vertical-align: inherit;
    word-break: break-word;
}

.table th.space-between label {
    float: right;
}

.table th.space-between:after {
    content: '';
    clear: both;
}

.table td {
    position: relative;
    height: 43px;
}

.table td.disabled {
    background-color: #f2f2f2;
}

.table td.checkbox-list {
    padding: 5px 10px 5px 0;
}

.table td.checkbox-list .checkbox-inline {
    margin-left: 10px;
}

.table thead {
    background-color: #eee;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f2f2f2), to(#fafafa));
    background-image: -webkit-linear-gradient(top, #f2f2f2 0, #fafafa 100%);
    font-size: 12px
}

.table thead tr.bordered {
    border-bottom: 1px solid #ddd;
}

.table tr.end .item-status {
    text-decoration: line-through;
}

.table tr.status-open td {
    background-color: #d9edf7;
}

.table tr.status-change td {
    background-color: #f7e5d9;
}

.table tr.status-close td {
    color: #aeaeae;
    background-color: #f5f5f5;
}

.table tr.status-delete td {
    text-decoration: line-through;
    color: #aeaeae;
    background-color: #f5f5f5;
}

.table tr.status-close td a,
.table tr.status-delete td a {
    color: #aeaeae;
}

.table tr td.cancel {
    opacity: .3;
    text-decoration: line-through;
}

.box .horizontal.table-bordered:first-child {
    border-top: 0;
}

.box .horizontal.table-bordered:first-child tr:first-child th,
.box .horizontal.table-bordered:first-child tr:first-child td {
    border-top: 0;
}

table.table-bordered {
    border-left: 0;
    border-right: 0;
}

table.table-bordered thead td,
table.table-bordered thead th {
    border-left-width: 0;
    border-top-width: 0
}

table.table-bordered tbody tr:first-child td,
table.table-bordered tbody tr:first-child th {
    border-top-width: 0;
}

table.table-bordered tbody td,
table.table-bordered tbody th,
table.table-bordered tfoot td,
table.table-bordered tfoot th {
    border-left-width: 0;
    border-bottom-width: 0;
    word-break: break-word;
}

.table-bordered > thead > tr > th,
.table-bordered > thead > tr > td {
    border-bottom-width: 1px;
}

table.table-bordered td:last-child,
table.table-bordered th:last-child {
    border-right-width: 0
}

.table.vertical thead th {
    text-align: center;
}

.table.vertical tfoot td,
.table.vertical tfoot th {
    font-weight: bold;
    background: #f5f5f5;
    text-align: center;
}

.table.vertical tbody tr th {
    text-align: center;
}

.table.vertical tbody tr th strong {
    font-weight: bold;
}

.table.vertical thead tr th,
.table.vertical tbody tr td {
    text-align: center;
    height: 40px;

}

.table.vertical tbody tr td.text-left {
    text-align: left;
}

.table.vertical tbody tr td.text-right {
    text-align: right;
}

.table.vertical tbody tr.end td,
.table.vertical tbody tr.end td a {
    color: #d7d7d7;
}

.table.horizontal tbody th {
    font-size: 12px;
}

.table > tbody > tr:hover {
    background-color: #ecf3f8
}

.table.horizontal > tbody > tr:hover {
    background-color: #fff;
}

.table.horizontal > tbody > tr > th {
    background-color: #fafafa;
}

.table.horizontal > tbody > tr > th.th-emphasis {
    background-color: #cfe4f3;
    color: #194a6a;
}

.table.horizontal > tbody > tr > th.th-emphasis ~ td {
    background-color: #f1f7fb;
}

.table-fixed {
    background-color: #eee;
    background-image: -webkit-linear-gradient(top, #f2f2f2 0, #fafafa 20%);
    border-bottom: 1px solid #eee;
}

.table-fixed thead {
    width: 98%;
}

.table-fixed tbody {
    width: 100%;
    height: 400px;
    background-color: #fff;
    overflow-y: auto;
}

.table-fixed thead,
.table-fixed tbody,
.table-fixed tr,
.table-fixed td,
.table-fixed th {
    display: block;
}

.table-fixed tbody td,
.table-fixed thead > tr > th {
    float: left;
    border-bottom-width: 0;
}

.table-fixed thead > tr > th.header {
    position: relative;
}

.table-fixed tr:after {
    content: '';
    display: block;
    clear: both;
}

.table.vertical.table-fixed tbody td {
    min-height: 32px;
    /* 	line-height: 32px; */
}

.table-fixed tbody tr {
    display: table;
    width: 100%;
}

.table-fixed tbody td {
    float: none;
}

.table-scroll {
    max-height: 300px;
    overflow-y: auto;
}

.table-scroll.full {
    max-height: 600px;
}

.table-scroll .table {
    border-bottom-width: 0;
}

.table .empty {
    clear: both;
    width: 100%;
    text-align: center;
}

table.table-location th[rowspan] {
    border-right: 1px solid #ddd;
}

.box table.table-bordered.table-location tr:first-child th[rowspan] {
    border-top: 1px solid #ddd;
}

.box .table-bordered {
    border-top-width: 0;
}

.tr-selected,
.tr-selected > td,
.tr-selected > th {
    background-color: #cfe4f3;
}

.table > tbody > tr.tr-selected:hover,
.tr-selected:hover > td,
.tr-selected:hover > th {
    background-color: #cfe4f3;
}
#preview_img_wrap {
    text-align: center;

}
#preview_img_wrap .preview_img {
    max-width: 100%;
}

#preview_img_wrap .preview_img:first-child {
    display: inline-block;
}
#preview_img_wrap .preview_img:not(:first-child) {
    display:none;
}


.custom-checkbox {
    display: inline-block;
    height: 32px;
    color: #333;
    vertical-align: middle;
    border-radius: 2px;
    background-color: #fff;
}

.custom-checkbox label {
    display: inline-block;
    height: 100%;
    font-size: 13px;
    padding: 0 12px;
    line-height: 30px;
    cursor: pointer;
    vertical-align: top;
    user-select: none;
    border: 1px solid #ccc;
}

.custom-checkbox input[type="checkbox"]:checked + label {
    color: #fff;
    border: 1px solid #0f81cf;
    background-color: #0f81cf;
}

.custom-checkbox label .fa-square-o {
    width: 13px;
    height: 13px;
    margin-right: 3px;
    text-align: center;
}

.custom-checkbox input[type="checkbox"]:checked + label .fa-square-o:before {
    content: "\f046";
}

/* switch */
.onoffswitch + .btns,
.onoffswitch ~ .btn {
    margin-top: 5px;
}

.onoffswitch {
    display: inline-block;
    vertical-align: middle;
    height: 23px;
}

.onoffswitch.block {
    display: block;
}

.onoffswitch-checkbox {
    position: absolute;
    left: 2px;
    z-index: -1;
    opacity: 0;
    filter: Alpha(Opacity=0);
}

.onoffswitch-label {
    position: relative;
    text-align: center;
}

.onoffswitch-label .inner {
    position: relative;
    width: 52px;
    height: 23px;
    display: inline-block;
    margin-bottom: 0;
    overflow: hidden;
    cursor: pointer;
    border-radius: 23px;
    background-color: #ccc;
}

.onoffswitch-label .inner:before,
.onoffswitch-label .inner:after {
    display: block;
    float: left;
    width: 50%;
    padding: 0;
    line-height: 23px;
    font-size: 10px;
    font-weight: bold;
    color: #fff;
    box-sizing: border-box;
    font-style: normal;
}

.onoffswitch-label .inner:before {
    content: "ON";
}

.onoffswitch-label .inner:after {
    content: "OFF";
    margin-left: -1px;
}

.onoffswitch-label .switch {
    display: block;
    width: 24px;
    height: 19px;
    background-color: #fff;
    border-radius: 19px;
    position: absolute;
    top: 2px;
    left: 2px;
    transition: all 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95);
    transform: translateX(0px);
    cursor: pointer;
}

.onoffswitch-checkbox:checked ~ .onoffswitch-label .inner {
    background-color: #0f81cf;
}

.onoffswitch-checkbox:checked ~ .onoffswitch-label .switch {
    transform: translateX(24px);
}

.reservation-check {
    display: inline-block;
    min-height: 32px;
    line-height: 32px;
    margin-right: 10px;
}

.reservation-check input[type=checkbox],
.reservation-check input[type=radio] {
    margin-top: 9px;
}

/* pagination */
.pagination {
    margin: 5px 0 0;
}

.pagination > li > a,
.pagination > li > span {
    color: #0f81cf;
}

.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus {
    background-color: #0f81cf;
    border-color: #0f81cf;
}

.box-footer .pagination {
    margin-top: 0;
}

.thumbnail {
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 0;
}

.thumbnail img {
    max-height: 40px;
}

.thumbnail img[src=""] {
    width: 40px;
    height: 40px;
    background: url('../images/common/logo_atomy.png') no-repeat center center/70% auto;
}

.ui.fluid.multiple.search.selection.dropdown {
    border-radius: 0;
}

.dropzone {
    min-height: 60px;
    position: relative;
    padding: 10px;
    border: 1px dashed rgba(0, 0, 0, 0.3);
}

.dropzone .dz-message {
    margin: 1em 0;
}

.dropzone .btn-delete {
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1000;
    cursor: pointer;
}

.dropzone .btn-delete:active {
    left: auto;
}

.dropzone .image-wrap {
    position: relative;
    display: inline-block;
    max-width: 250px;
    padding: 5px;
    box-sizing: border-box;
}

.dropzone .image-wrap .btn-remove {
    color: #721c24;
    font-size: 28px;
    position: absolute;
    top: -5px;
    right: -5px;
    width: 26px;
    height: 28px;
    padding: 0;
}

.dropzone .image-wrap .btn-remove:before {
    content: '';
    display: inline-block;
    width: 24px;
    height: 24px;
    background-color: #fff;
    border-radius: 50%;
}

.dropzone .image-wrap .btn-remove:before,
.dropzone .image-wrap .btn-remove .fa {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}

.dropzone img,
.dropzone .dz-preview .dz-image img {
    max-width: 100%;
}

.wrap-image {
    text-align: center;
}

.wrap-image img {
    max-width: 100%;
}

.cke_editable {
    min-height: 200px;
}

.cke_editable img {
    max-width: 100%;
}

.bootstrap-tagsinput {
    width: 100%;
    border-radius: 0;
}

.list-group {
    list-style: none;
    margin-bottom: 0;
}

.select-category .form-inline {
    display: table;
    width: 50%;
}

.select-category .form-inline > span {
    display: table-cell;
    padding-right: 2px;
}

.select-category .form-inline > span.buttons {
    width: 1%;
    padding-right: 0;
}

.select-category .form-inline select.form-control {
    width: 100%;
}

.list-category-select {
    max-width: 50%;
}

.list-category-select select.form-control {
    min-width: 150px;
}

.list-group li {
    margin-top: 10px;
}

.list-group li:first-child {
    margin-top: 0;
}

.list-category-select li + li .input-group {
    margin-top: 2px;
}

.comments .comment {
    border-top: 15px solid #efefef;
}

.comments .comment:first-child {
    border-top: none;
}

.sticky {
    position: sticky;
    top: 0;
    z-index: 1;
}

.sticky-vod {
    top: 90px;
}

.split .row {
    margin: 0;
}

.split .col-left {
    float: left;
    width: 25%;
}

.split .col-right {
    width: 75%;
    float: right;
}

.btns {
    margin: -2px 0;
}

.btns .btn {
    margin: 2px 0;
}

.btns-position {
    font: 0/0 a;
    width: 68px;
}

.btns-position p {
    font-size: 11px;
    line-height: 1.5;
    margin-top: 3px;
}

.btns-position p input {
    vertical-align: middle;
    margin-top: -2px;
}

.btns-position .btn {
    margin: -1px;
    border-radius: 0;
}

.btns-position .btn.active {
    color: #fff;
    background-color: #3276b1;
    border-color: #2c699d;
}

.bootstrap-tagsinput .tag {
    padding: 1px 4px;
    font-weight: normal;
    font-size: 100%;
}

.content-video {
    margin: 0;
}

.content-video .col-xs-4 {
    position: sticky;
    top: 60px;
    padding: 0 0 0 10px
}

.content-video .col-xs-8 {
    padding: 0;
}

.wrap-player {
    text-align: center;
    padding: 10px;
    background-color: #efefef;
}

.player {
    position: relative;
    padding-top: 56.25%;
}

.player .btn-search {
    color: #ccc;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border: 3px dashed #ccc;
    background-color: #efefef;
}

.player .btn-search:after {
    content: '\f03d';
    color: #ddd;
    font: normal normal normal 70px/2 FontAwesome;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
}

.player .video,
.player #video {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.player.active-video .video,
.player.active-video #video {
    z-index: 1;
}

.player.active-video .btn-search {
    z-index: 2;
    bottom: auto;
    left: auto;
    right: 10px;
    top: 10px;
    color: #fff;
    text-shadow: 0 0 5px #000;
    background-color: rgba(255, 255, 255, 0.7);
    border-style: solid;
}

.player.active-video .btn-search:after {
    display: none;
}

.player .video-player {
    width: 100%;
    height: 100%;
}

.player .vjs-big-play-button {
    display: none;
}

.player .vjs-control-bar {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    opacity: 1;
}

.video-js .vjs-time-tooltip,
.video-js .vjs-mouse-display:after,
.video-js .vjs-play-progress:after,
.video-js .vjs-progress-control .vjs-mouse-display {
    white-space: nowrap;
}

.box-scroll {
    height: 200px;
    overflow-y: scroll;
    border: 1px solid #ccc;
}

.guide-main {
    margin: 0 auto;
    max-width: 50%;
}

.guide-main .item {
    position: relative;
    display: block;
    margin: 10px;
}

.guide-main a:before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    display: block;
    border: 4px solid #999;
    background-color: rgba(0, 0, 0, 0.3);
}

.guide-main a:after {
    content: attr(title);
    color: #fff;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    transform: translate(-50%, -50%);
}

.guide-main img {
    width: 100%;
    filter: blur(2px);
    transition: all 0.3s;
}

.guide-main a:hover {
    z-index: 5;
    transition: all 0.3s;
    transform: scale(1.15);
}

.guide-main a:hover:before {
    transition: all 0.3s;
    background-color: rgba(0, 0, 0, 0);
}

.guide-main a:hover:after {
    color: rgba(255, 255, 255, 0);
    transition: all 0.3s;
}

.guide-main a:hover img {
    filter: blur(0);
}

.item-type {
    font-size: 20px;
    color: #848484;
}

.item-status {
    display: inline-block;
    margin: 0 10px;
    visibility: visible;
}

.item-status > span {
    font: 0/0 a;
}

.item-status:before {
    content: ' ';
    display: inline-block;
    width: 10px;
    height: 10px;
    margin: 0 2px;
    border-radius: 5px;
    box-shadow: 0 0.08em 0.15em -0.1em rgba(0, 0, 0, 0.5) inset
}

.item-status.ing:before {
    background: linear-gradient(rgba(0, 0, 0, 0.07), rgba(255, 255, 255, 0.1)), #7ad4f5;
}

.item-status.invisible:before {
    background: linear-gradient(rgba(0, 0, 0, 0.07), rgba(255, 255, 255, 0.1)), #ddd;
}

.item-status.reservation:before {
    background: linear-gradient(rgba(0, 0, 0, 0.07), rgba(255, 255, 255, 0.1)), #FFC107;
}

.item-status.deadline:before {
    background: linear-gradient(rgba(0, 0, 0, 0.07), rgba(255, 255, 255, 0.1)), #ff4207;
}

.item-status.end:before {
    background: linear-gradient(rgba(0, 0, 0, 0.07), rgba(255, 255, 255, 0.1)), #ddd;
}

.item-status.end {
    text-decoration: line-through;
}

.item-status.invisible {
    color: #d7d7d7;
}

.item-status.end.invisible {
    text-decoration: line-through;
    color: #d7d7d7;
}

.item-status.none:before {
    background: linear-gradient(rgba(0, 0, 0, 0.07), rgba(255, 255, 255, 0.1)), #bdb5e6;
}

.item-status.assigning:before {
    background: linear-gradient(rgba(0, 0, 0, 0.07), rgba(255, 255, 255, 0.1)), #a7d9f2;
}

.item-status.assigned:before {
    background: linear-gradient(rgba(0, 0, 0, 0.07), rgba(255, 255, 255, 0.1)), #a3e3c4;
}

.item-status.feedback:before {
    background: linear-gradient(rgba(0, 0, 0, 0.07), rgba(255, 255, 255, 0.1)), #f0ef9e;
}

.item-status.confirmed_wait_last:before {
    background: linear-gradient(rgba(0, 0, 0, 0.07), rgba(255, 255, 255, 0.1)), #edb5a1;
}

.item-status.confirmed:before {
    background: linear-gradient(rgba(0, 0, 0, 0.07), rgba(255, 255, 255, 0.1)), #f2845c;
}

.guide {
    display: inline-block;
}

.guide .item-status {
    font-size: 13px;
    color: rgba(0, 0, 0, .87);
}

.user-grade {
    display: inline-block;
    height: 20px;
    margin-top: -3px;
    line-height: 20px;
    text-align: center;
    font-size: 10px;
    vertical-align: middle;
    white-space: nowrap;
    background-color: transparent;
    overflow: hidden;
    border-radius: 10px;
}

.user-grade + .user-grade {
    margin-left: 5px;
}

.dropzone .dz-preview .dz-image {
    border-radius: 0;
}

.add-thumbnail .dropzone {
    width: 372px;
    height: 218px;
}

.add-thumbnail .dropzone .dz-preview .dz-image {
    width: 100%;
    height: 100%;
}

.add-thumbnail .dropzone .dz-preview .dz-image img {
    max-height: 198px;
}

.add-thumbnail .dropzone .dz-preview {
    margin: 0;
}

.form-time .form-control {
    width: 30px;
    padding: 0;
    text-align: center;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0;
}

.btn-delete,
.btn-reverse {
    margin: 0 10px;
}

.btn-confirm {
    margin-left: 10px;
}

.video-content {
    margin-top: -1px;
    border-top: 0;
}

.table-bordered.vod-area {
    border: 0;
}

.tab-pane .toolbar {
    padding: 20px;
    background-color: #fff;
}

#tab-chapter .table > tbody > tr:hover {
    background-color: transparent;
}

hr.split {
    margin: 0 -1px;
    padding: 10px 0;
    background-color: #efefef;
}

.btn-sticky {
    margin: 5px 0;
    transition: all 0.3s;
}

.btn-sticky .btn-delete {
    margin-left: 0;
}

.active-sticky {
    position: fixed;
    top: 55px;
    right: 30px;
    left: 250px;
    z-index: 50;
    padding: 5px;
    border-radius: 3px;
    border: 1px solid rgba(204, 204, 204, 0.8);
    background-color: rgba(248, 248, 248, 0.8);
    box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.25);
}

.active-sticky .input-eng {
    float: left;
}

#videoContent:not(.hidden) ~ #product {
    display: none;
}

.help-block {
    font-size: 12px;
    margin-bottom: 0;
}

span.help-block {
    display: inline-block;
    margin-left: 10px;
    margin-bottom: 5px;
    vertical-align: middle;
}

.media-detail {
    position: relative;
}

.media-detail .nav-tabs {
    margin-bottom: 10px;
}

.media-detail .toolbar-header {
    padding: 0;
}

.media-detail .toolbar-header .text-right {
    height: 0;
}

.media-detail .toolbar-header .btn {
    margin-top: -85px;
}

.media-detail .table tbody tr td {
    text-align: left;
    word-break: break-all;
}

.media-detail .btn-delete {
    margin-left: 0;
}

.media-detail .table tbody tr td.text-center {
    text-align: center;
}

.media-detail .table thead th {
    white-space: nowrap;
}

.box-add {
    padding: 10px 0;
}

.accordion-head td {
    background-color: #cfe4f3;
}

.table tbody tr.accordion-body > td {
    padding: 0;
}

.table tbody tr.accordion-body > td:hover {
    background-color: #fff;
}

.accordion-body .content-video {
    padding: 10px;
    border: 5px solid #cfe4f3;
    border-top: none;
    box-sizing: border-box;
}

.sortable {
    table-layout: fixed;
}

th.header {
    position: relative;
}

th.header:after {
    content: '\f0dc';
    position: absolute;
    right: 15px;
    top: 10px;
    font: normal normal normal 14px/1 FontAwesome;
}

th.header.sort:after {
    top: 13px;
    right: 4px;
    font-size: 12px;
}

.tablesorter .header[data-sort="asc"]:after {
    content: '\f0dd';
}

.tablesorter .header[data-sort="desc"]:after {
    content: '\f0de';
}

th.headerSortUp:after {
    content: '\f0dd';
}

th.headerSortDown:after {
    content: '\f0de';
}

.bootstrap-tagsinput input {
    min-width: 60px;
}

.sa-button-container .btn,
.sa-confirm-button-container .btn {
    min-width: 80px;
}

.loader {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(255, 255, 255, 0.3);
}

.loader .inner {
    width: 0;
    height: 0;
    margin: 0 auto;
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 1000;
}

.loader span {
    width: 6px;
    height: 20px;
    position: absolute;
    left: -10px;
    bottom: 15px;
    border-radius: 5px;
    transform-origin: 10px 35px;
    transform: rotate(0deg);
    animation: loader 0.8s infinite;
}

.loader span:nth-child(2) {
    transform: rotate(45deg);
    animation-delay: 0.1s;
}

.loader span:nth-child(3) {
    transform: rotate(90deg);
    animation-delay: 0.2s;
}

.loader span:nth-child(4) {
    transform: rotate(135deg);
    animation-delay: 0.3s;
}

.loader span:nth-child(5) {
    transform: rotate(180deg);
    animation-delay: 0.4s;
}

.loader span:nth-child(6) {
    transform: rotate(225deg);
    animation-delay: 0.5s;
}

.loader span:nth-child(7) {
    transform: rotate(270deg);
    animation-delay: 0.6s;
}

.loader span:nth-child(8) {
    transform: rotate(315deg);
    animation-delay: 0.7s;
}

@keyframes loader {
    0% {
        background: transparent;
        left: -10px;
        transform-origin: 10px 35px;
    }
    30% {
        background: #000;
    }
    100% {
        background: transparent;
        left: 10px;
        transform-origin: -10px 35px;
    }
}

.list-auth,
.list-admin {
    text-align: left;
}

.list-admin li,
.list-auth li {
    display: inline-block;
    margin: 2px;
    padding: 5px 0;

}

.list-auth li {
    padding: 5px 10px;
}

.list-admin li div {
    display: inline-table;

}

.list-admin li div span {
    display: table-cell;
    text-align: center;
    padding: 0 10px;
}

.thumbnail-list {
    text-align: left;
    display: table;
    table-layout: fixed;
    width: 100%;
    margin-bottom: 15px;
}

.thumbnail-list .box-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    width: 100%;
    height: auto;
}

.thumbnail-list ul,
.thumbnail-list li {
    list-style: none;
    margin: 0;
    padding: 0;
}

.thumbnail-list .box-scroll {
    white-space: nowrap;
}

.thumbnail-list li {
    vertical-align: top;
    display: inline-block;
    margin: 5px;
    border: 1px solid #f2f2f2;
}

.thumbnail-list li a {
    display: block;
    height: 108px;
}

.thumbnail-list li a img {
    height: 100%;
}

.visitors {
    margin-bottom: 15px;
}

.visitors:after {
    content: '';
    display: block;
    clear: both;
}

.visitors .today {
    float: left;
}

.visitors .yesterday {
    float: left;
    margin-left: 20px;
}

.visitors .col {
    float: left;
    width: 150px;
    padding: 8px 10px;
    text-align: center;
    border: 1px solid #ddd;
}

.visitors .col-txt {
    background-color: #fafafa;
}

.visitors .col-num {
    margin-left: -1px;
    font-weight: bold;
    background-color: #fff;
}

.con-result {
    padding: 25px;
    border: 1px solid #ddd;
    background: #fff;
}

.con-result .period {
    float: left;
}

.con-result .total {
    float: right;
}

.con-result .total strong {
    font-size: 16px;
}

.con-result .graph {
    clear: both;
    width: 100%;
}

.widget-card {
    margin-bottom: 30px;
}

.widget-card .card {
    padding: 10px 0;
    height: 100%;
}

.widget-card .card .card-body a {
    display: block;
    padding: 20px 10px;
    color: #fff;
}

.widget-card .card strong,
.widget-card .card p {
    font-weight: normal;
    margin: 0;
}

.widget-card .card p {
    font-size: 12px;
    margin-top: 10px;
}

.widget-card .card strong {
    font-size: 25px;
}

.blue-bg {
    background: #3a86c8;
}

.green-bg {
    background: #3eb15b
}

.red-bg {
    background: #ea423f
}

.dark-red-bg {
    background: #f35454
}

.blue-bg {
    background: #3a86c8
}

.yellow-bg {
    background: #ffb400
}

.mustard-bg {
    background: #e3b442
}

.pink-bg {
    background: #F782AA
}

.brown-bg {
    background: #8f6e5a
}

.light-green-bg {
    background: #aed048
}

.violet-bg {
    background: #c38fbb
}

.teal-bg {
    background: #47BCC7
}

.orange-bg {
    background: #ed6d49
}

.grey-bg {
    background: #4d4d4d
}

.dark-grey-bg {
    background: #333
}

.fb-bg {
    background: #3B5998
}

.tw-bg {
    background: #688dab
}

.purple-bg {
    background: #500776
}


.panel-group .panel,
.panel-heading {
    padding: 0;
    border-radius: 0;
}

.panel {
    /* box-shadow: 0 2px 1px rgba(0,0,0,.05); */
    margin-bottom: 0;
    box-shadow: none;
}

.panel-group .panel + .panel {
    margin-top: 20px;
}

.panel-default > .panel-heading {
    position: relative;
    background-color: #C9C9C9;
    border-color: #ddd;
}
.panel-default .seat-panel {
    padding: 0px 15px;
    position: relative;
    height: 50px;
    background-color: #fff;
    border-top: 2px solid #0f81cf;
    border-bottom: 2px solid #0f81cf;
    line-height: 42px;
}
.seat-panel .entry-btn {
    margin-left: 11px;
}
.panel-arrow {
    cursor: pointer;
    float: right;
    margin-right: 8px;
    font-size: 13px;
    background-color: #fff;
    border-color: #ccc;
    color: #777;
    width: 35px;
    height: 35px;
    padding: 5px;
    line-height: 1.75;
    border-radius: 4px;
    margin-top: 5px;
}

.panel-title {
    font-size: 14px;
    font-weight: bold;
}

.panel-title a {
    display: block;
}

.panel-title a:after {
    content: '\f077';
    position: absolute;
    right: 15px;
    top: 11px;
    display: block;
    font: normal normal normal 14px/1 FontAwesome;
}

.panel-title a.collapsed:after {
    content: '\f078';
    position: absolute;
    display: block;
}

.panel-heading .result {
    position: absolute;
    right: 40px;
    top: 10px;
}

.panel-body {
    word-break: keep-all;
    line-height: 1.6;
}
#show-entry .modal.in .modal-dialog {

}
.vow {
    padding: 20px 0;
}

.vow .form-group {
    margin: 20px 0 0;
}

.vow .form-group .form-control {
    margin: 5px 0;
}

.vow .detail {
    display: inline-block;
    padding: 0 5px;
    font-weight: 700;
    line-height: 2;
    color: #337ab7;
    border-bottom: 1px solid #020202;
}

.signature {
    margin-top: 20px;
}

.signature .user-name {
    display: inline-block;
    margin-left: 10px;
    font-size: 20px;
}

.stepwizard-row {
    position: relative;
    display: table;
    width: 100%;
    margin: 0 auto 20px;
    padding: 0;
    table-layout: fixed;
    background-color: #fff;
    border: 1px solid #ddd;
}

.stepwizard-step {
    position: relative;
    display: table-cell;
    height: 40px;
    text-align: center;
    list-style: none;
}

.stepwizard-step:before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 20px 0 20px 15px;
    border-color: transparent transparent transparent #fff;
}

.stepwizard-step.active:after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 100%;
    z-index: 2;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 20px 0 20px 15px;
    border-color: transparent transparent transparent #0f81cf;
}

.stepwizard-step:first-child:before,
.stepwizard-step:last-child.active:after {
    display: none;
}

.stepwizard-step a {
    position: relative;
    z-index: 2;
    display: block;
    width: 100%;
    height: 100%;
    line-height: 40px;
    color: rgba(0, 0, 0, .87);
}

.stepwizard-step a:hover {
    text-decoration: none;
}

.stepwizard-step a:hover strong {
    text-decoration: underline;
}

.stepwizard-step a.disabled {
    cursor: default;
    background-color: #ececec;
}

.stepwizard-step span {
    display: inline-block;
    width: 25px;
    height: 25px;
    font-size: 15px;
    font-weight: bold;
    line-height: 25px;
    vertical-align: middle;
    background-color: #fff;
    margin: -2px 5px 0 0;
    border-radius: 50%;
}

.stepwizard-step.active {
    color: #fff;
    background-color: #0f81cf;
}

.stepwizard-step.active a {
    color: #fff;
}

.stepwizard-step.active a:after {
    content: '';
    position: absolute;
}

.stepwizard-step.active span {
    color: #0f81cf;
}

.user-image {
    border-top: 1px solid #ddd;
    border-right: 1px solid #ddd;
    height: 112px;
    box-sizing: border-box;
    text-align: center;
}

.user-image:after {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

.user-image img {
    max-width: 100%;
    max-height: 100%;
    vertical-align: middle;
}

.list-image {
    display: table;
    width: 100%;
    table-layout: fixed;
    margin: 0;
    padding: 0;
}

.list-image li {
    display: table-cell;
    width: 20%;
    padding: 10px;
    box-sizing: border-box;
}

.list-image li a {
    display: block;
    width: 100%;
    height: 100%;
    border: 1px solid #ccc;
    padding: 3px;
}

.list-image li img {
    width: 100%;
}

.list-question li {
    margin: 5px 0;
}

.list-question li .fa {
    margin-top: 2px;
}

.list-question li .fa-check-square {
    color: #2952ab;
}

.list-question .unchecked,
.list-question li .fa-square,
.list-question li .fa-square + span {
    color: #a94442;
}

.file-list {
    margin: 0;
    padding: 0;
}

.file-list,
.file-list li {
    list-style: none;
}

.file-list li a {
    color: #555;
}

.file-list li button {
    background-color: transparent;
    border-color: transparent;
}

.error-wrapper {
    padding-top: 100px;
    font-size: 15px;
    color: #555;
}

.error-wrapper strong {
    font-size: 25px;
}

.error-wrapper .fa {
    display: inline-block;
    width: 100px;
    height: 100px;
    margin-bottom: 20px;
    font-size: 80px;
}

.error-wrapper .fa:before {
    vertical-align: middle;
}

.error-wrapper .fa:after {
    content: '';
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}

.calendar {
    display: inline-block;
    vertical-align: middle;
}

.ui-datepicker {
    z-index: 10 !important;
}

.ui-datepicker .ui-datepicker-month {
    height: 25px;
}

.ui-datepicker .ui-icon {
    text-indent: 0;
}

.ui-datepicker .ui-datepicker-prev-hover,
.ui-datepicker .ui-datepicker-next-hover {
    top: 2px;
    cursor: pointer;
}

.ui-datepicker .ui-datepicker-prev-hover {
    left: 2px;
}

.ui-datepicker .ui-datepicker-next-hover {
    right: 2px;
}

.ui-datepicker .ui-datepicker-prev span,
.ui-datepicker .ui-datepicker-next span {
    text-align: center;
}

.ui-datepicker .ui-datepicker-prev span:before,
.ui-datepicker .ui-datepicker-next span:before {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome !important;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.ui-datepicker .ui-datepicker-prev span:before {
    content: '\f053';
}

.ui-datepicker .ui-datepicker-next span:before {
    content: '\f054';
}

.ui-timepicker-container.bottom {
    top: auto;
    bottom: -20px;
}

.ui-sortable-handle, .drag {
    cursor: move;
}

.daterangepicker td.active,
.daterangepicker td.active:hover {
    background-color: #0f81cf;
}

.grade {
    margin-bottom: 0;
}

.grade li {
    margin-top: 5px;
}

.grade label {
    display: inline-block;
    width: 130px;
    margin-right: 3px;
}

.grade input {
    width: 70px;
}

.grade--choice label {
    width: 100%;
}

.grade--choice input[type="radio"], .grade--choice input[type="checkbox"] {
    width: auto;
}

.schedule-box {
    padding: 15px 0 5px;
    border-top: 1px dashed #ddd;
}

.schedule-box:first-child {
    padding-top: 5px;
    border-top: none;
}

.schedule-box .schedule-date:after {
    content: '';
    clear: both;
    display: block;
}

.schedule-box .schedule-time {
    list-style: none;
}

.schedule-box .schedule-time li {
    padding-top: 10px;
}

.box.schedule:first-of-type {
    border-top: 1px solid #d7d7d7;
}

/* jcf style */
.jcf-button {
    display: inline-block;
    vertical-align: top;
    position: relative;
    overflow: hidden;
    border: 1px solid #777;
    background: #fff;
    margin: 0 10px 10px 0;
    padding: 5px 10px;
}

.jcf-button .jcf-real-element {
    position: absolute;
    min-height: 100%;
    min-width: 100%;
    outline: none;
    opacity: 0;
    padding: 0;
    margin: 0;
    border: 0;
    bottom: 0;
    right: 0;
    left: 0;
    top: 0;
}

.jcf-number {
    display: inline-block;
    position: relative;
    height: 32px;
}

.jcf-number input {
    -moz-appearance: textfield;
}

.jcf-number input::-webkit-inner-spin-button,
.jcf-number input::-webkit-outer-spin-button {
    -webkit-appearance: none;
}

.jcf-number input {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 3px 27px 3px 7px;
    margin: 0;
    height: 100%;
}

.jcf-number .jcf-btn-dec,
.jcf-number .jcf-btn-inc {
    position: absolute;
    background: #eee;
    width: 20px;
    height: 15px;
    right: 1px;
    top: 1px;
}

.jcf-number .jcf-btn-dec {
    top: auto;
    bottom: 1px;
}

.jcf-number .jcf-btn-dec:hover,
.jcf-number .jcf-btn-inc:hover {
    background: #ccc;
}

.jcf-number.jcf-disabled .jcf-btn-dec:hover,
.jcf-number.jcf-disabled .jcf-btn-inc:hover {
    background: #ccc;
}

.jcf-number .jcf-btn-dec:before,
.jcf-number .jcf-btn-inc:before {
    position: absolute;
    content: '';
    width: 0;
    height: 0;
    top: 50%;
    left: 50%;
    margin: -6px 0 0 -4px;
    border-width: 4px;
    border-style: solid;
    border-color: transparent transparent #000 transparent;
}

.jcf-number .jcf-btn-dec:before {
    margin: -1px 0 0 -4px;
    border-color: #000 transparent transparent transparent;
}

.jcf-number.jcf-disabled .jcf-btn-dec:before,
.jcf-number.jcf-disabled .jcf-btn-inc:before,
.jcf-number .jcf-btn-dec.jcf-disabled:before,
.jcf-number .jcf-btn-inc.jcf-disabled:before {
    opacity: 0.3;
}

.jcf-number.jcf-disabled input {
    background: #ddd;
}

.jcf-disabled {
    background: #ddd !important;
}


.no-required-file {
    position: relative;
    display: inline-block;
    padding: 5px;
    border: 1px dashed #ccc;
}

.no-required-file input[type="file"] {
    display: inline-block;
    vertical-align: middle;
}

.no-required-file .btn-remove {
    display: none;
}

.is-file .btn-remove {
    display: inline-block;
    margin-left: 5px;
    vertical-align: middle;
}

.is-file .btn-remove i {
    color: #d43f3a;
}

.no-required-file .form-file {
    opacity: 0;
    -webkit-appearance: none;
}

.no-required-file .form-file ~ label {
    position: absolute;
    top: 5px;
    left: 5px;
    padding: 0 5px;
    line-height: 20px;
    border: 1px solid #ccc;
    font-size: 11px;
}

.img-list {
    margin-top: 10px;
    padding: 20px;
    border: 1px dashed #ccc;
    border-radius: 3px;
}

.img-list li {
    position: relative;
    display: inline-block;
    margin: 0 10px;
    padding-bottom: 20px;
    text-align: center;
}

.img-list li input[type="radio"] {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
}

.img-list label {
    display: block;
    width: 100px;
    height: 100px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    cursor: pointer;
}

.img-list label > span {
    white-space: normal;
    vertical-align: middle;
}

.img-list label > span:after {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

.img-list label img {
    max-width: 100%;
    max-height: 100%;
}

.img-list li input[type="radio"]:checked + label {
    background-color: #eee;
}

div#image {
    border-top: 1px solid #ddd;
}

@media (min-width: 768px) {
    .modal-dialog {
        width: 1024px;
    }

    .modal-dialog.wide {
        width: 1600px;
    }

    #add-admin .modal-dialog,
    #add-country .modal-dialog,
    #product-srch .modal-dialog,
    #seminar-copy .modal-dialog,
    #manage-detail .modal-dialog,
    #instructor-srch .modal-dialog,
    .modal-dialog.narrow {
        width: 700px;
    }

}

.received-quantity.form-inline .form-control {
    width: 55px;
}


#teacherList img,
#productChoiceList img {
    max-width: 100%;
    max-height: 100%;
}

.modal-transperfact .modal-body {
    background-color: #f5f5f5;
}

.modal-transperfact .box {
    background-color: #f5f5f5;
    border: 0;
}

.modal-transperfact .content {
    border-top: 0;
}

.modal-transperfact .section {
    margin-bottom: 15px;
    padding: 0 15px 15px;
    border-width: 1px 0;
    border-style: solid;
    border-color: #ddd;
    background-color: #fff;
}

.modal-transperfact h1 {
    font-size: 18px;
    font-weight: bold;
}

.modal-transperfact h2, .modal-transperfact .box-title{
    font-size: 14px;
    font-weight: bold;
    padding: 10px;
    background-color: #f4f4f4;
}

.modal-footer .btn + .btn {
    margin-left: 0;
}

.transperfact .col-md-6 {
    width: 49%;
}

.transperfact .col-split {
    display: flex;
    float: left;
    width: 2%;
    padding-top: 35px;
}

.transperfact li {
    margin-top: 15px;
    padding-top: 15px;
}

.transperfact .row label + textarea {
    margin-top: 5px;
}


/* ckeditor */
.cke_chrome {
    border-top: 0 !important;
}

.cke_top {
    position: sticky !important;
    top: 115px;
    border-top: 1px solid #d1d1d1 !important;
}

.cke_maximized .cke_top {
    position: static !important;
}

.cke_inner .content-box {
    padding: 20px !important;
    background-color: #f9f9f9 !important;
}

.cke_inner .dot-box {
    padding: 20px;
    border: 1px dashed #ccc;
}

.dialog-upload-loading .cke_dialog:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    z-index: 99999;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.5);
}

.cke_reset_all .editor-image-lists {
    white-space: normal;
    width: 100%;
    max-width: 800px;
}

.cke_reset_all .editor-image-lists span {
    text-align: center;
    white-space: nowrap;
    vertical-align: top;
    display: inline-block;
    width: 100px;
    height: 100px;
    margin: 0 2px 2px;
    border: 1px solid #f4f4f4;
    background-color: #fff;
    cursor: move;
}

.cke_reset_all .editor-image-lists span:after {
    content: '';
    vertical-align: middle;
    display: inline-block;
    height: 100%;
}

.cke_reset_all .editor-image-lists span img {
    vertical-align: middle;
    display: inline-block;
    max-width: 100%;
    max-height: 100%;
    cursor: move;
}

.cke_reset_all .dialog-upload-form .file {
    position: relative;
    height: 50px;
}

.cke_reset_all .dialog-upload-form .file:after {
    content: 'Selected files ';
    font-size: 20px;
    text-align: center;
    line-height: 46px;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    border: 2px dotted #ccc;
}

.cke_reset_all .dialog-upload-form input {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.cke_reset_all .dialog-upload-loadings {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 999999;
    height: 5px;
    background-color: #c9302c;
    transition: width 0.3s;
}

.success-tour {
    position: relative;
}

.btn-toggle-table {
    position: absolute;
    top: 5px;
    right: 10px;
}

.hide-list .btn-toggle-table .fa {
    transform: rotate(180deg);
}

.hide-list tr {
    display: none;
}

.hide-list tr:first-child {
    display: table-row;
}

.term-calendar {
    margin-top: 10px;
}

.term-calendar:first-child {
    margin-top: 0;
}

.term-calendar.meal-check {
    width: 100%;
}

.term-calendar.meal-check .form-control {
    max-width: 150px;
}

.term-calendar.meal-check .form-inline > .btn {
    float: right
}

td .term-calendar {
    margin-top: 0;
}

.form-calendar .term-calendar {
    margin-top: 0;
}

.country-list {
    margin-left: -10px;
}

.country-list .checkbox-inline:first-child {
    margin-left: 15px;
}

.country-list .checkbox-inline input {
    top: 50%;
    transform: translateY(-50%);
    margin-top: 0;
}

.select-round-country .checkbox-inline {
    margin-left: 0;
    margin-right: 15px;
}

.fc-content {
    text-align: right;
}

.fc-event.empty {
    background-color: transparent;
    color: #3788d8;
}

.btn-side {
    display: none;
}

.summary-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #eee;
}

.summary-result em {
    font-style: normal;
}

.btn-trans {
    border: 1px solid #ccc;
}

.btn-trans, .trans-area {
    background-color: rgba(15, 129, 207, 0.2);
}

.row .form-group {
    margin-bottom: 0;
}

.align-center {
    display: flex;
    align-items: center;
}

.justify-end {
    display: flex;
    justify-content: flex-end;
}

.sweet-alert:focus {
    outline: none;
}

.sweet-alert .sa-icon.sa-success::before {
    top: -15px;
}

.sweet-alert h2 {
    font-size: 20px;
}

.badge {
    font-weight: 500;
}

.badge.global {
    height: 22px;
    line-height: 22px;
    margin-left: 5px;
    padding: 0 10px;
    font-size: 12px;
    color: #fff;
    background-color: #2b8fd4;
    border-radius: 22px;
}

/* calendar */
.fc-view-container {
    padding: 10px;
    letter-spacing: -0.5px;
    color: #555;
    background-color: #fafafa;
}

.fc-head {
    line-height: 30px;
}

.fc-head tr {
    background-color: #f5f5f5;
    font-size: 12px;
    text-transform: uppercase;
}

.fc-sun {
    color: #cd0000;
}

.fc-sat {
    color: #0c68a7;
}

.fc-day-number {
    color: inherit;
}

.fc-time {
    display: none
}

.fc-ltr .fc-dayGrid-view td.fc-day-top .fc-day-number,
.fc-ltr .fc-basic-view td.fc-day-top .fc-day-number {
    display: inline-block;
    padding: 5px;
    float: none;
}

.fc .alert-info {
    color: inherit;
}

.fc-popover {
    background-color: #fff;
}

.fc-ltr .fc-popover .fc-header span.fc-title {
    float: none;
    display: block;
    margin-top: 10px;
    text-align: center;
}

.fc-popover .fc-content {
    color: rgba(0, 0, 0, .8);
}

.box .fc-bootstrap4 .fc-row {
    border-top: 1px solid #ddd;
}

.box .fc-bootstrap4 .fc-head-container {
    border-bottom-width: 0;
}

.fc-bootstrap4 .fc-row tr td.fc-event-container .fc-event,
.fc-event-container .fc-event {
    padding: 0 10px;
    line-height: 24px;
    border: 0;
    border-radius: 0;
    background-color: #c6dff1;
    color: rgba(0, 0, 0, .8);
    font-size: 14px;
}

.fc-event-container a.fc-event {
    cursor: pointer;
}

.fc-event-container a.fc-event:hover {
    background-color: #0f81cf;
}

.fc-event-container a.fc-event:hover .fc-title span:before {
    background-color: rgba(255, 255, 255, .2);
}

.fc-event-container .fc-day-grid-event {
    margin: 2px 4px;
}

.fc-event-container .fc-event.fullColor {
    background-color: rgba(200, 235, 200, 1);
}

.fc-event-container .fc-event.fullColor:hover {
    background-color: #20a120;
}

.fc-event-container .fc-content {
    text-align: center;
}

.fc-title span {
    position: relative;
    display: inline-block;
    min-width: 50px;
}

.fc-title span:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 1px;
    height: 10px;
    background-color: rgba(0, 0, 0, .1);
}

.fc-title .time {
    margin-right: 15px;
}

.fc-title .lang {
    text-align: center;
    text-transform: uppercase;
}

.fc-title .occupancy {
    text-align: right;
}

.fc-toolbar {
    padding: 20px 10px;
    border-top: 1px solid rgba(215, 215, 215, .5);
    background-color: #fafafa;
}

.fc-toolbar .fc-button,
.fc-toolbar .btn {
    width: 35px;
    height: 35px;
    padding: 5px;
    border-radius: 4px;
}

.fc-toolbar .fc-today-button {
    width: auto;
    padding: 5px 10px;
    background-color: #2c3e50;
    color: #fff;
    border: 1px solid #2c3e50;
}

div.fc-toolbar.fc-header-toolbar {
    margin: 0;
}

.fc-button-group .fc-button-primary,
.btn-group .btn-primary {
    background-color: #fff;
    border-color: #ccc;
    color: #777;
}

.fc-button:disabled {
    transition: opacity .3s;
}

button.fc-button:disabled,
.fc-toolbar .btn:disabled {
    opacity: 0.3;
}

.fc-toolbar .btn:focus {
    outline: transparent;
}

button.fc-button-primary:focus {
    box-shadow: none;
}

.fc-bootstrap4 tr td.fc-today,
.fc-unthemed tr td.fc-today {
    background-color: rgba(77, 157, 212, 0.1);
}

.fc-today .fc-day-number {
    font-weight: 700;
}

.fc-more-cell {
    text-align: right;
}

.meal .fc-scroller {
    height: auto !important;
    overflow-y: auto;
}

.meal .fc-dayGrid-view .fc-body .fc-row {
    max-height: 10em;
}

.meal .fc-event.fullMeal {
    margin-top: 10px;
    font-size: 4em;
    font-weight: 700;
    color: rgba(0, 0, 0, .7);
}

.meal .fc-event-container a.fc-event:hover {
    background-color: transparent;
}

.meal .fc-event-container .fc-event {
    line-height: normal;
    background-color: transparent;
}

.meal .fc-title span:before {
    display: none;
}

.popover {
    max-width: 320px;
}

.cancel-reason {
    margin-top: 20px;
}

.cancel-reason div + div {
    margin-top: 5px;
}

/* mobile */

@media (max-width: 768px) {
    body {
        min-width: 0;
    }

    input[type="file"] {
        width: 100%;
    }

    .login {
        left: 20px;
        right: 20px;
        transform: translateY(-50%);
    }

    .navbar-header,
    .navbar-brand {
        height: 100%;
    }

    .navbar-brand {
        line-height: 50px;
        padding: 0 20px;
    }

    .navbar-brand > img {
        max-width: 120px;
        width: 100%
    }

    .nav-sidebar li:not(.mo) {
        opacity: .5;
        pointer-events: none;
    }

    .nav-sidebar .nav-second li a {
        background-color: transparent;
        border-color: transparent;
    }

    #header .navbar-fixed-top {
        min-width: 0;
    }

    #header .navbar-right {
        display: none;
    }

    .sidebar {
        width: 100%;
        padding-bottom: 60px;
        transform: translateY(-100%);
        transition: transform .3s;
        z-index: 1001;
    }

    .sidebar .manual {
        width: auto;
        right: 10px;
        bottom: 10px;
    }

    .sidebar.active {
        transform: none;
    }

    .sidebar ~ .epilogue {
        padding: 20px 20px 50px;
    }

    .epilogue .pull-right {
        float: none !important;
    }

    .epilogue .title {
        display: flex;
        flex-direction: column;
        margin-bottom: 10px;
    }

    .epilogue .active-sticky {
        left: 20px;
        right: 20px;
    }

    .epilogue .title > div {
        width: auto;
    }

    .epilogue .content {
        overflow: hidden;
    }

    .epilogue .content .row {
        overflow: scroll;
        margin-right: 0;
    }

    .epilogue .calendar {
        width: 100%;
    }

    .epilogue .calendar .input-group-addon {
        display: none;
    }

    .epilogue .calendar .input-group .input-icon {
        display: block;
        margin-top: 5px;
    }

    .epilogue .content .input-group {
        margin-top: 5px;
        width: 100%;
    }

    .epilogue .content .input-group-btn {
        width: 1px;
    }

    .epilogue .content .input-group .form-control {
        float: none;
        width: 100%;
    }

    .epilogue .box-footer .row {
        overflow: hidden;
    }

    .epilogue .modal-body .content {
        border-top: 0;
    }

    .epilogue-list .content .table {
        min-width: 1100px;
    }

    .epilogue-detail .btn-cancel,
    .epilogue-detail .btn-list,
    .epilogue-detail .btn-prev {
        display: none;
    }

    .epilogue-detail .stepwizard {
        display: none;
    }

    .epilogue-detail .content .table th,
    .epilogue-detail .content .table td {
        display: block;
        border-right: 0;
    }

    .content > .table-bordered {
        border: 0;
    }

    .btn-side {
        display: block;
        position: absolute;
        top: 50%;
        right: 10px;
        padding: 10px;
        transform: translateY(-50%);
        background-color: transparent;
        color: #fff;
    }

    .btn-side:hover,
    .btn-side:active,
    .btn-side:focus {
        color: #fff;
    }
}

.layer-dropdown {
    display: none;
    position: absolute;
    left: 50%;
    width: 150%;
    padding: 0 10px;
    transform: translateX(-50%);
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 5px;
}

.layer-dropdown p {
    margin: 5px 0;
}

.btn-dropdown {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #333;
}

.btn-dropdown .fa:before {
    margin-left: 4px;
    color: #0f80d0;
}

.btn-dropdown:hover ~ .layer-dropdown {
    display: block;
    z-index: 1;
}

.assign-info {
    margin-bottom: 15px;
    padding: 10px;
    background-color: #f7f7f7;
}

.assign-seminar {
    margin-bottom: 10px;
}

.assign-instructor strong ~ span {
    margin-left: 5px;
}

.assign-instructor span span + span:not(:empty):before {
    content: '/';
    display: inline-block;
    margin: 0 5px;
}

.instructor-default-info {
    display: flex;
    margin: 0 0 15px;
}

.instructor-photo {
    width: 200px;
    height: 200px;
}

.instructor-photo-area {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    border: 1px dashed #ccc;
}

.instructor-photo-area img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

.instructor-photo-area .no-required-file {
    position: relative;
    width: 100%;
    height: 100%;
    border: 0;
}

.instructor-photo-area .no-required-file .inner,
.instructor-photo-area .no-required-file .photo {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.instructor-photo-area .no-required-file .photo {
    display: flex;
    align-items: center;
    justify-content: center;
}

.instructor-photo-area .file-attach {
    position: absolute;
    left: -6px;
    bottom: 3px;
    width: 200px;
    overflow: hidden;
}

.instructor-photo-area .file-attach .form-file ~ label {
    top: 0;
    left: auto;
    right: 1px;
    background-color: #efefef;
}

.instructor-detail {
    flex: 1;
    margin-left: 15px;
}

.instructor-detail tr {
    height: 50px;
}

.capability > div {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    border-top: 1px solid #eee;
}

.capability > div:first-child {
    border-top: 0;
}

.capability > div > span {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 15px;
}

.capability .checkbox-inline {
    width: 200px;
    padding: 10px 15px 10px 30px;
    background-color: #f7f7f7;
}

.statistics {
    margin: 10px 0;
    border: 1px solid #ddd;
    border-radius: 10px;
    background-color: #fff;
    overflow: hidden;
}

.statistics li {
    list-style: none;
}

.chart {
    display: flex;
}

.chart .box {
    display: flex;
    flex: 1 1 50%;
    flex-direction: column;
    align-items: center;
    margin-bottom: 0;
    padding-bottom: 50px;
    border: 0;
}

.chart .box + .box {
    border-left: 1px solid #efefef;
}

.chart .box h4 {
    margin: 50px 0 30px;
    font-weight: 700;
}

.chart .chart-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 400px;
}

.chart .type li {
    display: flex;
    justify-content: space-between;
    min-width: 150px;
    margin: 5px 0;
}

.chart .type li span {
    margin-left: 10px;
}

.chart-my-lecture {
    width: 150px;
    height: 150px;
}

.status {
    background-color: #eaf3fab3;
}

.status ul {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
}

.status ul li {
    display: flex;
    align-items: center;
    flex-direction: column;
    padding: 20px 50px;
}

.status ul li strong {
    color: #555;
    font-weight: 400;
}

.status ul li span {
    font-size: 24px;
    font-weight: 700;
}

.box-wrap {
    padding: 15px;
    border-bottom-width: 1px;
}

.sms-box {
    margin-bottom: 15px;
}

.sms-edit {
    display: flex;
    flex-wrap: wrap;
}

.sms-edit-box {
    flex-basis: calc((100% - 10px) / 2);
}

.sms-edit-box + .sms-edit-box {
    margin-left: 10px;
}

.sms-form {
    flex-basis: 50%;
}

.sms-form textarea {
    min-height: 200px;
}

.sms-number {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex-basis: 50%;
    padding-left: 30px;
}

.sms-number > div {
    display: flex;
    align-items: center;
}

.sms-number strong {
    display: inline-block;
    min-width: 80px;
    margin-right: 10px;
}

.sms-number ul {
    display: inline-flex;
    margin-bottom: 0;
}

.sms-number ul li {
    margin-right: 10px;
}

.sms-number .btn-send {
    align-self: flex-end;
}

.sms-edit-box ~ .sms-number {
    padding-left: 0;
    display: flex;
    flex-direction: row;
    flex-basis: 100%;
    margin-top: 10px;
}

.sms-edit ~ .sub-title,
.staff-wrap {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px dashed #ddd;
}

.staff-list .table {
    border-top-width: 1px;
}

.sub-title {
    font-size: 16px;
    font-weight: 700;
}

.row ~ .sub-title {
    margin-top: 15px;
}

.instructor-calendar .fc-content-skeleton {
    pointer-events: none;
}

.instructor-schedule {
    margin-top: -1px;
}

.instructor-schedule ins,
.instructor-schedule a:hover {
    text-decoration: none;
}

.instructor-schedule .link-default {
    color: #333;
}

.instructor-schedule .instructor-check {
    position: absolute;
    top: 0;
    left: 3px;
}

.instructor-schedule .fa-user-circle {
    display: block;
    margin-top: 3px;
}

.instructor-schedule .btn[disabled] {
    color: #aaa;
}

.instructor-schedule td .possible,
.schedule-info td .possible {
    color: #0f80d0;
}

.instructor-schedule td .impossible,
.schedule-info td .impossible {
    color: #ff5b5b;
}

.instructor-schedule td .response,
.schedule-info td .response {
    color: #bbb;
}

.instructor-schedule td.confirmed:after {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    bottom: -1px;
    right: -1px;
    border: 1px dashed #ff5b5b;
    pointer-events: none;
}

.instructor-schedule tr:first-child td.confirmed:after {
    top: 0;
}

td.type-success {
    background-color: #ffd7d3;
}

td.type-buup {
    background-color: #ffe174;
}

td.type-kbnh {
    background-color: #c5eaff;
}

td.type-local {
    background-color: #80d1f7;
}

.gender-man:after, .gender-woman:after, .icon-update:after {
    content: '';
    position: absolute;
    top: 5px;
    right: 5px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1px solid #fff;
}

.gender-man:after {
    background-color: #4acdff;
}

.gender-woman:after {
    background-color: #ff8383;
}

.icon-update:after {
    background-color: orange;
}

.feedback-period {
    margin-top: 5px;
    font-size: 13px;
}

.feedback-period > span {
    display: block;
}

.feedback-period .ongoing {
    color: #ff5b5b;
    font-weight: 500;
}

.seminar-area:before, .seminar-area:after {
    display: inline-block;
}

.seminar-area:before {
    content: '[';
}

.seminar-area:after {
    content: ']';
}

.seminar-date {
    font-weight: 500;
}

.schedule-info .sub-title {
    font-size: 14px;
}

.schedule-info h6 {
    margin-top: 0;
}

.schedule-info ul li {
    display: flex;
    align-items: center;
    margin: 10px 0;
}

.schedule-info ul li strong {
    margin-right: 5px;
}

.schedule-standard td p {
    margin: 10px;
}

.schedule-standard td strong {
    margin-right: 4px;
}

.schedule-standard td span {
    display: block;
    margin: 3px 0;
}

.list-info {
    position: relative;
    display: inline-block;
    width: 12px;
    height: 12px;
    margin: 0 1px;
}

.list-info.circle:after {
    position: absolute;
    top: 1px;
    left: 1px;
    right: auto;
}

.list-info.outlined {
    border: 1px dashed #ff5b5b;
}

.relationship .deletable,
.reservation-calendar .erasable {
    margin-top: 5px;
    margin-bottom: 0;
}

.modified {
    color: #ff5b5b;
}

.spouse {
    color: #bbb;
}

.layer-instructor .text-muted {
    max-height: 150px;
    padding: 20px;
    line-height: 1.5;
    background-color: #f7f7f7;
    font-size: 14px;
    text-align: left;
    overflow-y: scroll;
}

.db-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    margin: 0;
}

.db-page .error-wrapper {
    padding-top: 0;
}

.db-page strong {
    display: block;
    margin-bottom: 10px;
    text-align: center;
}

.db-page .summary {
    margin: 20px 0 30px;
    padding: 30px;
    background-color: #e7e7e7;
}

.db-page .summary p {
    margin: 10px 0;
}

.db-page .detail {
    line-height: 1.5;
}
.inlinecustom [class*="-inline"] {
	padding:0;
}
.inlinecustom label {
	position: relative;
    
}

.inlinecustom input {
	position:absolute;
	margin:0;
	top:10px;
	right:10px;
}
.inlinecustom input + span {
	display:inline-block;
	border: 1px solid #000;
    padding: 30px 10px 10px;
}
.inlinecustom input:checked + span {
	border-color:#0f81cf;
	background-color:#0f81cf;
}
.inlinecustom input:checked + span * {
	color:#fff;
}
.inlinecustom .txt {
	display:inline-block;
	position:relative;
	padding-left:20px;
}
.inlinecustom .txt i{
	position:absolute;
	top:0;
	left:0;
}
.inlinecustom .txt em{
	vertical-align:top;
	font-size:12px;
	line-height:20px;
}
.inlinecustom.single {
	margin-top:-10px;
}
.inlinecustom.single .checkbox-inline {
	margin:10px 10px 0 0;
	
}
.inlinecustom.single input {
	top:14px;
	right:auto;
	left:30px;
}
.inlinecustom.single input + span {
	padding:10px 10px 10px 30px;
	min-width:100px;
}
.newQues {
	margin-bottom:15px;
}
.newQues .table-bordered {
	border: 1px solid #ddd;
}
.box .table-bordered + .table-bordered {
	border-top:1px solid #ddd;
}
#popover.surveyType + .popover {width:320px;}

.input-icon-file {position:relative;padding-right:39px;}
.input-icon-file input[type="file"] {display:none;}
.input-icon-file label {position:absolute;right:0;top:0;width:40px;line-height:30px;background-color:#fff;color:#333;text-align:center;font-size:15px;border:1px solid #ddd;}
.input-icon-file .list {min-height:32px;border:1px solid #ddd;box-sizing:border-box;}
.input-icon-file .list > div {height:30px;} 
.input-icon-file #dropzone {margin-top:5px;}
.input-icon-file .image-wrap img {width:200px;height:117px;}

.imgAddList {position:relative;padding:0 38px 0 30px;}
.imgAddList.etcList {padding-right:0;}
.imgAddList [class*="-inline"] {position:absolute;top:0;left:0;padding-top:6px;}
.imgAddList .input-icon-file {position:absolute;top:0;right:0;width:40px;height:32px;}
.imgAddList #dropzone {margin-top:5px;}
.imgAddList #dropzone img {width:140px;height:94px;}

.questionCon > .row {margin-top:10px;}
.questionCon > p {margin-top:10px;}
.questionCon + .questionCon {margin-top:10px;} 

.score-form .input-icon > .form-control {padding-left:12px;}
.score-form .form-control.left {border-right:0 none;}
.score-form .form-control.right {border-left:0 none;}
.score-form .input-group-addon {background:#fff;border:0 none;}
.right-space .form-group {margin-right:10px;}
.innerList input[type="checkbox"] {margin-right:10px;}
.nav-tabs + .input-group {margin-top:15px;}
.table.text-table > thead > tr > th {position:relative;height:43px;font-size:14px;}
.ellipsis2 {display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient: vertical;overflow:hidden;text-overflow:ellipsis;}
.sideBtn {display:inline-block;margin:10px 0;}
.table-center th {height:40px;background-color: #eee;background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f2f2f2), to(#fafafa));background-image: -webkit-linear-gradient(top, #f2f2f2 0, #fafafa 100%);}
.table-center th, .table-center td {text-align:center;}
.surveyBox {padding:10px 20px;border:1px solid #ddd;border-radius:10px;background:#efefef;} 
.surveyBox dt {font-weight:bold;}
.surveyBox dd {margin-top:5px;padding-left:20px;font-size:12px;color:#333;}
.surveyBox label {line-height:20px;}
.surveyBox label input {margin-top:2px;}
.surveyBox + .surveyBox {margin-top:5px;}
.borderBt {border:1px solid #ddd;border-width:1px 0;}
/* 설문조사 미리보기 */
.surveyn  {background:#fafafa;border-bottom:1px solid #d7d7d7;}
.surveyn .preview {position:relative;width:375px;padding-bottom:100px;margin:20px auto;}
.surveyn .preview a, .surveyn .preview button, .surveyn .preview input {
	outline:0;
}
.surveyn .preview .fixed-bottom {
	position: absolute;
	bottom:0;
	left:0;
	width:100%;
	display:table;
}
.surveyn .preview .fixed-bottom a {
	display:table-cell;
	height:55px;
	text-align:center;
	vertical-align:middle;
	background-color:#9c9c9c;
	font-size:16px;
	color:#fff;
}
.surveyn .preview .fixed-bottom a.btn__primary {
	background-color:#19b4e0;
}
.surveyn .preview ul {
	list-style: none;
    list-style-image: none;
    padding-left:0;
    margin-bottom:0;
}
.surveyn .preview .input-textarea {
	position: relative;
    padding: 10px;
    font-size: 13px;
    line-height: 1.3;
    box-sizing: border-box;
    border: 1px solid #e5e5e5;
    background-color: #f9f9f9;
}
.surveyn .preview .input-text {
    padding: 10px;
    font-size: 13px;
    line-height: 1.3;
    box-sizing: border-box;
    border: 1px solid #e5e5e5;
}
.surveyn .preview .form-line {
	display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 3px 0;
}
.surveyn .preview img {
    width: 100%;
}
.surveyn .preview .required {
    color: #e35758;
}
.surveyn .preview .svy-desc {
    font-size: 13px;
    line-height: 18px;
    margin-bottom: 8px;
}
.surveyn-info {
    margin: 0 0 28px;
    border-radius: 5px;
    overflow: hidden;
}
.surveyn-info h2 {
    padding: 12px 30px;
    margin:0;
    font-size: 21px;
    font-weight: 500;
    line-height: 25px;
    color: #fff;
    text-align: center;
    background: #00b5ef;
}
.surveyn-info .info-cont {
    padding: 20px 30px;
    border-radius: 0 0 5px 5px;
    border: 1px solid #eee;
    border-top: 0 none;
    text-align: center;
    background: #fff;
}
.surveyn-info .info-cont > strong {
    font-size: 15px;
    color: #333;
    line-height: 20px;
}
.surveyn-info .info-cont > p {
    margin-top: 18px;
    font-size: 13px;
    line-height: 20px;
    color: #757575;
}
.surveyn-info .info-cont .event-info {
    margin-top: 15px;
    padding: 18px 20px 0;
    border-top: 1px solid #eee;
}
.surveyn-info .info-cont .event-info .btn-gift {
	display:inline-block;
    position: relative;
    padding-left: 38px;
    text-align: left;
    font-size: 14px;
    color: #101010;
    line-height: 20px;
    border:0 none;
    background:none;
}
.surveyn-info .info-cont .event-info .btn-gift:hover,.surveyn-info .info-cont .event-info .btn-gift:focus {
	text-decoration: none;
}
.surveyn-info .info-cont .event-info .btn-gift strong {
    display: block;
    color: #00b5ef;
}
.surveyn-info .info-cont .event-info .btn-gift .icon {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    background: url(../images/survey/gift-big.png) no-repeat 50% 50%;
    background-size: cover;
    width: 30px;
    height: 30px;
}
.surveyn .svy-item {
    margin-bottom: 15px;
    padding: 12px 15px;
    border: 1px solid #eee;
    background-color: #fff;
}
.surveyn .svy-item-ask {
    margin-bottom: 5px;
    font-size: 14px;
    line-height: 20px;
    color: #010101;
}
.surveyn .svy-item-info {
    margin-bottom: 5px;
    font-size: 13px;
    line-height: 20px;
    color: #757575;
}
.surveyn .svy-item-ask .img {
	position:relative;
	padding-top:59%;
	margin-top:8px;
	overflow:hidden;
	background:#f2f2f2;
}
.surveyn .svy-item-ask .img img {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	height: auto;
	transform: translate(-50%,-50%);
}
.surveyn .svy-item-asw .asw-list {
    margin-top: 12px;
}
.surveyn .svy-item-asw .asw-list > li {
    font-size: 13px;
    color: #666;
    text-align: left;
}
.surveyn .svy-item-asw .asw-list > li + li {
    margin-top: 10px;
}
.surveyn .svy-item-asw .asw-list > li .etc-form {
	border-width: 0 0 1px 0;
	border-style: solid;
	border-color: #eee;
	width: calc(100% - 30px);
	height: 30px;
	margin-left:30px;
	font-size:13px;
	color:#666;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: border .3s;
	-o-transition: border .3s;
	transition: border .3s;
}
.surveyn .svy-item-asw .asw-list > li .etc-form:focus {
	outline: 0;
	border-color: #aaa;
}
.surveyn .svy-item-asw .asw-list > li label {
    display: inline-block;
    margin-bottom: 0;
    margin-top:0;
}
.surveyn .svy-item-asw .asw-list > li label input {
    position: absolute;
    top: 0;
    left: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    opacity: 0;
}
.surveyn .svy-item-asw .asw-list > li label .form {
    display: inline-flex;
    position: relative;
    padding-left: 30px;
    align-items: center;
    min-height: 22px;
}
.surveyn .svy-item-asw .asw-list > li label .img {
    display:block;
	position:relative;
	padding-top:67%;
	overflow:hidden;
	background:#f2f2f2;
}
.surveyn .svy-item-asw .asw-list > li label .img img {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	height: auto;
	transform: translate(-50%,-50%);
}
.surveyn .svy-item-asw.img .asw-list {
    width: calc(100% + 12px);
    margin-left: -6px;
    font-size: 0;
    margin-top: 0;
}
.surveyn .svy-item-asw.img .asw-list > li {
    display: inline-block;
    width: calc(50% - 1px);
    padding: 0 6px;
    vertical-align: top;
    margin-top: 10px;
    box-sizing: border-box;
}
.surveyn .svy-item-asw.img .asw-list > li.etc {
	width:100%;
	
}
.surveyn .svy-item-asw.img .asw-list > li .img {
    margin-bottom: 6px;
}
.surveyn .svy-item-asw.img .asw-list > li label {
    display: block;
}
.surveyn .svy-item .input-textarea {
    width: 100%;
    resize: none;
}
.surveyn .svy-item .byte {
    margin-top: 5px;
    font-size: 11px;
    line-height: 1;
    text-align: right;
    color: #757575;
}
.surveyn .svy-item .radio i {
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    min-width: 20px;
    border-radius: 50%;
    border: 1px solid #e5e5e5;
    background-color: #fff;
}
.surveyn .svy-item .radio i:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #e5e5e5;
}
.surveyn .svy-item .radio input:checked ~ i:after {
    background-color: #00b5ef;
}
.surveyn .svy-item .checkbox input ~ i {
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    min-width: 20px;
    border-radius: 50%;
    border: 1px solid #e5e5e5;
    background-color: #fff;
    box-sizing:content-box;
}
.surveyn .svy-item .checkbox input ~ i:before {
	content: '';
	position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 12px;
    height: 11px;
    background: url(../images/survey/check-white3.png) no-repeat 0 0 / cover;
    z-index: 1;
}
.surveyn .svy-item .checkbox input:checked ~ i {
    border-color: #00b5ef;
    background-color: #00b5ef;
}
.surveyn .svy-item .checkbox input:checked ~ i:before {
    background: url(../images/survey/check-white2.png) no-repeat 0 0 / cover;
}
.surveyn .svy-item-short .input-textarea {
    height: 55px;
}
.surveyn .svy-item-desc .input-textarea {
    height: 130px;
}
.surveyn .svy-item-score .info {
    margin-top: 5px;
    overflow: hidden;
    font-size: 11px;
    color: #757575;
}
.surveyn .svy-item-score .info .left {
    width: 50%;
    float: left;
}
.surveyn .svy-item-score .info .right {
    width: 50%;
    float: right;
    text-align: right;
}
.surveyn .svy-item-score .slider-bar {
    position: relative;
    margin: 5px 1px 8px;
    height: 20px;
    border-radius: 10px;
    border: 1px solid #e5e5e5;
    background-color: #f9f9f9;
}
.surveyn .svy-item-score .slider-bar .ui-slider-handle {
    display: block;
    position: absolute;
    z-index: 2;
    width: 22px;
    height: 22px;
    top: -2px;
    margin-left: -11px;
    background: #fff;
    border: 1px solid #c5c5c5;
    border-radius: 50%;
    box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.2);
    cursor: default;
    touch-action: pan-x;
}
.surveyn .svy-item-score .slider-bar .ui-slider-handle:focus {
    outline: 0;
}
.surveyn .svy-item-score .slider-bar .ui-slider-range {
    position: absolute;
    z-index: 1;
    top: 0;
    height: 100%;
    border-radius: 10px 0 0 10px;
    background-color: #00b5ef;
}
.surveyn .svy-item-score .num {
    position: relative;
    width: 100%;
    padding-left: 6px;
    font-size: 15px;
    line-height: 1;
}
.surveyn .svy-item-score .num span {
    float: left;
    width: 10%;
    text-align: right;
}
.surveyn .svy-item-score .num span:first-child {
    float: none;
    width: auto;
    position: absolute;
    top: 0;
    left: -1px;
}
.surveyn .svy-item-score .num span.on {
    font-weight: 700;
    color: #00b5ef;
}
.surveyn .svy-item-score .num:after {
    content: "";
    display: table;
    clear: both;
}
.surveyn .svy-item-datetime .form-line {
    position: relative;
    border: 1px solid #e5e5e5;
    background-color: #f9f9f9;
}
.surveyn .svy-item-datetime .form-line .input-text {
    width: 100%;
    padding-left: 43px;
    border: 0 none;
    background-color: transparent;
}
.surveyn .svy-item-datetime .form-line .input-text::-moz-placeholder {
    color: #757575;
}
.surveyn .svy-item-datetime .form-line .input-text:-ms-input-placeholder {
    color: #757575;
}
.surveyn .svy-item-datetime .form-line .input-text::-ms-input-placeholder {
    color: #757575;
}
.surveyn .svy-item-datetime .form-line .input-text::placeholder {
    color: #757575;
}
.surveyn .svy-item-datetime .form-line .svy-icon {
    position: absolute;
    top: 50%;
    left: 15px;
    transform: translateY(-50%);
    pointer-events: none;
    width: 20px;
    height: 19px;
    background: url(../images/survey/calendar_sky.png) no-repeat 50% 50%;
    background-size: 100% auto;
    z-index: 1;
}
.surveyn .svy-item-datetime .form-line .svy-icon-time {
    left: 16px;
    width: 18px;
    height: 18px;
    background-image: url(../images/survey/time.png);
}
.surveyn .svy-item-datetime .form-line > div {
    position: absolute;
    width: calc(100% + 2px);
    margin: 4px 0 5px -1px;
    padding: 10px;
    background-color: #fff;
    border: 1px solid #e5e5e5;
    box-sizing: border-box;
    z-index: 5;
    border-radius:0;
    box-shadow:none;
}
.surveyn .svy-item-datetime .form-line > div:before,.surveyn .svy-item-datetime .form-line > div:after {
    display:none;
}
.surveyn .svy-item-datetime .form-line > div .table-condensed {
    width: 100%;
}
.surveyn .svy-item-datetime .form-line > div .table-condensed td,
.surveyn .svy-item-datetime .form-line > div .table-condensed th {
    position: relative;
    text-align: center;
}
.surveyn .svy-item-datetime .form-line > div .table-condensed td {
    color: #555;
}
.surveyn .svy-item-datetime .form-line > div .table-condensed .picker-switch {
    pointer-events: none;
}
.surveyn .svy-item-datetime .form-line > div .table-condensed .dow {
    padding: 10px 0 5px;
}
.surveyn__status {
    margin-top: -10px;
}
.surveyn__status .list__item__info {
    position: relative;
    display: block;
    padding: 17px 15px 0;
}
.surveyn__status .card__bookmark {
    top: -1px;
    right: 10px;
}
.surveyn__status .list__title {
    display: -webkit-box;
    width: 100%;
    font-size: 16px;
    letter-spacing: -0.5px;
    text-overflow: ellipsis;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.surveyn__status .list__event_title {
    width: 100%;
    margin-top: 7px;
    font-size: 13px;
    font-weight: 600;
    color: #00b5ef;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-wrap: normal;
    overflow: hidden;
    line-height: 15px;
}
.surveyn__status .list__event_title i {
    vertical-align: top;
    margin: 2px 3px 0 0;
}
.surveyn__status .list__item__util {
    margin-top: 10px;
}
.surveyn__status .list__item__date {
    font-size: 12px;
    line-height: 18px;
}
.surveyn__status .survey__status {
    margin-top: 5px;
    text-align: right;
}
.surveyn__status .survey__status .card__status.ing {
    border-color: #00b5ef;
    color: #00b5ef;
}
#svyEventModal .modal-dialog {
	width: 310px;
}
#svyEventModal .modal-body img {
	width:100%;
}
#svyEventModal .modal-footer {
	text-align:center;
}

.instructor-schedule .area { 
	font-weight:bold; 
} 
/*
.svy-chart {
	padding-right:50px;
}
*/
#upgradPreview .modal-dialog {
	width:380px;
}
#popup-grade {
    display: block;
    position: relative;
    width: 349px;
    height: 500px;
    background-color: rgba(0,0,0,0.8);
}

#popup-grade .inner {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 268px;
    height: 300px;
    background: url(../images/grade/bg_item.png);
    background-size: cover;
    text-align: center;
    padding-top: 23px;
    box-sizing: border-box;
}
#popup-grade .bird-area {
    display: inline-block;
    position: relative;
    z-index: 1;
}

#popup-grade .bird-item {
    position: relative;
    z-index: 1;
    perspective: 500px;
}

#popup-grade .bird-item .body {
    position: relative;
    width: 88px;
}

#popup-grade .bird-item .ring {
    position: absolute;
    width: 105px;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
}

#popup-grade .bird-item .wing {
    position: absolute;
    width: 75px;
    left: 50%;
    backface-visibility: hidden;
}

#popup-grade .bird-item .wing.left {
    transform-origin: right center;
    transform: rotate(-100deg) scale(0.8);
    margin-left: -98px;
}

#popup-grade .bird-item .wing.right {
    margin-left: 21px;
    transform-origin: left center;
    transform: rotate(100deg) scale(0.8);
}

@keyframes moveWing {
    70%, 100% {
        transform: rotate(0deg) rotateY(0deg)
    }
}

#popup-grade .grade {
    position: absolute;
    width: 36px;
    height: 36px;
    left: 50%;
    top: 70px;
    margin-left: -18px;
}

#popup-grade .grade i {
    display: block;
    position: relative;
    overflow: hidden;
    font-size: 0;
}

#popup-grade .grade i:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-image: url(../images/grade/ani_grade_shine.png);
    background-repeat: no-repeat;
    background-size: 22px auto;
    background-position: -22px 0;
    mask-image: url(../images/grade/ani_grade_01.png);
    mask-size: cover;
    -webkit-mask-image: url(../images/grade/ani_grade_01.png);
    -webkit-mask-size: cover;
    animation: moveShine 2s infinite alternate ease-in-out;
}
#popup-grade .grade i.grade_4:after {
    mask-image: url(../images/grade/ani_grade_02.png);
    -webkit-mask-image: url(../images/grade/ani_grade_02.png);
}
#popup-grade .grade i.grade_5:after {
    mask-image: url(../images/grade/ani_grade_03.png);
    -webkit-mask-image: url(../images/grade/ani_grade_03.png);
}
#popup-grade .grade i.grade_6:after {
    mask-image: url(../images/grade/ani_grade_04.png);
    -webkit-mask-image: url(../images/grade/ani_grade_04.png);
}
#popup-grade .grade i.grade_7:after {
    mask-image: url(../images/grade/ani_grade_05.png);
    -webkit-mask-image: url(../images/grade/ani_grade_05.png);
}
#popup-grade .grade i.grade_8:after {
    mask-image: url(../images/grade/ani_grade_06.png);
    -webkit-mask-image: url(../images/grade/ani_grade_06.png);
}
#popup-grade .grade i.grade_9:after {
    mask-image: url(../images/grade/ani_grade_07.png);
    -webkit-mask-image: url(../images/grade/ani_grade_07.png);
}

@keyframes moveShine {
    0%, 30% {
        background-position: -22px 0;
    }
    70%, 100% {
        background-position: 36px 0;
    }   
}

#popup-grade .grade img {
    width: 100%;
}
#popup-grade .grade i {
	display:none;
}
#popup-grade .grade i.active {
    display: block;
}

#popup-grade .star-item {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    font-size: 1px;
}

#popup-grade .star-item i {
    position: absolute;
    left: 50%;
    top: 80%;
    background: url(../images/grade/ani_star.png);
    background-size: cover;
    will-change: transform;
    opacity: 0;
	animation: starSparkle 0.2s infinite alternate;
}

@keyframes starSparkle {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

#popup-grade .text-area {
	padding:10px 10px 0;
    color: #fff;
    font-size: 14px;
    line-height: 18px;
}

#popup-grade .text-area strong {
    display: none;
    position: relative;
    margin:8px 0;
    font-size: 18px;
    color: #ffe97e;
}
#popup-grade .text-area strong.active {
    display: block;
}
#popup-grade .text-area strong:before, #popup-grade .text-area strong:after {
	content: '"';
}

#popup-grade .close {
    position: absolute;
    right: 0;
    top: 12px;
    width: 24px;
    height: 24px;
    background: none;
    border: 0;
    opacity:1;
}

#popup-grade .close:before,
#popup-grade .close:after {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    height: 2px;
    background: #fff;
    margin-top: -1px;
    transform: rotate(-45deg);
}

#popup-grade .close:after {
    transform: rotate(45deg);
}

#popup-grade .today {
	position: absolute;
	left: 62%;
	top: 97%;
	width: 45%;
	z-index: 1;
	padding-left: 14px;
	color: #fff;
	font-size: 0;
	text-align: left; 
}
#popup-grade .today i {
	position: absolute;
	top: 0;
	left: 0;
	width: 12px;
	height: 12px;
	border: 1px solid #fff; 
}
#popup-grade .today input {
	position: absolute;
	top: 0;
	left: 0;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	opacity: 0; 
}
#popup-grade .today input:checked + i {
	background: url(../images/grade/check.png) no-repeat 50% 50%;
	background-size: 12px; 
}
#popup-grade .today span {
	font-size: 10px;
	margin-left: 5px;
	line-height: 14px; 
}
#translateModal .modal-body {
	background:#f5f5f5;
}
#translateModal .sub-title {
	font-size:15px;
	padding-top:10px;
}
#translateModal .trans-select .form-control {
	min-width:150px;
}
#translateModal .trans-select .fa {
	margin:0 5px;
}
.trans-fild .checkbox-inline.allChk {
	margin-top:5px;
}
.trans-survey .row {
	position:relative;
}
.trans-survey .col-md-6 {
	width:50%;
}
.trans-survey .col-split {
	position:absolute;
	top:50%;
	left:50%;
	margin: -12px 0 0 -6px;
}
.trans-survey .row + .row {
	margin-top:10px;
}
.trans-survey .answer {
	margin-top:20px;
}
.trans-request .box{
	background: #fff;
    text-align: center;
    min-height: 90px;
    padding: 20px 10px;
    margin: 0;
    border:1px solid #ddd;
    border-width:1px 0;
}
.trans-request .box > p {
	white-space:pre;
}
.cir-img {
	position:relative;
	display:inline-block;
	width:86px;
	height:86px;
	border-radius:50%;
	overflow:hidden;
	border:1px solid #ccc;
	vertical-align: middle;
	background-color:#fff;
}
.cir-img img {
	position:absolute;
	width:100%;
	height:auto;
	top:0;
	left:50%;
	transform: translateX(-50%);
}
.info-txt {
	list-style: none;
    list-style-image: none;
    margin: 0;
    padding: 0;
    margin-top: 15px;
    text-align: center;
    font-size: 14px;
    line-height: 23px;
}
.info-txt li {
    position: relative;
    padding-left: 10px;
    font-size: 13px;
    color: #222;
    line-height: 23px;
    text-align: left;
}
.info-txt li:before {
    content: '';
    position: absolute;
    top: 10px;
    left: 0;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #222;
}
.info-txt li p {
	margin:0;
    font-size: 10px;
    line-height: 17px;
}
.info-img {
    display: block;
    width: 170px;
    margin: 20px auto 25px;
}
#lectorInfo .btn-secondary {
	width:100%;
	height:45px;
	line-height:30px;
	border-radius:3px;
	font-size:16px;
	font-weight:bold;
}
.enroll-img {
    position: relative;
    width: 230px;
    height: 230px;
    margin: 20px auto 37px;
    border-radius: 50%;
    border: 1px solid #E5E5E5;
    overflow: hidden;
    background: url('/resources/images/lector-img.svg') no-repeat 50% 50%;
    background-size: cover;
}
.enroll-img img {
	position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
}
#lectorEnroll .btn-wrap {
	list-style: none;
    list-style-image: none;
    margin: 0;
    padding: 0;
    display: table;
    width: calc(100% + 12px);
    margin-left: -6px;
}
#lectorEnroll .btn-wrap li {
    display: table-cell;
    width: 50%;
    padding: 0 6px;
}
#lectorEnroll .btn-wrap .btn {
	width:100%;
	height:45px;
	border-radius:3px;
	font-size:16px;
	font-weight:bold;
	box-sizing:border-size;
}

.officeLanguageBox {
    display: flex;
    flex-wrap: wrap;
}

.officeLanguageBox .check-box > label {
    margin-right: 5px;
}

.officeLanguageBox .check-box > label > i {
    position: relative;
    top: -1.5px;
    margin-left: 5px;
}

.check-box {
    vertical-align: middle;
    margin-left: 5px;
}

.check-box input {
    position: relative;
    top: 1.5px;
}

.tran-language-input {
    margin-top: 30px;
}

.tran-language-input .form-control {
    display: inline-block;
    width: auto;
    vertical-align: middle;
    float: none;
}

.langBtn {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    right: -43px;
    width: 42px;
    height: 100%;
    text-align: center;
    border: 1px solid #e5e5e5;
    border-radius: 2px;
    background-color: #fff;
}

.lang-input {
    display: inline-block;
    position: relative;

}
.lang-input .langBtn {
    z-index: 5;
}

.lang-input .langBtn .icon {
    width: 14px;
    height: 2px;
    background-color: #000;
}

.lang-input .langBtn .icon-inc:after {
    content: '';
    display: inline-block;
    width: 2px; height: 15px;
    font-weight: 700;
    background-color: inherit;
    transform: translateY(-6px);
}

.state.ing {
	font-weight:bold;
}
.state.end {
	color:#a4a4a4;
}
/*.bg-select option[value="58"], .bg-select option[value="59"], .bg-select option[value="60"], .bg-select option[value="64"]{*/
/*	background-color:#a3e3c4;*/
/*}*/

.bg-select option[value="62"]
, .bg-select option[value="63"]
, .bg-select option[value="64"]
, .bg-select option[value="65"]
, .bg-select option[value="150"]
, .bg-select option[value="60"]
, .bg-select option[value="59"]
, .bg-select option[value="58"]
, .bg-select option[value="9"]
, .bg-select option[value="8"]
, .bg-select option[value="7"]
, .bg-select option[value="5"]
{
    background-color:#efefef !important;
}

.surveyBox .checkbox-inline input[type="checkbox"], .surveyBox .radio-inline input[type="radio"]{
	top:0;
}
.statistics-ad {
	/* min-width:1920px; */
}
.statistics-ad ul {
	margin:0;
	padding:0;
	list-style-type: none;
}
.statistics-ad .search-box {
	margin-bottom:22px;
}
.statistics-ad .statistics-row {
	display:flex;
	flex-direction: row;
    margin:0 -11px 22px;
}
.statistics-ad .statistics-col {
	float:none;
	padding-left:11px;
	padding-right:11px;
}
.statistics-ad .title {
	position:relative;
	margin-bottom:8px;
	padding-right:90px;
}
.statistics-ad .title h2 {
	font-size:16px;
	color:#767676;
	line-height:32px;
	margin:0;
}
.statistics-ad .title .btn {
	position:absolute;
	top:50%;
	right:0;
	min-width:76px;
	transform: translateY(-50%);
}
.btn.btn-exl i {
	vertical-align:top;
	margin-top:1px;
}
.statistics-ad .title .btn-more i {
	display:inline-block;
	width:8px;
	height:14px;
	margin-top:1px;
	vertical-align: top;
	background:url('../images/arrow-more.png') no-repeat 0 0;
}
.statistics-row .box {
	height:100%;
	margin:0;
	padding:22px 30px 30px;
	background-color:#fafafa;
}
.statistics-row .table {
	border:1px solid #ddd;
}
.statistics-ad .total-num h3 {
	margin:0;
	font-size:26px;
	color:#333;
	text-align:center;
	line-height:43px;
}
.statistics-ad .total-num h3 strong {
	display:block;
	margin-top:5px;
	font-size:42px;
	color:#0f74ba;
	line-height:1;
	font-weight:normal;
}
.statistics-ad .cty-rank {
	overflow:hidden;
}
.statistics-ad .cty-rank .left {
	float:left;
	width:50%;
	box-sizing:border-box;
	padding-right:5%;
}
.statistics-ad .cty-rank .right {
	float:right;
	width:50%;
	box-sizing:border-box;
	padding-left:5%;
}
.statistics-ad .cty-rank li {
	position:relative;
	margin:20px 0;
	padding:0 50px 0 25px;
}
.statistics-ad .cty-rank .no {
	position:absolute;
	top:50%;
	left:0;
	transform: translateY(-50%);
	width:18px;
	height:18px;
	text-align:center;
	line-height:19px;
	font-size:13px;
	color:#fff;
	background-color:#999;
}
.statistics-ad .cty-rank .num {
	position:absolute;
	top:50%;
	right:0;
	transform: translateY(-50%);
	line-height:1;
	fong-size:14px;
	color:#767676;
}
.statistics-ad .cty-rank .country {
	font-size:14px;
	line-height:18px;
}
.statistics-ad .cty-rank .left li:nth-child(1) .no, .statistics-ad .bar-graph li:nth-child(1) .bar {
	background-color:#0f74ba;
}
.statistics-ad .cty-rank .left li:nth-child(2) .no, .statistics-ad .bar-graph li:nth-child(2) .bar {
	background-color:#3690cf;
}
.statistics-ad .cty-rank .left li:nth-child(3) .no, .statistics-ad .bar-graph li:nth-child(3) .bar {
	background-color:#5aa6dc;
}
.statistics-ad .cty-rank .left li:nth-child(4) .no, .statistics-ad .bar-graph li:nth-child(4) .bar {
	background-color:#94c0df;
}
.statistics-ad .cty-rank .left li:nth-child(5) .no, .statistics-ad .bar-graph li:nth-child(5) .bar {
	background-color:#b0d6f0;
}
.statistics-col .table .text-left {
	padding-left:20px;
	padding-right:20px;
}
.statistics-col .table a {
	display:inline-block;
	text-overflow:ellipsis;
	white-space:nowrap;
	word-wrap:normal;
	max-width:100%;
	overflow:hidden;
}
.statistics-ad .bar-graph li {
	margin-bottom:22px;
}
.statistics-ad .bar-graph .area {
	display:inline-block;
	text-overflow:ellipsis;
	white-space:nowrap;
	word-wrap:normal;
	max-width:100%;
	overflow:hidden;
 	line-height:1;
}
.statistics-ad .bar-graph .bar {
	display:block;
	position:relative;
	height:18px;
	width:0%;
	min-width:30px;
	margin-top:3px;
	transition:width 1s;
}
.statistics-ad .bar-graph .bar em {
	position:absolute;
	top:0;
	right:8px;
	line-height:19px;
	font-size:13px;
	color:#fff;
}
.statistics-box {
	padding: 22px 30px 30px;
	background-color:#fafafa;
}
.statistics-ad .table-wrap {
	position:relative;
	overflow:hidden;
}
.statistics-ad .table-row-scroll {
	width:100%;
	border:1px solid #ddd;
	overflow-x: auto;
}
.statistics-ad .table-cont {
	width:4475px;
}
.statistics-ad .h-scroll .empty {
	width:200px;
	border-bottom:1px solid #999;
}
.statistics-ad .h-scroll thead .cty th:not(:last-child), 
.statistics-ad .h-scroll thead .bg-sky + th + th:not(:last-child),
.statistics-ad .h-scroll tbody .bg-sky + td + td:not(:last-child),
.statistics-ad .h-scroll tbody th
{
	border-right:1px solid #999;
}
.statistics-ad .h-scroll .cell th {
	width:75px;
	border-bottom:1px solid #999;
}
.statistics-ad .h-scroll th {
	font-size:14px;
	font-weight:normal;
	color:#767676;
}
.statistics-ad .h-scroll thead th {
	background-color:#f6f6f6;
}
.statistics-ad .h-scroll tbody td {
	color:#333;
	font-weight:bold;
}
.statistics-ad .h-scroll tbody th {
	text-align:left !important;
	padding-left:15px;
	padding-right:15px;
}
.statistics-ad .h-scroll tbody td.bg-sky {
	background-color:#ecf3f8;	
}
.statistics-ad .table-clone {
	position:absolute;
	top:0;
	left:0;
	width:202px;
	border:1px solid #ddd;
	border-right-color:#999;
	pointer-events:none;
	overflow:hidden;
}
.statistics-ad .table-clone th:not(.fix-cell), .statistics-ad .table-clone td:not(.fix-cell) {
	visibility:hidden;
	border-color:transparent;
}
.statistics-inbox {
	border:1px solid #ddd;
	background-color:#fff;
}
.statistics-inbox .title{
	margin:0;
	padding:10px 10px 10px 20px;
	border-bottom:1px solid #ddd;
	background-color:#f6f6f6;
}
.statistics-inbox .title h3 {
	margin:0;
	font-size:14px;
	color:#333;
	line-height:30px;
	font-weight:bold;
}
.statistics-inbox .title .btn {
	right:10px;
}
.statistics-inbox .content {
	padding:20px 20px 0;
	overflow:hidden;
}
.statistics-inbox dl.left {
	position:relative;
	float:left;
	width:50%;
}
.statistics-inbox dl.right {
	position:relative;
	float:right;
	width:50%;
}

.statistics-inbox dl dt, .statistics-inbox dl dd{
	position:relative;
	box-sizing:border-box;
	padding-bottom:10px;
	display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
}
.statistics-inbox dl.left dt, .statistics-inbox dl.left dd{
	padding-left:10px;
	padding-right:50px;
}
.statistics-inbox dl.right dt, .statistics-inbox dl.right dd{
	padding-right:10px;
	padding-left:50px;
}
.statistics-inbox dl dt:before {
	content:'';
	position:absolute;
	bottom:-1px;
	left:0;
	width:100%;
	height:1px;
	background:#ddd;
}

.statistics-inbox dt .txt, .statistics-inbox dt .num {
	font-size:20px;
	color:#333;
	line-height:45px;
}
.statistics-inbox dt + dd {
	margin-top:12px;
}
.statistics-inbox dl dd {
	padding-bottom:0;
}
.statistics-inbox dd .txt, .statistics-inbox dd .num {
	font-size:14px;
	color:#7676763;
	line-height:30px;
}
.statistics-inbox dt .num strong {
	display:inline-block;
	margin-right:5px;
	vertical-align:top;
	font-size:36px;
	color:#0f74ba;
	line-height:42px;
}
.statistics-inbox dd .num strong {
	display:inline-block;
	margin-right:3px;
	color:#0f74ba;
}
.statistics-inbox dd:last-child {
	margin-bottom:20px;
}
.grade-list li input {
	width:30px;
}
.year-header


/*모임신청 css 추가*/
.gathering-info {
    margin: 0 0 28px;
    border-radius: 5px;
    overflow: hidden;
}
.gathering-info h2 {
    padding: 12px 30px;
    margin:0;
    font-size: 21px;
    font-weight: 500;
    line-height: 25px;
    color: #fff;
    text-align: center;
    background: #00b5ef;
}
.gathering-info .info-cont {
    padding: 20px 30px;
    border-radius: 0 0 5px 5px;
    border: 1px solid #eee;
    border-top: 0 none;
    text-align: center;
    background: #fff;
}
.gathering-info .info-cont > strong {
    font-size: 15px;
    color: #333;
    line-height: 20px;
}
.gathering-info .info-cont > p {
    margin-top: 18px;
    font-size: 13px;
    line-height: 20px;
    color: #757575;
}
/*251110 tooltip*/
.h-tooltip {
    position: relative;
    float: right;
}
.h-tooltip-mark {
    position: relative;
}
.h-tooltip-mark:before {
    display: block;
    content: '';
    width: 16px;
    height: 16px;
    background: url('../images/gathering/exclamation-mark.png') center center no-repeat;
    background-size: 100% 100%;
}
.h-tooltip-mark > span {
    position: absolute;
    clip: rect(0 0 0 0);
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
}
.h-tooltip-memo {
    display: none;
    position: absolute;
    top: -5px;
    left: 100%;
    margin-left: 10px;
    padding: 10px;
    width: max-content;
    font-weight: 400;
    background: #f6f6f6;
    border: 1px solid #00b6f0;
    box-shadow: 3px 3px 6px 0px #ddd;
    box-sizing: border-box;
    z-index: 10;
}
.h-tooltip:hover .h-tooltip-memo {
    display: block;
}
.h-tooltip-memo:before {
    display: block;
    content: '';
    position: absolute;
    top: 5px;
    left: -10px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 7px 10px 7px 0px;
    border-color: transparent #00b6f0 transparent transparent;
}
.h-tooltip-memo:after {
    display: block;
    content: '';
    position: absolute;
    top: 6px;
    left: -9px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 6px 9px 6px 0px;
    border-color: transparent #f6f6f6 transparent transparent;
}