@charset "utf-8";

@import url('bootstrap.min.css');
@import url('bootstrap-override.css');
@import url('jquery-ui.min.css');
@import url('font-awesome.min.css');
@import url('ionicons.min.css');
@import url('animate.min.css');
@import url('toggles.css');
@import url(https://fonts.googleapis.com/earlyaccess/notosanskr.css);

@font-face {
    font-family: 'Nexon';
    src: url('/skins/default/fonts/Nexon_Gothic_Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Nexon';
    src: url('/skins/default/fonts/Nexon_Gothic_Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Nexon';
    src: url('/skins/default/fonts/Nexon_Gothic.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

html {
  height: 100%;
}

body {
  height: 100%;
  background: #e4e7ea;
  font-family: "Noto Sans KR", "Apple SD Gothic Neo", 나눔고딕, NanumGothic, "맑은 고딕", "Malgun Gothic";
  line-height: 17px;
  color: #59595a;
  -webkit-touch-callout: none !important;
  -webkit-user-select: none;
}

body > section {
}

body .container {
  padding: 0px;
}

body.notfound,
body.body_policies,
body.body_privacy,
body.body_make {
  background-color: #FFF;
}

body.body_login {
  background: #fff url("/skins/default/images/intro/20170612_004.png") no-repeat center top;
  background-size: cover;
}

body.noscroll {
  overflow: hidden;
}

body.open {
  overflow: hidden;
}

body.over {
  overflow: hidden;
}

body.over > section {
  opacity: 0;
  visibility: hidden;
}

input,select,textarea {
  color: #636e7b;
}

textarea {
  resize: vertical;
}

iframe.hframe {
  visibility: hidden;
}

nav {
  text-align: center;
}

a { -webkit-user-select: none !important; }

a:focus, a:active { outline: none; }
a:hover { text-decoration: none }

h1,h2,h3,h4,h5 {
}

button:focus {outline:0 !important}

code {
  padding: 2px 4px;
  background-color: #f9f2f4;
  border-radius: 4px;
}

.mshow {
  display: none;
}

.bb1 {
  border-bottom: solid 1px #343E4D;
}

.bt1 {
  border-top: solid 1px #343E4D;
}

.alert-message {
  font-size: 12px;
  color: #ec562e;
  margin: 10px;
}

.exit-message{
	position: absolute;
	top:50%;
	left:0;
	width:100%;
	height:40px;
	z-index:10000;
  text-align: center;
}

.exit-message > div{
  display: inline-block;
  padding: 10px 20px;
	height:30px;
	margin:auto;
	background:rgba(0,0,0,0.5);
	text-align:center;
	font:12px arial;
	line-height:30px;
	color:white;
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	-ms-border-radius:10px;
	-o-border-radius:10px;
	border-radius:10px;
}

.overx {
  overflow-x: auto;
}

.nwrap {
  white-space: nowrap;
}

.tover {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile > .thumb {
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  width: 40px;
  display: inline-block;
  margin-right: 5px;
}

.profile > .name {
  display: block;
}

.profile > .info {
  display: inline-block;
  vertical-align: middle;
}

.profile > .info > .name {
  font-weight: 600;
  margin: 0px;
}

form p.desc {
  line-height: 25px;
  color: #777;
}

/********** 3. HEADER PANEL **********/

body.editmode .baseheader,
body.selmode .editheader,
body.selmode .baseheader {
  display: none;
}

body.editmode .editheader,
body.selmode .selheader {
  display: initial;
}

/*
body.selmode .headerbar {
  background-color: #1d2939;
}

body.selmode .mainpanel2 .headerbar .header-right {
  background-color: #1d2939;
}

body.selmode .headerbar button {
  background-color: #1d2939;
}
*/

.editheader .headerbar,
.selheader .headerbar {
  background-color: #1d2939;
}

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

ul.clear {
  list-style: none;
  margin: 0px;
  padding: 0px;
}

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

body .editheader,
body .selheader {
  display: none;
}

.headerbar {
  background: #1582dc;
}

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

.headerbar .optmenu {
  display: none;
}

.headerbar .btn {
  height: 50px;
  padding: 13px 10px;
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
  border-radius: 0;
  font-size: 16px;
}

.headerbar .mobileonly {
  display: none;
}

.mode-pc .cellview .extmenu.tgmnu,
.mode-pc .cubeview .extmenu.tgmnu,
.mode-pc .noteview .extmenu.tgmnu,
.mode-pc .programview .extmenu.tgmnu,
.mode-pc .ebookview .extmenu.tgmnu,
.mode-pc .bookview .extmenu.tgmnu,
.mode-pc .testview .extmenu.tgmnu,
.mode-pc .paperview .extmenu.tgmnu {
  display: none;
}

.mode-pc .cellview .optmenu.tgmnu .hmnu,
.mode-pc .cubeview .optmenu.tgmnu .hmnu,
.mode-pc .noteview .optmenu.tgmnu .hmnu,
.mode-pc .ebookview .optmenu.tgmnu .hmnu,
.mode-pc .bookview .optmenu.tgmnu .hmnu,
.mode-pc .testview .optmenu.tgmnu .hmnu,
.mode-pc .paperview .optmenu.tgmnu .hmnu {
  display: none;
}

.mode-pc .cellview .optmenu.tgmnu,
.mode-pc .cubeview .optmenu.tgmnu,
.mode-pc .noteview .optmenu.tgmnu,
.mode-pc .programview .optmenu.tgmnu,
.mode-pc .ebookview .optmenu.tgmnu,
.mode-pc .bookview .optmenu.tgmnu,
.mode-pc .testview .optmenu.tgmnu,
.mode-pc .paperview .optmenu.tgmnu {
  display: initial;
}

.mode-mobile .headermenu .pcmnu {
  display: none;
}

.mode-mobile .extmenu.tgmnu {
  display: none;
}

.mode-mobile .optmenu.tgmnu {
  display: initial;
}

.mode-mobile .optmenu.tgmnu .hmnu {
}

.mode-mobile .headermenu .dropdown-menu-usermenu:after {
  right: 7px;
}

.userview:not([tab="note"]) .headerbar .btn-append {
  display: none;
}

.userview:not([tab="archive"]) .headerbar .btn-report {
  display: none;
}


/***** 3.1 HEADER LEFT *****/

.logo {
  float: left;
  font-size: 22px;
  cursor: pointer;
  color: #FFF;
  margin: 0 10px;
  font-weight: bold;
  line-height: 45px;
  vertical-align: middle;
}

.menutoggle {
    float: left;
    width: 50px;
    height: 50px;
    font-size: 22px;
    cursor: pointer;
    float: left;
    color: #FFF;
    -moz-transition: all 0.2s ease-out 0s;
    -webkit-transition: all 0.2s ease-out 0s;
    transition: all 0.2s ease-out 0s;
}

.menutoggle:hover {
    color: #F0F0F0;
    background: #1377c9;
}

.menutoggle .fa,
.menutoggle .glyphicon {
    margin: 14px 0 0 15px;
}

.book-title {
    float: left;
    font-size: 22px;
    color: #FFF;
    margin: 11px 5px;
}

.searchform input {
    width: 250px;
    background: #fff url(../images/icon-search.png) no-repeat 95% center;
    float: left;
    margin: 5px 10px;
    padding: 8px 10px;
    border: 0;
    border-right: 1px solid #eee;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
    font-size: 14px;
}

.searchform input:focus {
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    border-color: #ddd;
}

/***** 3.2 HEADER RIGHT *****/

.header-center {
  position: absolute;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  line-height: 50px;
  left: 50%;
  transform: translateX(-50%);
}

.header-right {
    float: right;
    border-right: 0;
}

.headermenu {
    list-style: none;
    margin: 0;
    padding: 0;
}

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

.headermenu > li {
    display: inline-block;
    float: left;
    position: relative;
}

.headermenu > li.smnu {
  display: none;
}

.headermenu > li.smnu.active {
  display: inline-block;
}

.headermenu .dropdown-toggle {
    padding: 12px 10px;
    border-color: #fff;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
    border: 0;
}

.headermenu .dropdown-toggle:hover,
.headermenu .dropdown-toggle:focus,
.headermenu .dropdown-toggle:active,
.headermenu .dropdown-toggle.active,
.headermenu .open .dropdown-toggle.dropdown-toggle {
    background: #1377c9;
    color: #F0F0F0;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.headermenu .dropdown-toggle img {
    vertical-align: middle;
    margin-right: 5px;
    width: 26px;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border-radius: 50px;
}

.headermenu .dropdown-toggle .caret {
    margin-left: 5px;
}

.headermenu .dropdown-menu {
    border: 0;
    margin-top: 0px;
    margin-right: -1px;
    -moz-border-radius: 2px 0 2px 2px;
    -webkit-border-radius: 2px 0 2px 2px;
    border-radius: 2px 0 2px 2px;
    -moz-box-shadow: 3px 3px 0 rgba(12,12,12,0.05);
    -webkit-box-shadow: 3px 3px 0 rgba(12,12,12,0.05);
    box-shadow: 3px 3px 0 rgba(12,12,12,0.05);
    padding: 5px;
}

.headermenu .dropdown-menu:after {
    border-bottom: 6px solid #1d2939;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    content: "";
    display: inline-block;
    right: 17px;
    position: absolute;
    top: -6px;
}

.overpanel .headermenu .dropdown-menu:after {
  border-bottom: 6px solid #fff;
}

.headermenu .dropdown-menu .divider {
  margin: 5px 0 !important;
  background-color: #555;
}

.headermenu .dropdown-grid .grid-list {
    padding: 20px;
}

.headermenu .dropdown-menu li {
  display: block;
  margin: 0;
  float: none;
  background: none;
  padding: 15px 5px;
  position: relative;
}

.headermenu .dropdown-menu-usermenu li {
    padding: 0;
}

.headermenu .dropdown-menu-usermenu:after {
    right: 45px;
}

.headermenu .optmenu .dropdown-menu-usermenu:after {
  right: 5px;
}

.overpanel .headermenu .dropdown-menu li a {
  color: #000;
}

.headermenu .dropdown-menu li a {
    color: #b2b7c3;
    padding: 7px 10px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    -moz-transition: all 0.2s ease-out 0s;
    -webkit-transition: all 0.2s ease-out 0s;
    transition: all 0.2s ease-out 0s;
}

.headermenu .dropdown-menu li a:hover {
    background: #1caf9a;
    color: #fff;
}

.headermenu .dropdown-menu li i {
  width: 10px;
  margin-right: 5px;
}

.headermenu .dropdown-menu-head {
    padding: 0;
    min-width: 300px;
}

.view[tab="users"] .headermenu .btn-new.hideuser {
  display: none;
}

.headermenu .tp-icon {
    padding: 12px 15px;
    height: 50px;
    font-size: 16px;
    color: #333;
    border-color: #fff;
    -moz-transition: all 0.2s ease-out 0s;
    -webkit-transition: all 0.2s ease-out 0s;
    transition: all 0.2s ease-out 0s;
}

.headermenu .btn-menu {
    padding: 13px 15px;
    font-size: 16px;
    height: 50px;
    color: #333;
    border: none;
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;
    border-radius: 0px;
    -moz-transition: all 0.2s ease-out 0s;
    -webkit-transition: all 0.2s ease-out 0s;
    transition: all 0.2s ease-out 0s;
}

.headermenu .btn-menu:hover,
.headermenu .btn-menu:focus,
.headermenu .btn-menu:active,
.headermenu .btn-menu.active {
    background: #1377c9;
    color: #F0F0F0;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

/*
body.selmode .headerbar .btn:hover,
body.selmode .headerbar .btn:focus,
body.selmode .headerbar .btn:active,
body.selmode .headerbar .btn.active,
*/
.editmode .headermenu .dropdown-toggle:hover,
.editmode .headermenu .dropdown-toggle:focus,
.editmode .headermenu .dropdown-toggle:active,
.editmode .headermenu .dropdown-toggle.active,
.editmode .headermenu .open .dropdown-toggle.dropdown-toggle,
.editmode .headerbar .btn-menu:hover,
.editmode .headerbar .btn-menu:focus,
.editmode .headerbar .btn-menu:active,
.editmode .headerbar .btn-menu.active {
    background: #2a3949;
}

.selmode .headerbar .btn,
.selmode .mainpanel2 .headerbar .header-right,
.selmode .headerbar {
  background-color: #2a3949;
}

.selmode .headerbar a.page-title:hover,
.selmode .headerbar a.page-title:focus,
.selmode .headerbar a.page-title:active,
.selmode .headerbar .btn:hover,
.selmode .headerbar .btn:focus,
.selmode .headerbar .btn:active {
  background-color: #334559;
}

.selmode .headerbar .btn-nosel,
body .headerbar .btn-selmode {
  display: none;
}

.selmode .headerbar .btn-setting,
.selmode .headerbar .btn-new {
  display: none;
}

.selmode .headerbar .btn-selmode {
  display: inline-block;
}

.selmode .headerbar .search {
  display: none;
}

.headermenu .tp-icon + .dropdown-menu:after {
    right: 17px;
}

.headermenu .chat-icon {
    border-right: 0;
}

.headermenu .dropdown-menu-usermenu {
    background: #1d2939;
    min-width: 150px;
}

.headermenu .dropdown-menu-head ul {
    border: 1px solid #ddd;
    border-top: 0;
    padding: 0 10px;
}

.headermenu .dropdown-menu-head ul.gen-list > li.new {
  cursor: pointer;
}

.headermenu .dropdown-menu-head ul.user-list > li.new:hover,
.headermenu .dropdown-menu-head ul.gen-list > li.new:hover {
  background-color: #F5F5F5;
}

.headermenu .dropdown-list span[data-role="remove"] {
  position: absolute;
  top: 23px;
  right: 15px;
  text-decoration: none;
  text-shadow: 0 1px 0 #fff;
  color: #999;
  font-size: 14px;
}

.dropdown-list span[data-role="remove"]::after {
  display: inline-block;
  content: '✖'
}

.headermenu .dropdown-menu-head li a {
    color: #333;
    padding: 0;
    opacity: 1;
}

.headermenu .dropdown-menu-head li a:hover {
    background: none;
    color: #428BCA;
    text-decoration: none;
}

.headermenu .dropdown-commonmenu li {
    padding: 0;
}

.headermenu .dropdown-commonmenu:after {
    right: 15px;
}

.headermenu .dropdown-commonmenu {
    background: #1d2939;
}

.overpanel .headermenu .dropdown-commonmenu {
  background: #fff;
}

.headermenu .btn-group {
    margin-bottom: 0;
}

.headermenu .btn-default {
    background: #1582dc;
    color: #FFF;
}

.filetest .headermenu .mnu-preview,
.filetest .headermenu .btn-preview {
  display: none;
}

.headermenu .btn-user {
  font-size: 13px;
}

.dropdown-list li {
    padding: 15px;
    overflow: hidden;
    border-bottom: 1px solid #eee;
}

.dropdown-list li:last-child {
    border-bottom: 0;
}

.dropdown-list .thumb {
    width: 36px;
    float: left;
}

.dropdown-list .thumb img {
    width: 100%;
    display: block;
    vertical-align: middle;
}

.dropdown-list.gen-list .thumb img,
.dropdown-list.user-list .thumb img {
  -webkit-border-radius: 50%;
  border-radius: 50%;
}

.dropdown-list .desc {
  margin-left: 45px;
  display: block;
  line-height: 13px;
}

.dropdown-list .desc h5 {
  font-size: 13px;
  margin: 3px 0px;
}

.dropdown-list .cmd {
  position: absolute;
  right: 10px;
  top: 20px;
}

.dropdown-list li:last-child {
    padding: 7px 5px;
}

.dropdown-list li .badge {
    float: right;
}

.dropdown-list.user-list li .badge {
  line-height: 25px;
  cursor: pointer;
}

.user-list {
    width: 300px;
}

.gen-list li a {
    display: block;
}

.gen-list li a:hover {
    color: #333 !important;
    text-decoration: none;
}

.gen-list li .name {
    font-size: 13px;
    line-height: 21px;
    display: block;
}

.gen-list li .msg {
    font-size: 11px;
    line-height: normal;
    color: #999;
    display: block;
}

/***** 3.3 HEADER EXPAND *****/

.header-expand {
  clear: both;
  padding: 10px 20px 0px;
  background-color: #1d2939;
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  line-height: initial;
  height: 38px;
}

.header-expand:after {
  content: '';
  display: block;
  clear: both;
}

.headerbar .header-expand .btn:hover, .headerbar .header-expand .btn:focus {
  color: #F0F0F0 !important;
  background: transparent !important;
}

.headerbar .header-expand .active .btn:hover, .headerbar .header-expand .active .btn:focus {
  color: #111 !important;
}

.header-expand ul.tabs {
  border: none;
  background: none;
  margin: 0px;
  padding: 0px;
  list-style: none;
  display: inline-block;
  position: relative;
}

.header-expand ul.tabs > li {
  display: inline-block;
  position: relative;
  margin-right: 10px;
}

.header-expand ul.tabs > li > i {
  position: relative;
  top: -1px;
  right: 20px;
  font-size: 12px;
  color: #BBB;
  cursor: pointer;
}

.header-expand ul.tabs > li > a {
  background-color: #343E4D;
  font-size: 13px;
  text-align: center;
  padding-left: 30px;
  padding-right: 40px;
  color: #BBB;
  line-height: 28px;
  display: inline-block;
}

.header-expand ul.tabs > li > a:active,
.header-expand ul.tabs > li > a:focus,
.header-expand ul.tabs > li > a:hover {
  text-decoration: none;
  color: #FFF;
}

.header-expand ul.tabs > li.active > i {
  color: #666;
}

.header-expand ul.tabs > li.active > a {
  background-color: #FFF;
  color: #666;
}

.preview .header-expand a.btnAdd {
  display: none;
}

.header-expand a.btnAdd {
  /*line-height: 27px;*/
  font-size: 13px;
  color: #BBB;
  text-decoration: none;
}

.header-expand a.btnAdd:hover {
  color: #FFF;
}

.headerbar > a.swExpand {
  position: absolute;
  top: 50px;
  right: 5px;
  z-index: -1;
  padding: 2px 20px;
  background-color: #1d2939;
  color: #BBB;
  font-size: 12px;
  text-decoration: none;
  line-height: initial;
}

.mode-mobile .headerbar > a.swExpand {
  display: none;
}

.headerbar > a.swExpand.expand {
  top: 88px;
}

/********** 4. LEFT PANEL **********/
.leftpanel {
  width: 0px;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 102;
  color: #8f939e;
  -moz-box-shadow: 3px 0 5px rgba(12,12,12,0.05);
  -webkit-box-shadow: 3px 0 5px rgba(12,12,12,0.05);
  box-shadow: 3px 0 5px rgba(0,0,0,0.5);
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
  background-color: #1d2939;
  overflow: hidden;
}

.leftpanel > .wrap {
  width: 280px;
  height: 100%;
  overflow-y: auto;
  padding: 5px;
}

.sticky-leftpanel {
  position: fixed;
  height: 100%;
  overflow-y: auto;
}


.logopanel h1 span {
    color: #1caf9a;
}

.leftpanelinner {
    padding: 5px 15px;
}

.leftpanel .searchform {
    display: none;
}

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

.leftpanel .searchform input {
    padding: 10px;
    height: auto;
    width: 100%;
    margin: 5px 0 20px 0;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
}

.leftpanel .userlogged {
    margin: 0;
    padding: 0;
    padding-bottom: 15px;
    margin-bottom: 15px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.leftpanel-collapsed .leftpanel .userlogged {
    display: none;
}

.leftpanel .userlogged .media-object {
    width: 40px;
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;
    border-radius: 100px;
    float: left;
    border: 2px solid #1CAF9A;
    padding: 2px;
    margin-left: 2px;
}

.leftpanel .userlogged .img-cover {
    width: 57px;
    border-radius: 0;
    border: none;
    border: 1px solid #FFF;
}

.leftpanel .userlogged .media-body {
    margin-left: 50px;
    color: #ccc;
}

.leftpanel .userlogged .media-body h4 {
    font-size: 15px;
    margin: 0;
}

.leftpanel .infobook .media-body h4 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 14px;
  font-weight: bold;
}

.leftpanel .userlogged .media-body span {
    font-style: italic;
    font-size: 11px;
    opacity: 0.5;
}

.leftpanel .userlogged ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.leftpanel .infobook .media-body {
  display: block;
  margin-left: 67px;
}

.leftpanel .infobook .media-body .summary {
  font-size: 12px;
  opacity: 0.5;
}

/********** 4. RIGHT PANEL **********/
.sidepanel {
  width: 320px;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 102;
  color: #FFF;
}

.sidepanel.wide {
  width: 700px;
}

.sidepanel .closex {
  position: absolute;
  right: 10px;
  top: 13px;
  padding: 0;
  font-size: 30px;
  background: transparent;
  border: none;
  color: #fff;
  opacity: 0.5;
  z-index: 1;
}

.sidepanel nav {
  text-align: center;
}

.sidepanel .control-label {
  color: #8f939e;
  font-size: 12px;
  word-break: break-all;
  overflow: hidden;
  white-space: nowrap;
}

.sidepanel .input-sm {
  line-height: 19px;
}

/***** 4.1 NAVIGATION STYLES *****/


.sidebartitle {
    font-size: 11px;
    text-transform: uppercase;
    color: #999;
    margin-bottom: 10px;
}

.nav-bracket {
    margin-bottom: 30px;
}

.nav-bracket > li > a {
    color: #8f939e;
    padding: 7px 10px;
}

.nav-bracket > li > a:hover,
.nav-bracket > li > a:active,
.nav-bracket > li > a:focus {
    background-color: #fff;
    color: #1d2939;
    -moz-box-shadow: 0 3px 0 rgba(0,0,0,0.2);
    -webkit-box-shadow: 0 3px 0 rgba(0,0,0,0.2);
    box-shadow: 0 3px 0 rgba(0,0,0,0.2);
}

.nav-bracket > li.nav-parent > a {
    background: transparent url(../images/plus-white.png) no-repeat 92% center; 
}

.nav-bracket > li.nav-parent > a:focus {
    background-color: none;
    color: #8F939E;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.nav-bracket > li.nav-parent > a:hover,
.nav-bracket > li.nav-parent > a:active {
    color: #1d2939;
    background-color: #fff;
    background-image: url(../images/plus.png);
}

.nav-bracket > li.nav-active > a {
    background-color: #fff;
    background-image: url(../images/minus.png);
    color: #1d2939;
    -moz-box-shadow: 0 3px 0 rgba(0,0,0,0.2);
    -webkit-box-shadow: 0 3px 0 rgba(0,0,0,0.2);
    box-shadow: 0 3px 0 rgba(0,0,0,0.2);
}

.nav-bracket > li.nav-active > a:hover {
    background-image: url(../images/minus.png);
    background-repeat: no-repeat;
}

.nav-bracket > li.nav-active > a:focus {
    color: #1d2939;
}

.nav-bracket > li.active > a,
.nav-bracket > li.active > a:hover,
.nav-bracket > li.active > a:focus {
    background-color: #1caf9a;
    color: #fff;
}

.nav-bracket > li.active > a {
    -moz-box-shadow: 0 3px 0 rgba(0,0,0,0.2);
    -webkit-box-shadow: 0 3px 0 rgba(0,0,0,0.2);
    box-shadow: 0 3px 0 rgba(0,0,0,0.2);
}

.nav-bracket > li.nav-parent.active > a {
    background-image: url(../images/plus.png); 
}

.nav-bracket > li.nav-active.active > a {
    background-image: url(../images/minus.png); 
}

.nav-bracket > li.nav-active.active > a:hover {
    background-image: url(../images/minus.png); 
}

.nav-bracket li .fa,
.nav-bracket li .glyphicon {
    font-size: 16px;
    vertical-align: middle;
    margin-right: 10px;
    width: 16px;
    text-align: center;
}

.nav-bracket > li > a > .badge {
    margin-top: 2px;
}

.nav-bracket .children {
    list-style: none;
    display: none;
    margin: 5px 0;
    padding: 0;
}

.nav-bracket .children > li > a {
    color: #94989d;
    font-size: 13px;
    display: block;
    padding: 5px 0 5px 27px;
    -moz-transition: all 0.2s ease-out 0s;
    -webkit-transition: all 0.2s ease-out 0s;
    transition: all 0.2s ease-out 0s;
}

.nav-bracket .children > li > a > span {
    margin-top: 2px;
}

.nav-bracket .children > li > a:hover,
.nav-bracket .children > li > a:active,
.nav-bracket .children > li > a:focus {
    text-decoration: none;
    color: #1caf9a;
}

.nav-bracket .children > li .fa {
    font-size: 12px;
    opacity: 0.5;
    margin-right: 5px;
    text-align: left;
    width: auto;
    vertical-align: baseline;
}

.nav-bracket .children > li.active > a {
    color: #1caf9a;
}

.nav-bracket .children ul {
    margin-left: 12px;
    border: 0;
}

.infoprofile {
}

.infoprofile > ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

.infoprofile > ul > li {
  padding: 5px 0;
}

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

.infostatus {
  border-top: 1px solid #e3e6f3;
  border-bottom: 1px solid #e3e6f3;
  margin: 5px 0;
}

.infostatus ul {
  text-align: center;
  margin: 10px 0;
}

.infostatus ul > li {
  width: 33%;
  cursor: pointer;
}

.infostatus ul > li h2 {
  font-size: 25px;
}

.infostatus ul li h2 {
margin: 0;
}

.contentpanel > .row {
  background-color: #FFF;
}

/***** 4.2 INFO SUMMARY *****/

.infosummary {
    margin: 30px 0;
}

.infosummary ul {
    padding: 0;
    margin: 20px 0 0;
    list-style: none;
    border-top: 1px solid rgba(255,255,255,0.05);
}

.infosummary li {
    padding: 10px 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

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

.infosummary .datainfo {
    float: left;
    line-height: normal;
}

.infosummary .datainfo h4 {
    margin: 0;
    font-size: 16px;
    color: #fff;
    opacity: 0.7;
}

.infosummary span {
    font-size: 11px;
    line-height: normal;
    text-transform: uppercase;
    font-size: 10px;
    opacity: 0.4;
}

.infosummary .chart {
    float: right;
    margin-top: 5px;
    opacity: 0.6;
}



/********** 5. MAIN PANEL **********/

section > .view {
  display: none;
}

section > .view:last-child {
  display: block;
  -webkit-transition: opacity 0.5s;
  transition: opacity 0.5s;
}

.mainpanel {
    margin-left: 240px;
    background: #e4e7ea;
    min-height: 1000px;
}

.single-panel {
  margin: 0px;
  background: #f1f4f9;
  min-height: auto;
}

.pageheader {
    padding: 15px;
    border-bottom: 1px solid #d3d7db;
    border-top: 1px solid #eee;
    background: #f7f7f7;
    position: relative;
}

.pageheader h2 {
    font-size: 28px;
    color: #1D2939;
    letter-spacing: -0.5px;
    margin: 0;
}

.pageheader .glyphicon,
.pageheader .fa {
    font-size: 24px;
    margin-right: 5px;
    padding: 6px 7px;
    border: 2px solid #1D2939;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border-radius: 50px;
}

.pageheader .fa.fa-pencil {
    padding: 6px 9px;
}

.pageheader .fa.fa-hand-o-up {
    padding: 6px 9px 6px 7px;
}

.pageheader .fa-file-o {
    padding: 6px 10px;
}

.pageheader .fa-user {
    padding: 6px 10px;
}

.pageheader .fa-file-text {
    padding: 6px 10px;
}

.pageheader .fa-map-marker {
    padding: 6px 12px;
}

.pageheader .fa-dollar {
    padding: 6px 12px;
}

.pageheader .fa-clock-o {
    padding: 6px 8px;
}

.pageheader h2 span {
    font-size: 13px;
    text-transform: none;
    color: #999;
    font-style: italic;
    vertical-align: middle;
    letter-spacing: 0;
}

.pageheader h2 span::before {
    content: '/';
    margin: 0 10px 0 5px;
    color: #ccc;
}

.pageheader .breadcrumb-wrapper {
    position: absolute;
    top: 23px;
    right: 25px;
}

.pageheader .breadcrumb-wrapper .label {
    color: #999;
    text-transform: uppercase;
    font-size: 11px;
    font-weight: normal;
    display: inline-block;
}

.pageheader .breadcrumb {
    background: none;
    display: inline-block;
    padding: 0;
}

.pageheader .breadcrumb li {
    font-size: 12px;
}

.pageheader .breadcrumb li.active {
    color: #333;
}

.contentpanel {
    padding: 20px;
    position: relative;
}

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

form .form-group:last-child {
    margin-bottom: 0;
}

/********** 11. LEFT PANEL COLLAPSED **********/
/**********************************************/



.leftpanel-collapsed .logopanel {
    display: none;
}

.leftpanel-collapsed .headerbar {
    margin-left: -50px;
}

.leftpanel-collapsed .leftpanel {
    width: 50px;
    top: 50px;
}

.leftpanel-collapsed .leftpanel .leftpanelinner {
    padding: 0;
    margin-top: 55px;
}

.leftpanel-collapsed .leftpanelinner .sidebartitle {
    display: none;
}

.leftpanel-collapsed .nav-bracket {
    margin: 5px;   
}

.leftpanel-collapsed .nav-bracket li a {
    text-align: center;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    padding: 10px;
    line-height: 22px;
    position: relative;
}

.leftpanel-collapsed .nav-bracket > li > a:hover {
    border-radius: 2px 0 0 2px;
}

.leftpanel-collapsed .nav-bracket > li.nav-parent > a {
    background-image: none;
}

.leftpanel-collapsed .nav-bracket > li > a > span:last-child {
    position: absolute;
    background: #fff;
    padding: 10px 10px 10px 5px;
    left: 40px;
    top: 0;
    min-width: 209px;
    text-align: left;
    z-index: 100;
    display: none;
    -moz-box-shadow: 0 3px 0 rgba(12,12,12,0.03);
    -webkit-box-shadow: 0 3px 0 rgba(12,12,12,0.03);
    box-shadow: 0 3px 0 rgba(12,12,12,0.03);
    -moz-border-radius: 0 2px 2px 0;
    -webkit-border-radius: 0 2px 2px 0;
    border-radius: 0 2px 2px 0;
}

.leftpanel-collapsed .nav-bracket > li > a .badge {
    display: none;
}

.leftpanel-collapsed .nav-bracket > li.active > a > span:last-child {
    -moz-border-radius: 0 2px 0 0;
    -webkit-border-radius: 0 2px 0 0;
    border-radius: 0 2px 0 0;
}

.leftpanel-collapsed .nav-bracket ul {
    display: none;
}

.leftpanel-collapsed .nav-bracket > li.nav-hover > a {
    background: #fff;
    color: #1d2939;
}

.leftpanel-collapsed .nav-bracket > li.nav-hover.active > a {
    background: #1CAF9A;
    color: #fff;
}

.leftpanel-collapsed .nav-bracket > li.nav-hover > a > span:last-child {
    display: block;
}

.leftpanel-collapsed .nav-bracket > li.nav-hover.active > a > span:last-child {
    background: #1CAF9A;
    color: #fff;
}

.leftpanel-collapsed .nav-bracket li.nav-hover ul {
    display: block;
    position: absolute;
    top: 41px;
    left: 45px;
    margin: 0;
    min-width: 204px;
    background: #1d2939;
    z-index: 100;
    -moz-border-radius: 0 0 2px 0;
    -webkit-border-radius: 0 0 2px 0;
    border-radius: 0 0 2px 0;
}

.leftpanel-collapsed .nav-bracket ul a {
    text-align: left;
    padding: 6px 10px;
    padding-left: 0;
}

.leftpanel-collapsed .nav-bracket ul a:hover {
    background: none;
}

.leftpanel-collapsed .nav-bracket li a i {
    margin-right: 0;
}

.leftpanel-collapsed .mainpanel {
    margin-left: 50px;
}

.leftpanel-collapsed .infosummary {
    display: none;
}

.leftpanel-collapsed .sticky-leftpanel {
    overflow-y: visible;
}

.leftpanel-collapsed .nav-bracket .children {
    display: none;
}

/***** 17.2 ICON *****/


.tp-icon {
    padding: 10px 20px;
    line-height: 20px;
    border-color: #ddd;
    position: relative;
}

.tp-icon .badge {
    position: absolute;
    font-size: 10px;
    font-weight: normal;
    right: 4px;
    top: 10px;
    line-height: 13px;
    background-color: #D9534F;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    padding: 2px 5px;
}

/***** 17.5 STICKY HEADER */

.stickyheader .logopanel {
    position: fixed;
    top: 0;
    left: 0;
    width: 240px;
    z-index: 100;
}

.stickyheader .leftpanel {
    top: 50px;
    background: #1d2939;
}

.stickyheader .sticky-leftpanel {
    top: 0;
}

.stickyheader .leftpanelinner {
    margin-top: 0px;
}

.stickyheader .headerbar {
    position: fixed;
    top: 0;
    left: 240px;
    width: 100%;
    z-index: 103;
    box-shadow: 0 1px rgba(0,0,0,0.05);
}

.single-panel .headerbar {
  left: 0px;
}

.stickyheader .mainpanel {
    padding-top: 50px;
}

.stickyheader .header-right {
    margin-right: 240px;
}
  
.single-panel .header-right {
  margin-right: 0px;
} 

.stickyheader.leftpanel-collapsed .headerbar {
    left: 50px;   
}

.stickyheader.leftpanel-collapsed .header-right {
    margin-right: 0;
}

.stickyheader.chat-view .headerbar {
    right: 240px;
    width: auto;
}

/***** 9.5 PROFILE STYLES *****/


.img-profile {
    display: inline-block;
    max-width: 200px;
}

.hprofile .img-profile {
  max-width: 90px;
  cursor: pointer;
}

.hprofile .progress {
  background-color: #EFEFEF;
}

.img-online {
    border: 2px solid #5cb85c;
    padding: 2px;
    background-color: #fff;
}

.img-offline {
    border: 2px solid #ccc;
    padding: 2px;
    background-color: #fff;
}

.nav-center {
  text-align: center;
}

.nav-center > li {
  display: inline-block;
  float: initial;
}

.nav-line {
    background: none;
    border: 0;
    margin-bottom: 20px;
    -moz-box-shadow: 0 3px 0 rgba(0,0,0,0.1);
    -webkit-box-shadow: 0 3px 0 rgba(0,0,0,0.1);
    box-shadow: 0 3px 0 rgba(0,0,0,0.1);
}

.nav-fixed { 
  z-index: 99; 
  position: fixed; 
  top: 50px;
  left: 0; 
  width: 100%;
  text-align: center;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 0px;
}

.nav-fixed > li { 
  float: initial;
  display: inline-block;
}

.nav-fixed > li > a { 
  padding: 10px 20px;
  font-size: 13px;
}

.nav-line > li {
    margin: 0;
}

.nav-tabs > li > a {
  font-size: 15px;
}

.nav-line > li > a,
.nav-line > li > a:hover,
.nav-line > li > a:active,
.nav-line > li > a:focus {
  border: 0;
  margin: 0 !important;
  font-weight: normal;
}

.nav-line > li.active > a,
.nav-line > li.active > a:hover,
.nav-line > li.active > a:active,
.nav-line > li.active > a:focus {
  background-color: transparent;
  border: 0;
  font-weight: 500;
}

.nav-line > li.active > a,
.nav-line > li.active > a:hover,
.nav-line > li.active > a:active,
.nav-line > li.active > a:focus {
  -moz-box-shadow: 0 3px 0 #428bca;
  -webkit-box-shadow: 0 3px 0 #428bca;
  box-shadow: 0 3px 0 #428bca;
  margin: 0;
  color: #333;
}


.form-control {
  border: 1px solid #e3e6f3;
  border-radius: 2px;
  box-shadow: none;
  -webkit-transition: border .25s linear, color .25s linear, background-color .25s linear;
  transition: border .25s linear, color .25s linear, background-color .25s linear;
  -webkit-appearance: none;
  font-weight: 400;
  font-size: 13px;
  -webkit-font-smoothing: antialiased;
}
.form-control:focus, #focusedInput {
  outline: 0;
  border-color: #ccc;
  background-color: #F9F9F9;
  box-shadow: none;
}
.no-resize {
  resize: none;
}

.postbx {
  box-shadow: none;
  border-radius: 2px;
  position: relative;
}

.postbx .wrappost {
  background-color: #fcfcfc;
}

.postbx.active .wrappost {
}

.postbx .items {
  padding: 5px;
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
}

.postbx .items > .item {
  width: 80px;
  height: 80px;
  position: relative;
  display: inline-block;
  margin-right: 5px;
}

.postbx .items > .item > .bg {
  display: none;
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1;
  background-color: rgba(0, 0, 0, 0.2);
  cursor: pointer;
}

.postbx .items > .item:hover > .bg {
  display: inline-block;
}

.postbx .items > .item > .bg > span[data-role="remove"] {
  position: absolute;
  top: 8px;
  right: 2px;
  color: #eee;
  font-size: 30px;
  font-weight: 700;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}

.postbx .items > .item > .bg > span[data-role="remove"]:hover {
  color: #fff;
}

.postbx .items > .item > .title {
  position: absolute;
  left: 0px;
  bottom: 0px;
  width: 100%;
  padding: 2px 5px;
  margin: 0px;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 11px;
  line-height: 13px;
}

.postbx .items > .item > .ico-type,
.postbx .items > .item > .ico {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 3em;
}

.postbx .linkbx {
  padding: 5px;
  position: relative;
}

.postbx .linkbx > span[data-role="remove"] {
  position: absolute;
  top: 5px;
  right: 2px;
  color: #fff;
  font-size: 40px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
  cursor: pointer;
  display: none;
}

.postbx .linkbx:hover > span[data-role="remove"] {
  display: block;
}

.postbx .linkbx > img.thumb {
  max-width: 100%;
}

.postbx .users {
  padding: 5px;
}

.postbx .users > .user {
  width: 40px;
  height: 40px;
  display: inline-block;
  overflow: hidden;
  position: relative;
  margin-right: 5px;
  background-color: #eee;
  text-align: center;
}

.postbx .users > .user .bg {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  cursor: pointer;
  text-align: center;
  color: #fff;
  font-size: 25px;
  line-height: 35px;
  display: none;
}

.postbx .users > .user:hover .bg {
  display: block;
}

.postbx .users > .user > img {
  width: 100%;
  height: 100%;
}

.postbx .users > .user > i {
  font-size: 25px;
  padding-top: 10px;
}

.postbx .panel-footer {
  padding: 10px;
  background-color: #fcfcfc;
}

.panel-timeline {
  box-shadow: none;
  position: relative;
}

.panel-timeline .panel-heading {
    padding: 10px 10px 6px 10px;
    border-bottom: 0;
}

.panel-timeline .panel-body {
    padding: 0 10px;   
}

.panel-timeline .panel-body .desc {
  margin: 5px 0px 5px;
}

.panel-timeline:hover .panel-heading .option {
  display: block;
}

.panel-timeline .panel-heading .option {
  position: absolute;
  top: 5px;
  right: 5px;
  display: none;
}

.panel-timeline .panel-heading .option .btn {
  padding: 5px;
  background: none;
  border: none;
  line-height: 1px;
  color: #777;
}

.panel-timeline .panel-heading .media {
    margin: 0;
    padding: 0;
}

.panel-timeline .panel-heading .media-object,
.panel-timeline .panel-footer .media-object {
    width: 32px;
}

.view-list .panel-body .media ,
.panel-timeline .panel-body .media {
  margin-top: 5px;
  padding: 2px;
  background-color: #fff;
}

.panel-timeline .panel-body .media:nth-child(n+3) {
  display: none;
}

.view-list .panel-body .media.image ,
.panel-timeline .panel-body .media.image {
  margin-top: 0px;
}

.view-list .panel-body .media.image .media-object,
.panel-timeline .panel-body .media.image .media-object {
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 150px;
  cursor: pointer;
  background-position: top center;
}

.panel-body .media.image .media-object:hover {
  background-size: contain;
}

.panel-timeline .panel-body .itemview.allview .media {
  display: block;
}

.panel-timeline .panel-body .itemview.allview .vmore {
  display: none;
}

.view-list .panel-body .media.link {
}

.view-list .panel-body .media.link .thumb {
  width: 100%;
}

.view-list .panel-body .media.link .thumb.vthumb {
  width: 35%;
  padding-right: 5px;
  float: left;
}

.panel-timeline .panel-body .vmore {
  padding: 5px 10px;
  background-color: #fff;
  cursor: pointer;
}

.panel-timeline .panel-body .vmore:hover {
  background-color: #f9f9f9;
  color: #000;
}

.view-list .panel-body .media-object ,
.panel-timeline .panel-body .media-object {
  max-width: 100%;
}

.view-list .panel-body .media.file .ico,
.panel-timeline .panel-body .media.file .ico {
  padding: 11px;
  background-color: #eee;
}

.view-list .panel-body .media .pull-left {
  width: 100px;
  padding: 5px 10px 5px 5px;
  text-align: center;
}

.view-list .panel-body .media .pull-left img {
  -moz-box-shadow: 2px 2px 2px rgba(0, 0, 0,0.2);
  -webkit-box-shadow: 2px 2px 2px rgba(0, 0, 0,0.2);
  box-shadow: 2px 2px 2px rgba(0, 0, 0,0.2);
}

.panel-timeline .panel-body .media .media-body.info {
  display: initial;
}

.panel-timeline .panel-body .media .media-body.info h5.name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 13px;
  padding: 3px 0px;
}

.panel-timeline .panel-body .media .media-body.info time {
}

.panel-timeline .panel-body .media h5 {
  margin: 3px 0px 1px;
  font-size: 14px;
  font-weight: 500;
}

.panel-timeline .panel-body .media img {
  width: 100%;
  cursor: pointer;
}

.panel-timeline .panel-body .media.avi video {
  width: 100%;
}

.panel-timeline .panel-body .media.file .info .size {
  font-size: 11px;
}

.panel-timeline .panel-body .img-paper {
  border: 1px solid #eee;
  min-height: 70px;
}

.panel-timeline .panel-body h4 {
  font-size: 14px;
  margin-top: 5px;
  color: #333;
}

.panel-timeline h4 {
  margin: 0;
  font-size: 13px;
  line-height: normal;
}

.panel-timeline .panel-footer {
  padding: 5px 10px;
}

.panel-timeline .panel-footer .form-control {
  padding: 8px 10px;
  border-radius: 0;
}

.panel-timeline .panel-footer .comments {
}

.panel-timeline .panel-footer .comments > .comment {
  margin: 5px 0px;
}

.panel-timeline .panel-footer .comments > .comment.del p,
.panel-timeline .panel-footer .comments > .comment.del .name,
.panel-timeline .panel-footer .comments > .comment.del {
  color: #999;
}

.panel-timeline .panel-footer .comments > .comment .name {
  margin-right: 5px;
  color: #9b712c;
}

.panel-timeline .panel-footer .comments > .comment time {
  font-size: 11px;
}

.panel-timeline .panel-footer .comments > .comment p {
  color: #333;
  margin-bottom: 5px;
}

.panel-timeline .panel-footer .comments > .comment .cmd {
  margin-bottom: 10px;
}

.panel-timeline .panel-footer .comments > .comment .cmd > a {
  color: #555;
}

.panel-timeline .panel-footer .comments > .comment .cmd > a:hover {
  color: #000;
}

.panel-timeline .panel-footer .comments > .comment .cmd > a > i {
  margin-right: 3px;
}

.commentbx {
}

.commentbx .media-object {
  width: 32px;
}

.commentbx textarea {
  height: 38px;
  overflow-y: hidden;
  resize: none;
  margin-bottom: 5px;
}

.commentbx .btn-cancel {
  display: none;
}

.commentbx.reply .btn-cancel,
.commentbx.edit .btn-cancel {
  display: inline-block;
}

.panel-timeline ul {
  list-style: none;
  padding: 0;
  margin: 0;
  line-height: 21px;
}

.timeline-btns {
    padding: 5px;
}

.timeline-btns a {
    display: inline-block;
    font-size: 14px;
    width: 20px;
    height: 20px;
    color: #ccc;
    text-align: center;
    margin-right: 5px;
}

.timeline-btns a:hover {
    color: #666;
}

#activity .empty {
  margin: 40px 0px;
  text-align: center;
  color: #ccc;
}

.blog-media {
    padding-bottom: 0;
}

.blog-media .media-object {
    width: 120px;
    margin-right: 10px;
    margin-top: 5px;
}

.blog-media .media-title {
    margin: 0;
}

.ul-nostyle {
  list-style: none;
  padding: 0px;
  margin: 0px;
}

.ul-list {
  list-style: none;
  padding: 0px;
  margin: 0px;
}

.ul-list > li {
  float: left;
}

.ul-list > li.alright {
  float: right;
}

.ul-list:after {
  clear: both;
  display: block;
  content: '';
}

/***** 17.1 DROPDOWN *****/

.dropdown-menu-head {
    background: #fff
}

.dropdown-menu-head .title {
    background: #1d2939;
    color: #94989d;
    padding: 15px;
    text-transform: uppercase;
    font-size: 11px;
    margin: 0;
}

/********** book STYLES ***********/

.leftpanel .profile .wrap {
  background:rgba(0, 0, 0, 0) -webkit-linear-gradient(rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.75) 100%) repeat scroll 0 0;
  background:rgba(0, 0, 0, 0) -o-linear-gradient(rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.75) 100%) repeat scroll 0 0;
  background:rgba(0, 0, 0, 0) -moz-linear-gradient(rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.75) 100%) repeat scroll 0 0;
  background:rgba(0, 0, 0, 0) linear-gradient(rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.75) 100%) repeat scroll 0 0;
  padding: 10px;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}

.leftpanel .profile .wrap:after {
  clear: both;
  display: block;
  content: '';
}

.leftpanel .profile .book-cover {
  width: 80px;
  float: left;
  -moz-box-shadow: 3px 3px 0 rgba(12,12,12,0.05);
  -webkit-box-shadow: 3px 3px 0 rgba(12,12,12,0.05);
  box-shadow: 3px 3px 0 rgba(12,12,12,0.05);
  opacity: 0.9;
  filter: alpha(opacity=90);
}

.leftpanel .profile .wrap .info {
  overflow-x: hidden;
  margin-left: 85px;
}

.leftpanel .profile .wrap .info h4 {
  line-height: 18px;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.leftpanel .profile .wrap .info .summary {
  list-style: none;
  margin: 0px;
  padding: 0px;
  font-size: 12px;
}

.sidepanel .mnuhead {
  background-color: #1A1A1A;
  font-size: 14px;
  color: #eee;
  border-top: 1px solid #333;
  line-height: 40px;
  padding: 0px 10px;
  position: relative;
  cursor: pointer;
}

.sidepanel .mnuhead .btn {
  color: #bbb;
  width: 30px;
  text-align: center;
  display: none;
  float: right;
}

.sidepanel.edit .mnuhead .btn-add {
  display: inline-block;
}

.sidepanel .mnucontent.index {
  padding: 5px;
  background-color: #1d1f26;
}

.sidepanel .mnucontent.index.sorton {
  background-color: rgba(0, 0, 0, 0.7);
}

.sidepanel > .index .section > .idx,
.sidepanel > .index .index > .idx {
  display: block;
}

.sidepanel .index .idx {
  display: none;
}

.sidepanel.edit .index .expand > .addzone,
.sidepanel .index .expand > .idx {
  display: block;
}

.sidepanel .index .idx.expand > .mnu > a > i.fa-caret-right::before {
  content: "\f0d7";
}

.sidepanel .addzone {
  border: 1px dashed #445165;
  text-align: center;
  margin: 5px 0 5px 15px;
  padding: 5px 0px;
  font-size: 15px;
  cursor: pointer;
  display: none;
  background-color: rgba(0, 0, 0, 0.2);
}

body .preview .sidepanel .addzone {
  display: none !important;
}

.resrcview .sidepanel .addzone {
  display: none;
}

.cubeview .sidepanel .addzone {
  display: block;
  margin: 5px 0px;
}

.sidepanel .addzone:hover {
  background-color: #fff;
  opacity: 0.2;
  color: #000;
  border: 1px dashed #333;
}

.sidepanel .index .list > .mnu > a,
.sidepanel .index .midx > .mnu > a {
  border-bottom: 1px solid #343e4d;
}

.sidepanel .index .list > .mnu > a > i,
.sidepanel .index .midx > .mnu > a > i {
  display: inline-block;
  width: 10px;
}

.sidepanel .index .idx .mnu > a {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.sidepanel .index .mnu {
  position: relative;
}

.sidepanel .index .mnu > a {
  display: block;
  line-height: 30px;
  padding: 0 5px;
  margin: 3px 0;
  font-size: 12px;
  color: #bbb;
  text-decoration: none;
}

.sidepanel .index .midx > .mnu > a > span.no {
  display: inline-block;
  width: 15px;
  margin-right: 5px;
}

.sidepanel .index .idx > .mnu > a > span.cnt {
  display: inline-block;
  padding: 2px 5px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  background-color: #d5613b;
  color: #fff;
  line-height: 10px;
  font-size: 9px;
  margin-left: 5px;
}

.sidepanel .index .midx > .mnu > a > .expand-state {
  display: inline-block;
  width: 10px;
  font-size: 15px;
}

.sidepanel .index .idx .mnu > a > span.no {
  display: inline-block;
  width: 20px;
}

.sidepanel .index .idx .mnu > a > span.page {
  position: absolute;
  right: 15px;
}

.sidepanel.edit .index .idx .mnu > a > span.page {
  display: none;
}

.sidepanel .index .option {
  position: absolute;
  top: 0px;
  right: 0px;
  display: none;
  margin: 0px;
}

body .preview .sidepanel .index .mnu:hover > .option {
  display: none !important;
}

.sidepanel .index .option .btn {
  padding: 0px 15px;
  line-height: 30px;
  margin: 0px;
  border: none;
  background-color: transparent;
  font-size: 12px;
  color: #bbb;
}

.sidepanel .index .option .dropdown-menu {
  margin: 0px;
}

.sidepanel > .index .idx .option .mnu-copy {
  display: none;
}

.sidepanel .index .mnu.active > a,
.sidepanel .index .mnu:hover > a {
  background-color: #343e4d;
  color: #fff;
  text-decoration: none;
}

.preview .sidepanel .index .mnu > .option {
  display: none !important;
}

.touchon .cubeview .sidepanel .index .mnu .option,
.touchoff .cubeview .sidepanel .index .mnu:hover > .option,
.touchon .sidepanel.edit .index .mnu.edit .option,
.touchoff .sidepanel.edit .index .idx .mnu.active .option,
.touchoff .sidepanel.edit .index .mnu:hover > .option {
  display: inherit;
}

body .sidepanel > .active {
  display: inherit;
}

.overright > div,
.sidepanel > div {
  display: none;
}

.sidepanel.searchpanel .panel-body {
  padding: 10px 5px;
}

.sidepanel .nav-tabs {
  -moz-box-shadow: 0 3px 0 rgba(255,255,255,0.5);
  -webkit-box-shadow: 0 3px 0 rgba(255,255,255,0.5);
  box-shadow: 0 3px 0 rgba(255,255,255,0.5);
  margin-bottom: 5px;
}

.sidepanel .nav-tabs > li > a {
  padding: 5px 40px;
  -moz-border-radius: 0px;
  -webkit-border-radius: 0px;
  border-radius: 0px;
  color: #ccc;
  background-color: #343E4D;
}

.sidepanel .nav-tabs > li.active > a.hover,
.sidepanel .nav-tabs > li.active > a.focus,
.sidepanel .nav-tabs > li.active > a {
  color: #555;
  background-color: #fff;
}

.sidepanel .tab-content {
}

.sidepanel .tab-content .condbox {
  padding-top: 5px;
}

.sidepanel .search2 .btn-search {
  width: 100%;
  margin-top: 10px;
}

.sidepanel .search2 .extract .btn-addcond {
  width: 100%;
}

.sidepanel .form-group {
  margin-bottom: 10px;
  margin-right: 0px;
  margin-left: 0px;
}

.sidepanel .tab-content .results {
}

.sidepanel .tab-content .condlist,
.sidepanel .tab-content .results .item-list {
  margin: 0px;
  padding: 5px;
  background-color: rgba(52, 62, 77, 0.36);
  font-size: 12px;
  position: relative;
  min-height: 180px;
}

.sidepanel .tab-content .condlist {
  position: relative;
}

.sidepanel .tab-content .condlist > .item {
  background-color: #fff;
  border: none;
}

.sidepanel .tab-content .condlist > .item > .title {
  color: #000;
}

.sidepanel .tab-content .extract .cmds {
  position: fixed;
  width: 283px;
  bottom: 10px;
}

.view .qtview {
  position: absolute;
  right: 330px;
  width: 400px;
  min-height: 400px;
  padding: 10px;
  border: 1px solid #aaa;
  background-color: #fff;
  -moz-box-shadow: 3px 0 5px rgba(12,12,12,0.5);
  -webkit-box-shadow: 3px 0 5px rgba(12,12,12,0.5);
  box-shadow: 2px 2px 5px rgba(12,12,12,0.5);
  z-index: 91;
}

.view .qtview > img {
  max-width: 90%;
  max-height: 90%;
}

.sidepanel .tab-content .results table.item-list {
}

.sidepanel .tab-content .results .item-list .wrapitem {
  text-align: center;
}

.sidepanel .tab-content .results .item-list .wrapitem i {
  line-height: 50px;
  height: 50px;
}

.sidepanel .tab-content .results .item-list .wrapitem .src {
  position: relative;
  height: 70px;
}

.sidepanel .tab-content .results .item-list .title {
  font-size: 11px;
}

.sidepanel .tab-content .results table .title {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  display: inline-block;
  max-width: 180px;
  padding-left: 20px;
}

.sidepanel .tab-content .results table td {
  position: relative;
}

.sidepanel .tab-content .results table td i {
  position: absolute;
  line-height: 1.1em;
}

.sidepanel .tab-content .results table .ion-ios-folder {
  font-size: 17px;
}

.sidepanel .tab-content .results .item-list .wrapitem .title {
}

.sidepanel .tab-content .results .item-list .desc {
  display: none;
}

.sidepanel .tab-content .btn-add {
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  background-color: #F0AD4E;
  border-color: #EEA236;
  border-radius: 50%;
  display: inline-block;
  line-height: 40px;
  width: 40px;
  height: 40px;
  color: #fff;
  font-weight: normal;
  font-size: 18px;
  text-align: center;
  cursor: pointer;
  padding: 0px;
  -moz-box-shadow: 3px 0 5px rgba(12,12,12,0.5);
  -webkit-box-shadow: 3px 0 5px rgba(12,12,12,0.5);
  box-shadow: 2px 2px 5px rgba(12,12,12,0.5);
  position: fixed;
  bottom: 15px;
  right: 15px;
  z-index: 10;
  display: none;
}

.sidepanel .tab-content .cmds {
  margin: 0px;
  padding: 5px 0px;
  background-color: #343E4D;
}

.sidepanel .tab-content .cmds .btn-default:hover {
  background-color: #E4E7EA;
}

.sidepanel .tab-content .cmds .btn-default.active {
  color: #000;
}

.sidepanel .tab-content .cmds .btn-default.active:hover {
  background-color: #fff;
  color: #000;
}

.sidepanel .tab-content .cmds .btn-group {
  margin-bottom: 0px;
}

.sidepanel .tab-content .results .smry {
  margin: 0px;
  padding: 5px;
  font-size: 12px;
}

.sidepanel .tab-content .results .smry b {
  color: #D7C609;
}

.sidepanel .tab-content .results .lstSearch .col-sm-4 {
  padding-left: 5px;
  padding-right: 5px;
}

.search.item-list.ui-draggable-dragging {
  max-width: 260px;
  background-color: rgba(52, 62, 77, 0.2);
  padding-left: 5px;
  padding-bottom: 5px;
  opacity: 0.8;
}

.search.item-list.ui-draggable-dragging:after {
  clear: both;
  display: block;
  content: '';
}

.search.item-list.ui-draggable-dragging .item {
  width: 80px;
  min-height: 50px;
  margin: 5px 5px 0 0;
  padding: 0px;
  text-align: center;
  font-size: 12px;
  float: left;
}

.item-list.ui-draggable-dragging .cell {
  width: 80px;
  min-height: 20px;
  line-height: 20px;
  margin: 5px 5px 0 0;
  padding: 0px;
  text-align: center;
  font-size: 12px;
  background-color: rgba(255, 255, 255, 0.5);
  color: #000;
  display: inline-block;
}

.search.item-list.ui-draggable-dragging .item i {
  display: block;
  margin: 0px !important;
  font-size: 55px;
  line-height: 58px;
}

.search.item-list.ui-draggable-dragging .item .src {
  height: 70px;
}

.search.item-list.ui-draggable-dragging .item .title {
  margin: 0px;
  font-size: 12px;
  line-height: 12px;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.search.item-list.ui-draggable-dragging .item p.desc {
  display: none;
}

.sidepanel .tab-content .item-list div.item {
  cursor: pointer;
  height: 80px;
  opacity: 0.6;
  padding-left: 5px;
  padding-right: 5px;
  margin-bottom: 5px;
}

.sidepanel .tab-content .tab-pane.find .more,
.sidepanel .tab-content .tab-pane.find div.item {
  height: 50px;
  margin: 5px 0;
  cursor: pointer;
}

.sidepanel .tab-content .tab-pane.find .more {
  display: block;
  text-align: center;
  line-height: 50px;
}

.sidepanel .tab-content .item-list .item.active,
.touchoff .sidepanel .tab-content .item-list .item:hover,
.sidepanel .tab-content .item-list .item:focus {
  opacity: 1;
}

.sidepanel .breadcrumb > li + li::before {
  content: '\f105';
  font-family: FontAwesome;
}

.sidepanel .breadcrumb {
  margin-bottom: 0px;
  padding: 5px 0;
  background-color: transparent;
  font-size: 12px;
}

.sidepanel .tab-content .tab-pane table > tbody > tr {
  cursor: pointer;
}

.sidepanel .tab-content .tab-pane .table-hover > tbody > tr.active,
.sidepanel .tab-content .tab-pane .table-hover > tbody > tr.active > td,
.sidepanel .tab-content .tab-pane .table-hover > tbody > tr.active:hover > td,
.sidepanel .tab-content .tab-pane .table-hover > tbody > tr:hover {
  background-color: rgba(66, 139, 202, 0.26);
}

.sidepanel .results nav {
  text-align: center;
}

.sidepanel .results nav .pagination {
  margin: 10px 0px 0px 0px;
}

.sidepanel .results nav .pagination > li > a {
  padding: 6px 10px;
  font-size: 12px;
}

.preview .header-expand .extmnu {
  display: none;
}

.header-expand .extmnu {
  padding: 0px;
  margin: 0px;
  top: 0.2em;
  right: 0px;
  position: absolute;
  cursor: pointer;
}

.header-expand .extmnu .btn {
  padding: 0px 5px;
  margin: 0px;
  border: none;
  background-color: transparent;
  font-size: 12px;
  height: initial;
}

.header-expand .active .extmnu .btn:hover {
  color: #333;
}

.header-expand .extmnu .btn:hover {
  color: #eee;
}

/********** 10. eBook STYLES **********/

.ebookpanel .pages {
  width: 900px;
  margin: 0 auto;
}

.ebookpanel .pages .page {
  background-color: #FFF;
  margin-bottom: 20px;
  -moz-box-shadow: 3px 3px 0 rgba(12,12,12,0.05);
  -webkit-box-shadow: 3px 3px 0 rgba(12,12,12,0.05);
  box-shadow: 3px 3px 0 rgba(12,12,12,0.05);
  position: relative;
}

.ebookpanel .pages .page .theory {
  margin-bottom: 15px;
}

.ebookpanel .pages .page > .page-head {
  height: 120px;
}

.ebookpanel .pages .page > .page-body {
  min-height: 980px; 
}

.ebookpanel .pages .page > .page-footer {
  height: 120px;
}

.page .page-head h4 {
  position: relative;
  display: inline-block;
  font-weight: bold;
  color: #FFF;
  font-size: 37px;
  top: 63px;
  left: 60px;
}

.page .page-body {
  width: 100%;
}

.page-only .page-body {
  padding-top: 80px;
  padding-left: 13%;
  position: relative;
}

.page-only .page-body .tip {
  position: absolute;
  top: 130px;
  right: 230px;
}

.page-mix .page-body {
  padding-top: 15px;
  padding-left: 0;
}

.page .page-cols {
  padding-left: 0;
}

.page .page-cols:after {
  clear: both;
  display: block;
  content: '';
}

.page .page-cols .page-block {
  float: left;
  width: 50%;
}

.page .page-cols .col1 {
  padding-left: 60px;
}

.page .page-cols .col2 {
  padding-left: 20px;
}

.page .page-cols .col3 {
  padding-left: 90px;
}

.page .page-cols .col4 {
  padding-left: 20px;
}

.page .qitem {
  min-height: 400px;
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}

.page .qitem > li {
  margin-bottom: 5px;
}

.page .qitem .info {
  list-style: none;
  margin: 0;
  padding: 0;
  margin-bottom: 0;
}

.page .qitem .info:after {
  clear: both;
  display: block;
  content: '';
}

.page .qitem .info > div {
  float: left;
  line-height: 30px;
}

.page .qitem .info > li {
  float: left;
}

.page .qitem2 {
  min-height: 400px;
}

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

.page .qitem2 > span.qno {
  float: left;
  margin-right: 5px;
  color: #333;
  margin-top: 30px;
}

.page .qitem2 > .qbody {
  overflow: hidden;
}

.page .qitem2 > .qbody > div {
  margin-bottom: 10px;
}

.page .qitem2 > .qbody > .qtcode {
  background: none;
  background-color: #999;
  display: inline-block;
  font-size: 12px;
  padding: 0px 10px;
  margin-bottom: 5px;
  color: #FFF;
}

.page-type01 .page-head ,
.page-type01 .page-footer {
  position: relative;
}

.page-type01 .page-head span ,
.page-type01 .page-footer span {
  position: absolute;
  color: #555;
  display: inline-block;
  text-align: center;
  font-weight: bold;
}

.page-type01 .page-head .school {
  top: 60px;
  left: 90px;
  width: 100px;
  font-size: 17px;
}

.page-type01 .page-head .papertype {
  top: 95px;
  left: 90px;
  width: 100px;
  font-size: 17px;
}

.page-type01 .page-head .extype {
  top: 170px;
  left: 100px;
  width: 100px;
  font-size: 17px;
}

.page-type01 .page-head .papercnt {
  top: 110px;
  right: 90px;
  width: 100px;
  font-size: 27px;
}

.page-type01 .page-head h1 {
  color: #000;
  padding-top: 80px;
  text-align: center;
  font-weight: bold;
}

.page-type01 .page-footer .pageno {
  top: 73px;
  left: 408px;
}

.page-type01 .page-footer .pagecnt {
  top: 80px;
  left: 460px;
}

.page .qno {
  font-size: 33px;
  font-weight: bold;
  color: #A0A0A0;
}

.page .qno > span {
  color: #000;
}

.page .clinic-qitem .qno {
  text-align: center;
  display: inline-block;
  min-width: 75px;
  color: #555;
  font-size: 15px;
  line-height: 20px;
}

.page .clinic-qitem .qno .no {
  color: #000;
}

.page .qcode {
  position: relative;
  background: url(/skins/default/images/book/58585/qt.png) no-repeat;
  background-size: 100% auto;
  width: 120px;
  height: 40px;
  padding-left: 20px;
  font-size: 12px;
  font-weight: bold;
  color: #fff;
}

.page .qlvl {
  position: relative;
}

.page .qlvl > img {
  width: 35px;
}

.page .qitem .bxextra {
  height: 20px;
}

.page .qitem .bxextra .statistics {
  width: 100%;
}

.page .qitem .statistics {
  display: none;
}

.page .qitem .statistics a.btn {
  font-size: 13px;
  margin: 0;
  padding: 0;
}

.page .qitem .qt {
  margin-bottom: 15px;
}


.page .qitem .omr {
  margin: 10px 0;
}

.page .qitem .omr input {
  padding: 3px 10px;
}

.page .qitem .omr .btn {
  padding: 2px 10px;
}

.page .qitem .omr .selnum {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: center;
}

.page .qitem .omr .selnum li {
  color: #EEE;
  cursor: pointer;
  position: relative;
  display: inline-block;
  margin-right: 10px;
}

.page .qitem .omr .selnum li > span {
  position: absolute;
  top: 4px;
  left: 2px;
  color: #999;
  font-size: 15px;
  font-weight: bold;
  width: 20px;
  text-align: center;
}

.page .qitem .omr .selnum li.sel {
  /*color: #d9534f;*/
  /*color: #337ab7;*/
  color: #222;
}

.page .qitem .omr .selnum li.sel > span {
  color: #FFF;
}

.page .qitem .omr .selnum li:hover {
  color: #222;
}

.page .qitem .omr .selnum li:hover > span {
  color: #FFF;
}

.page .qitem .ex {
}

.page .qitem .sol {
  display: none;
  position: relative;
}

.page .qitem .sol a.btn {
  position: absolute;
  right: 10px;
}

.page .qitem .show {
  display: block;
}

.page .theory .bx-top {
  background: url(/skins/default/images/book/58591/bx_top.png) no-repeat;
  background-size: 100% auto;
  height: 60px;
}

.page .theory .bx-rp {
  background: url(/skins/default/images/book/58591/bx_rp.png) repeat-y;
  background-size: 100% auto;
  padding-left: 110px;
  vertical-align: middle;
}

.page .theory .bx-bt {
  background: url(/skins/default/images/book/58591/bx_bt.png) no-repeat;
  background-size: 100% auto;
  height: 60px;
}

.page .theory .bx-rp img {
  margin-top: 15px;
}

.page .ox {
  position: absolute;
  width: 100px;
  height: 100px;
  top: -30px;
  left: -10px;
}

.page .wrong {
  background: url(/skins/default/images/book/x.png) no-repeat;
  background-size: 100% 100%;
}

.page .correct {
  background: url(/skins/default/images/book/o.png) no-repeat;
  background-size: 100% 100%;
}

.page .clinic-qitem {
  display: none;
}

.page-mix .no-theory {
  padding-top: 120px;
}

.page-mix .qitem {
  padding-top: 10px;
  padding-left: 100px;
  min-height: 300px;
}

.page-mix .qitem:after {
  clear: both;
  display: block;
  content: '';
}

.page-mix .qitem > li {
  float: left;
  margin-bottom: 0;
}

.page-mix .qitem > li.nobx {
  width: 15%;
  margin-right: 10px;
  position: relative;
}

.page-mix .qitem > li.nobx .code {
  display:inline-block;
  font-size: 12px;
  font-weight: bold;
  min-width: 75px;
  text-align: center;
  text-decoration: none;
  background-color: #337ab7;
  color: #FFF;
  margin-top: 15px;
  padding: 3px;
  cursor: pointer;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

.page-mix .clinic-qitem > li.nobx .code {
  background-color: #d9534f;
}

.page-mix .qitem > li.qtbody .info {
  margin-bottom: 10px;
  line-height: 20px;
}

.page-mix .qitem > li.qtbody .info .statistics {
  float: right;
}

.page-mix .qitem > li.qtbody .info .statistics a.btn {
  font-size: 13px;
  margin: 0;
  padding: 0;
}

.page-mix .qitem > li.qtbody .prop {
  line-height: 25px;
}

.page-mix .qitem > li.qtbody .prop i {
  color: #c12e2a;
  font-size: 12px;
}

.page-mix .qitem > li.tip {
  position: absolute;
  left: 710px;
  padding-top: 10px;
  width: 120px;
  font-size: 12px;
}

.page-mix .qitem > li.tip i {
  color: #428bca;
}

.error-page .page-head {
  position: relative;
}

.error-page .page-head span.no {
  position: absolute;
  font-size: 45px;
  font-weight: bold;
  color: #FFF;
  top: 95px;
  left: 80px;
}

.error-page .page-head h1.title {
  position: absolute;
  font-weight: bold;
  color: #FFF;
  top: 68px;
  left: 150px;
}

.error-page .page-cols .col1 {
  padding-left: 50px;
  padding-right: 5px;
}

.error-page .qitem {
}

.error-page .qitem table {
  margin-bottom: 10px;
}

.error-page .qitem .qtprop {
  margin-bottom: 5px;
}

.error-page .qitem .qtprop > li {
  line-height: 28px;
}

.error-page .qitem .qtprop a.btn {
  vertical-align: initial;
  margin-right: 3px;
}

.error-page .qitem .qtprop .cmd a.btn {
  padding: 0px;
}

.error-page .qitem .qtcode {
  display: inline;
  background-color: #428bca;
  color: #FFF;
  padding: 2px 10px;
  font-weight: bold;
   -moz-border-radius: 3px;
   -webkit-border-radius: 3px;
   border-radius: 3px;
}

.error-page .qitem .qtlvl {
  color: #d9534f;
}

.error-page .qitem .qtlvl > i {
  margin-right: 2px;
}

.error-page .qitem .btn-qcode {
  padding: 0px 10px;
  font-size: 13px;
  font-weight: bold;
}

.error-page .clinic-qt {
  margin-top: 20px;
}

.hide {
  display: none;
}

.guide-page {
}

.guide-page .page-head .title {
  margin: 0px auto;
  width: 85%;
}

.guide-page .page-head .title > h3 {
  padding-top: 100px;
  margin: 0px;
}

.guide-page .page-head .title > h1 {
  margin: 0px;
  padding: 10px 0px;
  border-bottom: 3px solid #f0ad4e;
  font-weight: bold;
}

.guide-page .page-head .title > h1 > i {
  color: #d9534f; 
}

.guide-page .page-body  {
  padding-top: 100px;
}

.guide-page .page-body .desc-col {
  padding-left: 70px;
}

.guide-page .page-body .screenshot {
  padding-top: 10px;
  padding-right: 60px;
}

.guide-page .page-body .wrap-screenshot {
  min-height: 800px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  padding: 10px;
}

.guide-page .page-body .popover {
  display: block;
  margin: 20px;
  position: relative;
  width: 260px;
  border: none;
  color: #8a6d3b;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  background-color: #fcf8e3;
  line-height: 23px;
  z-index: 0;
}

.guide-page .page-body .popover.left .arrow:after {
  border-left-color: #fcf8e3;
}

.guide-page .page-body .popover.left .arrow {
  border-left-color: #fcf8e3;
}

.guide-page .page-body .mb20 {
  margin-bottom: 20px;
}

.guide-page .page-body .mb40 {
  margin-bottom: 40px;
}

.guide-page .page-body .mb50 {
  margin-bottom: 50px;
}

.guide-page .page-body .mb100 {
  margin-bottom: 100px;
}

.guide-page .page-body .mb200 {
  margin-bottom: 200px;
}

.page .page-footer .path {
  position: absolute;
  width: 87%;
  font-weight: bold;
  margin: 0;
  left: 55px;
  padding-top: 40px;
}

.page .page-footer .rpath {
  text-align: right;
}

.page .page-footer .pageno {
  display: table;
  width: 50px;
  margin: 0 auto;
  text-align: center;
  font-weight: bold;
  color: #000;
  padding-top: 40px;
}

.page1 {
  background: url(/skins/default/images/book/58594/bgf_top.png) left top no-repeat, url(/skins/default/images/book/58594/bgf_foot.png) left bottom no-repeat, url(/skins/default/images/book/58594/bgf_mid.png) left top repeat-y;
  background-size: 100% auto;
}

.page2 {
  background: url(/skins/default/images/book/58594/bgr_top.png) left top no-repeat, url(/skins/default/images/book/58594/bg_foot.png) left bottom no-repeat, url(/skins/default/images/book/58594/bg_mid.png) left top repeat-y;
  background-size: 100% auto;
}

.page3 {
  background: url(/skins/default/images/book/58594/bgl_top.png) left top no-repeat, url(/skins/default/images/book/58594/bg_foot.png) left bottom no-repeat, url(/skins/default/images/book/58594/bg_mid.png) left top repeat-y;
  background-size: 100% auto;
}

.page4 {
  background: url(/skins/default/images/book/58593/bgf_top.png) left top no-repeat, url(/skins/default/images/book/58593/bgf_foot.png) left bottom no-repeat, url(/skins/default/images/book/58593/bgf_mid.png) left top repeat-y;
  background-size: 100% auto;
}

.page5 {
  background: url(/skins/default/images/book/58593/bgl_top.png) left top no-repeat, url(/skins/default/images/book/58593/bg_foot.png) left bottom no-repeat, url(/skins/default/images/book/58593/bg_mid.png) left top repeat-y;
  background-size: 100% auto;
}

.page6 {
  background: url(/skins/default/images/book/58591/bgf_top.png) left top no-repeat, url(/skins/default/images/book/58591/bgf_foot.png) left bottom no-repeat, url(/skins/default/images/book/58591/bgf_mid.png) left top repeat-y;
  background-size: 100% auto;
}

.page7 {
  background: url(/skins/default/images/book/58591/bgl_top.png) left top no-repeat, url(/skins/default/images/book/58591/bg_foot.png) left bottom no-repeat, url(/skins/default/images/book/58591/bg_mid.png) left top repeat-y;
  background-size: 100% auto;
}

.page8 {
  background: url(/skins/default/images/book/58591/bgr_top.png) left top no-repeat, url(/skins/default/images/book/58591/bg_foot.png) left bottom no-repeat, url(/skins/default/images/book/58591/bg_mid.png) left top repeat-y;
  background-size: 100% auto;
}

.page9 {
  background: url(/skins/default/images/book/58613/bgf_top.png) left top no-repeat, url(/skins/default/images/book/58613/bgf_foot.png) left bottom no-repeat, url(/skins/default/images/book/58613/bgf_mid.png) left top repeat-y;
  background-size: 100% auto;
}

.page10 {
  background: url(/skins/default/images/book/58613/bgr_top.png) left top no-repeat, url(/skins/default/images/book/58613/bg_foot.png) left bottom no-repeat, url(/skins/default/images/book/58613/bg_mid.png) left top repeat-y;
  background-size: 100% auto;
}

.clinic-page {
  display: none;
}

.index-page {
  background: url(/skins/default/images/book/58585/index_top.png) no-repeat;
  /*
  background: url(/skins/default/images/book/58585/index_top.png) left top no-repeat, url(/skins/default/images/book/58585/index_foot.png) left bottom no-repeat, url(/skins/default/images/book/58585/index_mid.png) left top repeat-y;
  */
  background-size: 100% auto;
}

.page12 {
  background: url(/skins/default/images/book/58585/empty_top.png) left top no-repeat, url(/skins/default/images/book/58585/empty_foot.png) left bottom no-repeat, url(/skins/default/images/book/58585/empty_mid.png) left top repeat-y;
  background-size: 100% auto;
}

.page15 {
  background: url(/skins/default/images/book/error/bgf_top.png) left top no-repeat, url(/skins/default/images/book/error/bg_foot.png) left bottom no-repeat, url(/skins/default/images/book/error/bg_mid.png) left top repeat-y;
  background-size: 100% auto;
}

.page16 {
  background: url(/skins/default/images/book/error/bgl_top.png) left top no-repeat, url(/skins/default/images/book/error/bg_foot.png) left bottom no-repeat, url(/skins/default/images/book/error/bg_mid.png) left top repeat-y;
  background-size: 100% auto;
}

.hide-page {
  display: none;
}

.index-page .container-fluid {
  background-color: #FFF;
  width: 80%;
  margin-top: 100px;
  font-size: 13px;
}

.index-page .container-fluid .row {
  line-height: 30px;
}

.index-page .container-fluid .idxunit {
  line-height: 40px;
}

.index-page .container-fluid .idxunit {
  margin-top: 25px;
  margin-bottom: 10px;
  border-bottom: 1px dashed #A9A9A9;
}

.index-page .container-fluid .row .progress {
  margin-top: 9px;
  background-color: #EFEFEF;
}

.index-page .container-fluid .idxunit .progress {
  padding: 10px 0;
}

.index-page .container-fluid .row .progress span {
}

.widget.lessonbx:not(:first-child) {
  padding-top: 20px;
}

.widget .progress {
  background-color: #ddd;
}

.widget .table tbody tr td .progress {
  margin-top: 5px;
}

.widget .table.table-xs tbody tr td .progress {
  margin-top: 0px;
}

.widget .smry .box {
  position: relative;
  min-height: 50px;
  padding: 20px;
  margin-bottom: 10px;
  text-align: center;
}

.widget .smry .box > i {
  display: inline-block;
  margin: 0px 5px;
  color: #888;
}

.widget .smry .box > .data {
  display: inline-block;
}

.widget .widget-header {
  margin-bottom: 5px;
  position: relative;
}


.widget .widget-header.clear > .title {
  float: left;
  margin: 0px;
  line-height: 27px;
}

.widget .widget-header .title {
  color: #333;
}

.widget .widget-header .title .more,
.widget .widget-header .title .icoexpand {
  position: absolute;
  right: 5px;
  bottom: 8px;
  cursor: pointer;
}

.widget .widget-header.clear > .filter {
  float: right;
}

.widget .widget-header.clear > .filter .btn-group {
  margin-bottom: 0px;
}

.widget .boxes {
  font-size: 20px;
}

.widget .box {
  min-height: 80px;
  margin: 0px 0px 10px 0px;
  font-size: 12px;
}

.widget .box.sel {
  background-color: #DDD;
}

.widget .boxes .box {
  display: inline-block;
}

.widget .box > .thumb {
  width: 80px;
  height: 70px;
  margin-right: 5px;
  float: left;
}

.widget .box > .info {
  list-style: none;
  padding: 0px;
  font-size: 12px;
  position: relative;
  min-height: 45px;
}

.widget .box .name > span {
  font-size: inherit;
  opacity: 1;
}

.widget .box > .info .cate {
  color: #000;
}

.widget .box > .thumb > .bg {
  width: 100%;
  height: 100%;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
}

.widget .box > .info .title {
  font-size: 14px;
  margin: 5px 0px;
  font-weight: 600;
}

.widget .box > .info .rate > .desc {
  margin-top: 5px;
}

.widget .box > .info .rate > .desc > span {
  margin-right: 2px;
  color: #000;
}

.widget .box > .info .rdate {
  font-size: 11px;
  margin-top: 2px;
}

.widget .box > .info .option {
  position: absolute;
  top: 0px;
  right: 5px;
}

.box {
   -moz-border-radius: 3px;
   -webkit-border-radius: 3px;
   border-radius: 3px;
   -moz-box-shadow: none;
   -webkit-box-shadow: none;
   box-shadow: none;
   background: #fcfcfc;
   border: 0;
    /*
   -moz-box-shadow: 0 3px 0 rgba(12,12,12,0.03);
   -webkit-box-shadow: 0 3px 0 rgba(12,12,12,0.03);
   box-shadow: 0 3px 0 rgba(12,12,12,0.03);
   */
   min-height: 140px;
   padding: 15px;
}

.box .ul-list > li > i {
  margin-top: 5px;
  color: #999;
}

.box .ul-list > li {
  margin: 0px 10px;
}

.box .ul-list > li h1 {
  display: inline;
  color: #d9534f;
}

.box .ul-list > li span {
  color: #333;
}

.jqstooltip{ 
  width:50px;
  height:25px!important;
}

.btn-facebook {
  color: #ffffff;
  background-color: #3b5998;
  border-color: #3b5998;
}
a.btn-facebook {
  color: #ffffff;
}
.btn-facebook:hover,
.btn-facebook:focus,
.btn-facebook:active,
.btn-facebook.active,
.open .dropdown-toggle.btn-facebook {
  color: #ffffff;
  background-color: #344e86;
  background-image: none;
  border-color: #344e86;
}

.btn-twitter {
  color: #ffffff;
  background-color: #55acee;
  border-color: #55acee;
}
a.btn-twitter {
  color: #ffffff;
}
.btn-twitter:hover,
.btn-twitter:focus,
.btn-twitter:active,
.btn-twitter.active,
.open .dropdown-toggle.btn-twitter {
  color: #ffffff;
  background-color: #3ea1ec;
  background-image: none;
  border-color: #3ea1ec;
}

.box-success {
  background-color: #1caf9a;
}

.box-danger {
  background-color: #d9534f;
}

.box-primary {
  background-color: #428bca;
}

.box-info {
  background-color: #15acdc;
}

.box-dark {
  background-color: #4f5061;
}

.box-default {
  background-color: #F0F0F0;
  color: #59595a;
}

.box span {
  font-size: 12px;
  opacity: 0.75;
}

.box h1 {
  margin: 0;
  font-weight: bold;
}

.box h4 {
  margin: 0;
}

h5.subtitle {
  font-size: 14px;
  font-weight: bold;
  position: relative;
}



/********** 15. MODALS **********/

.modal {
  text-align: center;
}

.modal:before {
  display: inline-block;
  vertical-align: middle;
  content: " ";
  height: 100%;
  margin-right: -4px;
}

.modal-dialog {
  display: inline-block;
  text-align: left;
  vertical-align: middle;
  position: relative;
}

#popup-confirm .modal-dialog {
  width: auto;
}

#popup-confirm .modal-content {
  padding: 10px;
}

.modal-body .nav-tabs a[data-toggle=tab] {
  padding: 5px 20px;
}

.modal-viewer {
    margin-top: 0;
    margin-bottom: 0;
    top: 50%;
    left: 50%;
    width: auto;
    position: absolute;
}

.modal-viewer .modal-content {
    position: relative;
    width: 900px;
    margin-left: -50%;
    margin-top: -300px;
    padding: 0px;
}

.modal-info .modal-content {
  padding: 10px;
}

.modal-menu .modal-content {
}

.modal-viewer .modal-photo-left,
.modal-viewer .modal-photo-right {
}

.modal-viewer .modal-photo-left {
  height: 100%;
  padding: 20px;
}

.modal-viewer .modal-photo {
    top: 50%;
    position: relative;
}

.modal-viewer .row {
    margin-left: 0;
    margin-right: 0;
}

.modal-viewer .info-rate {
  background-color: #FCFCFC;
  padding: 5px;
  font-size: 12px;
}

.modal-viewer .info-rate span {
  font-weight: bold;
}

.modal-viewer .info-rate .progress {
  background-color: #d0dbec;
  margin: 5px 0;
}

.modal-viewer .dropdown-menu {
  font-size: 12px;
}

.modal-viewer .img-responsive {
    max-height: 600px;
    margin: auto;
}

.modal-viewer .panel-heading {
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
  border-radius: 0;
}

.modal-viewer .panel {
  background-color: #FFF;
  box-shadow: none;
}

.modal-viewer .panel-body {
  background-color: #FFF;
}


.modal-viewer .close {
  font-weight: none;
  color: #FFF;
  opacity: 1;
}

.modal-info .modal-viewer .close {
  color: #000;
}

.modal-viewer .panel-body .btn-remove {
  color: #d9534f;
}
.modal-viewer .panel-body select {
  padding: 5px;
}


.modal-viewer .panel-body .filter {
  padding: 10px;
  border: 1px solid #e3e6f3;
}

.modal-viewer .panel-body .filter > li {
  line-height: 30px;
  font-size: 12px;
}

.modal-viewer .panel-body .filter > li > span.lbl {
  display: inline-block;
  padding-right: 5px;
}

.modal-viewer div.qt {
  margin-bottom: 10px;
}

.modal-viewer div.ex {
  margin-bottom: 10px;
}

.modal-viewer .categ {
  font-size: 13px;
}

.modal-info .modal-viewer .media-title {
  font-size: 17px;
  font-weight: bold;
}

.modal-info .modal-viewer .media-title span {
  display: inline;
  padding: 0px 10px 2px 10px;
  margin-right: 10px;
  color: #FFF;
  background-color: #5BC0DE;
}

.modal-info .modal-viewer .box {
  min-height: auto;
  padding: 5px;
  margin-bottom: 5px;
}

.modal-info .modal-viewer .chart small.title {
  display: inline-block;
  margin-bottom: 10px;
}

.modal-info .modal-viewer .chart .progress {
  background-color: #F0F0F0;
  margin-bottom: 5px;
}

.modal-info .modal-viewer .box .row div:first-child > i {
  margin-top: 5px;
}

.modal-info .modal-viewer .box h3 {
  margin: 0px;
  font-size: 15px;
  font-weight: bold;
}

.modal-theory .wrapcontent:after {
  clear: both;
  display: block;
  content: '';
}

.modal-theory .wrapcontent {
  padding: 10px;
}

.modal-theory .modal-viewer .close {
  color: #000;
}

.modal-theory video {
  width: 300px;
  float: left;
  margin-right: 10px;
}

.modal-theory .theory {
  overflow: hidden;
}

.panel-comments {
  padding: 5px;
  font-size: 12px;
  margin-bottom: 10px;
}

.panel-comments .media {
  padding: 5px 0 !important;
}

.panel-comments .comment {
  overflow: hidden;
}

.panel-comments .comment .comment-author {
  margin-top: 3px;
}

.panel-comments .comment .comment-author a {
  color: #d2c2a7;
}

.panel-comments .comment .comment-meta {
  margin-bottom: 5px;
}

.panel-comments .media .media-object {
  width: 32px;
}

.panel-comments p {
  margin: 0px 0px 5px;
}

.panel-comments hr {
  margin: 0px;
}

.panel-comments input {
  font-size: 12px;
}

.panel-comments button {
  font-size: 13px;
  padding-bottom: 6px;
  margin-bottom: 1px;
}

.panel-comments .panel-footer {
padding: 10px 25px;
}

/********** 11. TABLE STYLES **********/

.table-action {
    text-align: center;
}

.table-action-hide a {
    opacity: 0;
}

.table-action a,
.table-action-hide a {
    display: inline-block;
    margin-right: 5px;
    color: #666;
}

.table-action a:hover,
.table-action-hide a:hover {
    color: #333;
}

.table-action a:last-child,
.table-action-hide a:last-child {
    margin-right: 0;
}

.table-primary thead tr th {
    background-color: #428BCA;
}

.table-success thead tr th {
    background-color: #1CAF9A;
}

.table-warning thead tr th {
    background-color: #F0AD4E;
}

.table-danger thead tr th {
    background-color: #D9534F;
}

.table-info thead tr th {
    background-color: #5BC0DE;
}

.table-dark thead tr th {
    background-color: #1D2939;
}

.table-white thead tr th {
    background-color: #F5F5F5;
}

.table.table-primary thead tr th,
.table.table-success thead tr th,
.table.table-danger thead tr th,
.table.table-warning thead tr th,
.table.table-info thead tr th,
.table.table-dark thead tr th {
    color: #fff;
    border-bottom: 0;
}

.table-bordered.table-primary thead tr th,
.table-bordered.table-success thead tr th,
.table-bordered.table-warning thead tr th,
.table-bordered.table-danger thead tr th,
.table-bordered.table-info thead tr th,
.table-bordered.table-dark thead tr th {
    border-color: rgba(255,255,255,0.2);
}

.table-vbordered {
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
}

.table-vbordered tr th:not(:last-child),
.table-vbordered tr td:not(:last-child) {
  border-right: 1px solid #ddd;
}

/********** 11. PROGRESS BAR STYLES **********/

.progress {
  overflow: hidden;
  margin-bottom: 0px;
  border-radius: 2px;
  background-color: #FFF;
  padding: 0;
  height: 20px;
  box-shadow: none;
}
.progress-bar {
  padding: 0 5px;
  text-align: left;
  box-shadow: none;
  background-color: #1582dc;
  -webkit-transition: width 800ms ease;
  transition: width 800ms ease;
}
.progress-bar-success {
  background-color: #15db81;
}
.progress-striped .progress-bar-success {
  background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
}
.progress-bar-info {
  background-color: #15acdc;
}
.progress-striped .progress-bar-info {
  background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
}
.progress-bar-warning {
  background-color: #daac16;
}
.progress-striped .progress-bar-warning {
  background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
}
.progress-bar-danger {
  background-color: #d9534f;
}
.progress-striped .progress-bar-danger {
  background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent));
  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
}

.progress-bar-default {
  background-color: #ccc;
}

.progress-bar > span.rate {
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
}

/* Progress bar sizing */
.progress-xs {
  height: 5px;
}
.progress-sm {
  height: 10px;
}
.progress-md {
  height: 15px;
}
.progress-lg {
  height: 25px;
}

/********** 12. Signin STYLES **********/
/***************************************/


.signinpanel {
  width: 360px;
  display: inline-block;
  vertical-align: middle;
  text-align: justify;
  padding: 10px 0px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.signinpanel .logopanel {
  float: none;
  width: auto;
  padding: 0;
  background: #FFF url(/common/images/logo_naenote.svg) no-repeat left top;
  background-size: 45%;
  color: #1d2939;
  height: 60px;
  cursor: pointer;
}

.signinpanel .logopanel h1 {
  margin-bottom: 30px;
  font-size: 25px;
  display: none;
}

.signinpanel .signin-info ul {
  list-style: none;
  padding: 0;
  margin: 20px 0;
}

.signinpanel .title {
  font-weight: 400;
  font-size: 22px;
  margin-bottom: 10px;
}

.signinpanel .extra {
  font-size: 12px;
}

.signinpanel .form-control {
  display: block;
  margin-top: 15px;
  border: none;
  border-bottom: 1px solid #ccc;
  padding: 10px 0px;
  font-weight: normal;
  color: #000;
}

.signinpanel .uname {
  background: #fff url(/skins/default/images/user.png) no-repeat 95% center; 
}

.signinpanel .pword {
  background: #fff url(/skins/default/images/locked.png) no-repeat 95% center; 
}

.signinpanel .uid {
  background: #fff url(/skins/default/images/mobile.png) no-repeat 95% center; 
}

.signinpanel .btn {
  margin-top: 30px;
  margin-bottom: 5px;
  background-color: #34cdcb;
  border-color: #34cdcb;
  color: #fff;
}

.signinpanel .btn:hover,
.signinpanel .btn:active {
  background-color: #34cdcb;
  border-color: #34cdcb;
}

.signinpanel form {
  background: #fff;
  border: 1px solid #eee;
  -moz-box-shadow: 1px 3px 4px rgba(12,12,12,0.01);
  -webkit-box-shadow: 1px 3px 4px rgba(12,12,12,0.01);
  box-shadow: 1px 3px 4px rgba(12,12,12,0.01);
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  padding: 50px 30px 120px;
}

.signinpanel form a {
  color: #00c0bd;
  display: inline-block;
}

.signinpanel .footer {
  font-size: 11px;
  margin-top: 10px;
}

.signup-footer {
  border-top: 1px solid #ddd;
  margin-top: 30px;
  padding-top: 10px;
  font-size: 12px;
  font-weight: 100;
}



/********** 12. MYNOTE STYLES **********/
/***************************************/

.notepanel .nav-tabs > li > a {
  padding: 10px 20px;
}

.taskbar {
  background-color: #f5f5f5;
  padding: 5px;
}

.taskbar > .info {
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid #eee; 
}

.taskbar > .info > h2 {
  margin: 0px;
  font-weight: 600;
  font-size: 15px;
  line-height: 25px;
}

.taskbar > .info > small {
}

.taskbar b {
  color: #333;
}

.taskbar > .option {
  float: right;
}

.taskbar > .option .view-options {
  margin-top: 5px;
}

.taskbar .smry {
  background-color: #F0F0F0;
  padding: 5px 0px;
  margin: 0px 0px 10px;
}

.taskbar .smry h5 {
  line-height: 33px;
  margin: 0px;
}

.taskbar .smry span {
  display: inline-block;
}

.taskbar .smry span b {
  font-size: 13px;
}

.taskbar .smry .btn-group {
margin: 0px;
}

.tags {
}

.tags > span {
  color: #333;
  font-weight: 500;
  display: inline-block;
  padding: 0px 12px;
  border: 1px solid #eee;
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
  border-radius: 50px;
  font-size: 12px;
  max-width: 150px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  background-color: #fff;
  cursor: pointer;
  line-height: 25px;
  margin-bottom: 5px;
}

.tags > span.active {
  background-color: #d9534f;
  color: #fff;
  border: 1px solid #841f1c;
}

.tags > span:not(.active):hover {
  background-color: #f0f0f0;
  border: 1px solid #ccc;
}

.wrapnote .notes {
  /*margin: 0 auto;*/
  margin-bottom: 10px;
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

.wrapnote .notes .note {
  width: 130px;
  max-height: 200px;
  margin: 5px;
  cursor: pointer;
  display: inline-block;
  vertical-align: top;
  position: relative;
}

.wrapnote .notes .note:hover .cover,
.wrapnote .notes .note:hover .new {
  border-color: #bbb;
}

.wrapnote .notes .note:hover .new .plus {
  color: #d9534f;
}

.wrapnote .notes .note:hover > span[data-role="remove"] {
  display: inline-block;
}

.wrapnote .notes .note > .cover {
  height: 160px;
  -webkit-box-shadow: 1px 1px 4px rgba(0,0,0,0.4);
  box-shadow: 1px 1px 4px rgba(0,0,0,0.5);
  background: url(/skins/default/images/renote_cover.png) left center no-repeat;
  background-size: cover;
}

.wrapnote .notes .note > .cover i {
  margin: 10px;
  color: #d9534f;
}

.wrapnote .notes .note > span[data-role="remove"] {
  position: absolute;
  top: -5px;
  right: -5px;
  display: none;
}

.mode-mobile .wrapnote .notes .note > span[data-role="remove"] {
  display: inline-block;
}

.wrapnote .notes .note > .name {
  margin: 5px 0px 0px;
  line-height: 20px; 
  font-size: 12px;
  font-weight: 700;
  position: absolute;
  bottom: 0px;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  color: #fff;
  padding: 0px 5px;
  text-align: center;
}

.wrapnote .notes .note > .new {
  height: 160px;
  border: 1px dashed #DDD;
  position: relative;
}

.wrapnote .notes .note > .new .plus {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 40px;
  color: #bf7f7d;
}

.wrapnote .notes .note > .tag {
  font-size: 11px;
}

.wrapnote .searchbx button,
.wrapnote .searchbx input {
  border-color: #ccc;
}

.wrapnote .searchbx .input-group-addon,
.wrapnote .searchbx .input-group-btn {
  display: table-cell;
  background-color: #fff;
}

.wrapnote .searchbx .date {
  width: 150px;
  display: inline-table;
}

.wrapnote .searchbx .keyword {
  width: 200px;
  display: inline-table;
}

.modal .notes .note {
}

.modal .notes .note .cover {
  max-width: 100%;
  width: 150px;
  -moz-box-shadow: 1px 1px 4px rgba(0,0,0,0.5);
  -webkit-box-shadow: 1px 1px 4px rgba(0,0,0,0.5);
  box-shadow: 1px 1px 4px rgba(0,0,0,0.5);
}

.renotes {
}

.renotes > .renote {
  display: inline-block;
  width: 100px;
  padding: 5px;
  margin-bottom: 5px;
  cursor: pointer;
  position: relative;
}

.renotes > .renote .cover {
  border: 1px solid #F0F0F0;
  height: 120px;
  background: url(/skins/default/images/renote_cover.png) left center no-repeat;
  background-size: cover;
}

.renotes > .renote .title {
  font-size: 12px;
  margin: 5px 0px 0px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.renotes > .renote.sel .bg {
  display: inherit;
}

.renotes > .renote .bg {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 1;
}

.renotes > .renote .bg i {
  text-align: center;
  color: #fff;
  margin: 5px;
}

.note-content .btn-group label {
  margin-bottom: 0px;
}

.note-content .btn-group ul > li {
  font-size: 12px;
}

.note-content .btn-group .btn-sm {
  font-size: 14px;
}

.view-list {
  font-size: 12px;
}

.view-list .panel {
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  position: relative;
}

.selmode .view-list .panel {
  cursor: pointer;
}

.view-list .panel:hover {
  border: 1px solid #aaa;
}

.view-list .panel.sel > input.checkbox,
.view-list .panel:hover > input.checkbox {
  display: initial;
}

.view-list .panel > input.checkbox {
  display: none;
  position: absolute;
  top: 5px;
  left: 5px;
  z-index: 2;
}
.view-list .panel .bg {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 1;
}

.view-list .panel.sel .bg {
  display: initial;
}

.view-list .panel .panel-heading {
  padding: 10px;
}

.view-list .panel .panel-heading .info {
}

.wrapfaults .view-list .panel .panel-heading .info {
  padding-left: 45px;
}

.wrapfaults .view-list .panel .panel-heading .cover {
  position: absolute;
  font-size: 35px;
  color: #bbbcbf;
}

.view-list .panel .panel-heading .info .prop {
  margin-bottom: 5px;
}

.view-list .panel .panel-heading .symbol {
  margin-right: 10px;
}

.view-list .panel .panel-heading .btns > a {
  color: #59595a;
  font-size: 14px;
}

.view-list .panel .panel-heading .symbol img {
  width: 48px;
  height: 63px;
  border: 1px solid #F0F0F0;
}

.view-list .panel .panel-heading .symbol > i {
  padding: 4px 0;
}

.view-list .panel .panel-heading .symbol > i.fa-bug {
  color: #d9534f;
}

.view-list .panel .panel-heading .symbol > i.fa-life-ring {
  color: #337ab7;
}

.view-list .panel .panel-heading .qcode {
  padding: 0 10px;
  line-height: 15px;
  font-weight: bold;
}

.view-list .panel .panel-heading .prop .level {
  line-height: 17px;
  color: #d9534f;
}

.view-list .panel .panel-heading .title {
  margin: 0px;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative;
  padding: 0px 50px 5px 0px;
}

.view-list .panel .panel-heading .no {
  -webkit-border-radius: 5px;
  border-radius: 5px;
  border: 1px solid #ccc;
  background-color: #F9F9F9;
  margin-left: 10px;
  padding: 2px 10px;
  font-size: 12px;
  position: absolute;
  top: 10px;
  right: 7px;
  line-height: 30px;
}

.view-list .panel .panel-btns > a {
  font-size: 13px;
  font-weight: normal;
}

.view-list .panel .panel-body {
  padding: 10px;
}

.wrapfaults .view-list .panel .panel-body {
}

.view-list .panel .panel-body div.qt {
  margin-bottom: 10px
}

.view-list .panel .panel-body .tags {
  font-weight: bold;
  color: #1d2939;
  margin-top: 10px;
}

.view-list .panel .panel-footer {
  padding: 5px;
}

.panel-note .panel-body > .media {
  border: 1px solid #e3e6f3;
  padding: 0px;
}

.panel-note .panel-body .img-paper {
  width: 60px;
  height: 68px;
}

.panel-note .panel-body h4 {
    font-size: 14px;
    margin-bottom: 5px;
}

.view-list .subject > h5 {
  font-size: 14px;
  margin: 3px;
  font-weight: bold;
}

.view-list .panel-dark {
  background-color: #EFEFEF;
  border: none;
}

.wrapnote .taskbar {
  margin-bottom: 10px;
}

.wrapnote .taskbar .smry {
  padding: 7px 0;
  background-color: transparent;
  margin: 0px;
}

.taskbar .smry {
  float: left;
}

.taskbar .filter {
  float: right;
  padding: 5px;
}

.taskbar .ddlcate .btn-cate {
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.taskbar .smry > li {
  width: 33%;
  font-size: 14px;
}

.taskbar .smry > li > h5 {
  font-weight: bold;
  font-size: 21px;
}

.taskbar .smry > li i.fa-bug {
  color: #d9534f;
}

.taskbar .smry > li i.fa-life-ring {
  color: #337ab7;
}

.taskbar .smry > li i.fa-crop {
  color: #5cb85c;
}

#classroom .book-list > li {
  margin: 15px;
  font-size: 13px;
  cursor: pointer;
}

#classroom .book-list > li > .book {
  border: 1px solid #EFEFEF;
  padding: 10px;
  -moz-box-shadow: 3px 3px 0 rgba(12,12,12,0.05);
  -webkit-box-shadow: 3px 3px 0 rgba(12,12,12,0.05);
  box-shadow: 3px 3px 0 rgba(12,12,12,0.05);
}

#classroom .book-list .book .img-cover {
  width: 150px;
  height: 220px;
  border: 1px solid #F3F3F3;
}

#classroom .book-list .book h3.title {
  font-weight: bold;
  font-size: 13px;
  margin: 10px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}



#classroom .cmd-list > li {
  margin-right: 5px;
}

#classroom .cmd-list > li.search {
  width: 40%;
  min-width: 200px;
}

#classroom .btn-class-add {
  line-height: 1.5;
}

#classroom .class-list {
  margin: 10px 0;
}

#classroom .group-title {
  margin: 20px 0;
  line-height: 35px;
  border-bottom: 1px solid #ECF0F1;
}

#classroom .group-title h5 {
  display: inline-block;
  font-size: 14px;
  font-weight: bold;
  margin: 0px;
}

#classroom ul.classroom {
  height: 80px;
  overflow: hidden;
  padding: 0px;
  margin-right: 10px;
  border: 1px solid #e3e6f3;
  -moz-box-shadow: 3px 3px 0 rgba(12,12,12,0.05);
  -webkit-box-shadow: 3px 3px 0 rgba(12,12,12,0.05);
  box-shadow: 3px 3px 0 rgba(12,12,12,0.05);
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  border-radius: 2px;
}

#classroom ul.classroom > li {
  display: inline-block;
}

#classroom ul.classroom > li.head {
  width: 80px;
  height: 100%;
  margin: 0px;
  background-color: #EFEFEF;
}

#classroom ul.classroom > li.body {
  width: 170px;
}

#classroom ul.item {
  list-style: none;
  width: 250px;
  overflow: hidden;
  padding: 0px;
  margin-right: 10px;
  border: 1px solid #e3e6f3;
  -moz-box-shadow: 3px 3px 0 rgba(12,12,12,0.05);
  -webkit-box-shadow: 3px 3px 0 rgba(12,12,12,0.05);
  box-shadow: 3px 3px 0 rgba(12,12,12,0.05);
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  border-radius: 2px;
}

#classroom ul.item > li {
width: 100%;
}

#classroom ul.item > li.head {
  height: 200px;
  margin: 0;
  padding: 0;
  background-color: #EFEFEF;
}

#classroom ul.item > li.body {
  height: 80px;
}


#library .path i {
  margin: 0 10px;
}

#library .cmd-list  {
  border: 1px solid #e3e6f3;
  padding: 0 3px;
}

#library .cmd-list > li {
}

#library .cmd-list > li.path {
  margin-right: 10px;
  line-height: 55px;
}

#library .cmd-list > li .btn {
  padding: 6px 12px;
}

#library .content table > tbody > tr.sel {
  background-color: #16A085;
  color: #FFF;
}

#library .content table > tbody > tr.sel:hover {
  background-color: #1ABC9C;
}

#library .content table > tbody > tr:hover {
  background-color: #F0F0F0;
}

#library .content table > tbody > tr > td > span.draggable {
  cursor: pointer;
}



/********** 6. FORM STYLES **********/

.ckbox,
.rdio {
  position: relative;
}

.ckbox input[type="checkbox"],
.rdio input[type="radio"] {
  opacity: 0;
}

.ckbox label,
.rdio label {
  padding-left: 10px;
  cursor: pointer;
  margin-bottom: 7px !important;
}

.ckbox label:before {
  width: 18px;
  height: 18px;
  position: absolute;
  top: 1px;
  left: 0;
  content: '';
  display: inline-block;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  border-radius: 2px;
  border: 1px solid #bbb;
  background: #fff;
}

.ckbox input[type="checkbox"]:disabled + label  {
  color: #999;
}

.ckbox input[type="checkbox"]:disabled + label:before  {
  background-color: #eee;
}

.ckbox input[type="checkbox"]:checked + label::after  {
  font-family: 'FontAwesome';
  content: "\F00C";
  position: absolute;
  top: 0;
  left: 3.5px;
  display: inline-block;
  font-size: 11px;
  width: 16px;
  height: 16px;
  color: #fff;
}

.ckbox-default input[type="checkbox"]:checked + label:before {
  border-color: #999;
}

.ckbox-default input[type="checkbox"]:checked + label::after {
  color: #333;
}

.ckbox-primary input[type="checkbox"]:checked + label:before {
  border-color: #357EBD;
  background-color: #428BCA;
}

.ckbox-warning input[type="checkbox"]:checked + label:before {
  border-color: #EEA236;
  background-color: #F0AD4E;
}

.ckbox-success input[type="checkbox"]:checked + label:before {
  border-color: #1CAF9A;
  background-color: #1CAF9A;
}

.ckbox-danger input[type="checkbox"]:checked + label:before {
  border-color: #D43F3A;
  background-color: #D9534F;
}

.rdio label:before {
  width: 18px;
  height: 18px;
  position: absolute;
  top: 1px;
  left: 0;
  content: '';
  display: inline-block;
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
  border-radius: 50px;
  border: 1px solid #bbb;
  background: #fff;
}

.rdio input[type="radio"]:disabled + label  {
  color: #999;
}

.rdio input[type="radio"]:disabled + label:before  {
  background-color: #eee;
}

.rdio input[type="radio"]:checked + label::after  {
  content: '';
  position: absolute;
  top: 5px;
  left: 4px;
  display: inline-block;
  font-size: 11px;
  width: 10px;
  height: 10px;
  background-color: #444;
  -moz-border-radius: 50px;
  -webkit-border-radius: 50px;
  border-radius: 50px;
}

.rdio-default input[type="radio"]:checked + label:before {
  border-color: #999;
}

.rdio-primary input[type="radio"]:checked + label:before {
  border-color: #428BCA;
}

.rdio-primary input[type="radio"]:checked + label::after {
  background-color: #428BCA;
}

.rdio-warning input[type="radio"]:checked + label:before {
  border-color: #F0AD4E;
}

.rdio-warning input[type="radio"]:checked + label::after {
  background-color: #F0AD4E;
}

.rdio-success input[type="radio"]:checked + label:before {
  border-color: #1CAF9A;
}

.rdio-success input[type="radio"]:checked + label::after {
  background-color: #1CAF9A;
}

.rdio-danger input[type="radio"]:checked + label:before {
  border-color: #D9534F;
}

.rdio-danger input[type="radio"]:checked + label::after {
  background-color: #D9534F;
}



/********** 12. CUSTOM STYLES **********/
/***************************************/


.m10 { margin: 10px }
.mt0 { margin-top: 0 !important; }
.mt5 { margin-top: 5px !important; }
.mt10 { margin-top: 10px !important; }
.mt50 { margin-top: 50px; }
.mt100 { margin-top: 100px !important; }
.mt20 { margin-top: 20px !important; }
.mt25 { margin-top: 20px !important; }
.mt30 { margin-top: 30px !important; }
.mr10 { margin-right: 10px !important; }
.mr20 { margin-right: 20px !important; }
.ml2 { margin-left: 2px !important; }
.ml5 { margin-left: 5px !important; }
.ml10 { margin-left: 10px !important; }
.ml15 { margin-left: 15px !important; }
.mr5 { margin-right: 5px !important; }
.mr15 { margin-right: 15px !important; }
.mr20 { margin-right: 20px !important; }
.mr30 { margin-right: 30px !important; }
.mb0 { margin-bottom: 0px; }
.mb5 { margin-bottom: 5px; }
.mb8 { margin-bottom: 8px; }
.mb9 { margin-bottom: 9px; }
.mb10 { margin-bottom: 10px; }
.mb15 { margin-bottom: 15px; }
.mb20 { margin-bottom: 20px; }
.mb30 { margin-bottom: 30px; }
.nomargin { margin: 0; }
.no-m { margin: 0; }
.nopadding { padding: 0; }
.no-p { padding: 0 !important; }
.padding10 { padding: 10px; }
.p10 { padding: 10px }
.pt7 { padding-top: 7px; }
.pt10 { padding-top: 10px; }
.pb10 { padding-bottom: 10px; }
.pb15 { padding-bottom: 15px; }
.pr0 { padding-right: 0px !important; }
.pt1 { padding-top: 1px; }
.pr5 { padding-right: 5px; }
.pr10 { padding-right: 10px; }
.pl5 { padding-left: 5px; }
.pl0 { padding-left: 0px !important; }
.pl10 { padding-left: 10px; }
.pl15 { padding-left: 15px; }
.pl20 { padding-left: 20px; }
.padding15 { padding: 15px; }
.p5 { padding: 5px; }
.p15 { padding: 15px; }
.padding20 { padding: 20px; }
.noborder { border: 0; }
.no-b { border: 0; }
.height200 { height: 200px; }
.height300 { height: 300px; }
.width100p { width: 100%; }
.width300 { width: 300px; }
.w300 { width: 300px !important; }
.w200 { width: 200px !important; }
.w180 { width: 180px !important; }
.w150 { width: 150px !important; }
.w130 { width: 130px !important; }
.w100 { width: 100px !important; }
.w80 { width: 80px !important; }
.w50 { width: 50px !important; }
.w40 { width: 40px !important; }
.w20 { width: 20px !important; }
.w15 { width: 15px !important; }
.w30 { width: 30px !important; }
.w35 { width: 30px; }
.h35 { height: 35px; }
.mw90 { max-width: 90px; margin: 0 auto }
.vmiddle { vertical-align: middle !important; }
.tcenter { text-align: center; }
.tleft { text-align: left !important; }
.tright { text-align: right; }
.fleft { float: left }
.fright { float: right }
.iblk { display: inline-block }

.minha { min-height: auto !important }
.fs11 { font-size: 11px }
.fs12 { font-size: 12px }
.fs13 { font-size: 13px }
.fs15 { font-size: 15px }
.prelative { position: relative }
.zidx1 { z-index: 1 }
.lineh20 { line-height: 20px }
.lh40 { line-height: 40px }
.blkcenter { display: block; text-align: center }
.link { cursor: pointer };

.noround {
  -moz-border-radius: 0px !important;
  -webkit-border-radius: 0px !important;
  border-radius: 0px !important;
}

.text-black { color: #000; }

.inline-block { display: inline-block; }
.font12 { font-size: 12px }
.bordered { border: 1px solid #e3e6f3; }

.w20tc { width: 20px; text-align: center; }

/*
.bg-danger { background-color: #da3e16; color: #FFF; }
.bg-warning { background-color: #c39a14; color: #FFF; }
.bg-primary { background-color: #1582dc; color: #FFF; }
.bg-info { background-color: #15acdc; color: #FFF; }
.bg-success { background-color: #15db81; color: #FFF; }
*/
.bg-danger { background-color: #d9534f; color: #FFF; }
.bg-warning { background-color: #f0ad4e; color: #FFF; }
.bg-primary { background-color: #428bca; color: #FFF; }
.bg-info { background-color: #5bc0de !important; color: #FFF; }
.bg-success { background-color: #1caf9a; color: #FFF; }
.bg-default { background-color: #D8DCEE; color: #59595A; }
.bg-dark { background-color: #333; color: #FFF; }

.txt-danger { color: #d9534f !important; }
.txt-warning { color: #f0ad4e !important; }
.txt-primary { color: #428bca !important; }
.txt-info { color: #5bc0de !important; }
.txt-success { color: #1caf9a !important; }
.txt-default { color: #D8DCEE !important; }

.btn-action {
  background-color: #34cdcb;
  border-color: #06c0be;
  color: #fff;
}

.btn-action:hover,
.btn-action:active {
  background-color: #06c0be;
  border-color: #0bb0ae;
}

.btn-transparent { background-color: transparent; border: none }

.color-primary { color: #1582dc }

/********** 18. MEDIA QUERIES **********/

@media screen and (min-width: 1200px) {
  body .container {
    max-width: 1000px;
    width: auto;
  }
}

@media screen and (min-width: 1024px) {
  body .messagepanel .container .nav-tabs {
    display: none;
  }
}

@media screen and (max-width: 1024px) {

    body {
        position: relative;
    }

  body .container {
    max-width: 1000px;
    width: auto;
  }

    .overpanel .overbody {
      width: 100%;
    }

    .leftpanel {
      width: 0px;
    }

    .mainpanel {
        margin-left: 0;
        width: 100%;
    }

    .leftpanel-collapsed .leftpanel {
        display: none;
    }

    .leftpanel-collapsed .mainpanel {
        margin-left: 0;
    }

    .leftpanel-collapsed .headerbar {
        margin-left: 0;
    }

    .leftpanel-show section {
        overflow-x: hidden;
    }

    .leftpanel-show .leftpanel {
        display: block;
    }

    .leftpanel-show .mainpanel {
        margin-left: 240px;
    }

    .stickyheader .headerbar {
        left: 0;
    }

    .stickyheader.leftpanel-show .headerbar {
        left: 240px;
    }

    .stickyheader.chat-relative-view .headerbar {
        right: 240px;
        left: auto;
    }

    .stickyheader .header-right {
        margin-right: 0;
    }

    .btn-demo {
        margin-bottom: 20px;
    }

    .leftpanelinner {
        padding: 5px 10px;
    }

    .leftpanelinner .searchform input {
        background: #131b26;
        border: 0;
    }

    /* horizontal menu related */
    .nav-horizontal {
        position: relative;
    }

    .horizontal-menu .menutoggle {
        display: block;
    }

    .horizontal-menu .headerbar .logopanel {
        display: none;
    }

    .nav-horizontal .caret {
        display: none;
    }

    .horizontal-menu .header-left,
    .horizontal-menu .topnav {
        float: none;
    }

    .horizontal-menu-sidebar .header-left,
    .horizontal-menu-sidebar .topnav {
        float: none;
    }

    .fixed-noleft .menutoggle {
        display: block;
    }

    .fixed-noleft .headerbar .logopanel {
        display: none;
    }

    .fixed-noleft .header-left,
    .fixed-noleft .topnav {
        float: none;
    }

    .overpanel .panel-report .wrapcontent {
      max-width: 1000px;
    }

    body .overpanel .panel-report .wrapcontent {
      width: 100%;
    }
}

@media screen and (max-width: 980px) {
  .header-center {
    display: none;
  }

  body .container {
    max-width: 970px;
    width: auto;
  }

  body .messagepanel .container .sidebar {
    display: none;
  }

  .panel-paper .resultpanel .wrapcontent {
    margin: 0px -10px;
  }
}

@media screen and (max-width: 800px) {
  .signinpanel,
  .signuppanel {
      margin: 0 auto;
      width: 480px;
      padding: 20px;
  }


  body .panel-report table span.toflow {
    white-space: initial;
  }

  .storepanel .content .wrapcontent .smry {
    display: block !important;
  }

  .storepanel .content .intro .smry {
    display: none;
  }

}

@media screen and (max-width: 768px) {
  .signin-info .logopanel > h1 {
    margin: 0px;
  }

  body .container {
    max-width: 750px;
    width: auto;
  }

  body .container .sidebar {
    display:none;
  }

  .signin-info .desc {
    display: none;
  }

  .headerbar .mobileonly {
    display: inline-block;
  }

  .infoprofile > ul > li {
    float: left;
    width: 50%;
  }

  .infoprofile > ul > li.extraprofile {
    padding-left: 10px;
  }

  .infoprofile > ul > li.extraprofile .support-title,
  .infoprofile > ul > li.extraprofile .extlnk,
  .infoprofile > ul > li.myurl {
    display: none;
  }

  .userview .content-left,
  .userpanel.contentpanel .content-left {
    display: none;
  }

  .contentpanel .content-right .nav-tabs {
    text-align: center;
    padding-left: 120px;
  }

  .contentpanel .content-right .nav-tabs > li {
    display: inline-block;
    float: initial;
  }

  body .nav-tabs > li > a {
    padding: 10px 12px;
    font-size: 14px;
  }

  .contentpanel .bgHeader {
    height: 150px;
  }

  .contentpanel .contentheader {
    height: 140px;
  }

  .contentpanel .contentheader .img-profile {
    max-width: 100px;
    bottom: -30px;
  }

  .userpanel .contentheader .title {
    left: 130px;
    bottom: 5px;
  }

  .userpanel .contentheader .title .profile-name {
    font-size: 23px;
    line-height: 28px;
  }

  .userpanel .contentheader .title .alias {
    font-size: 14px;
  }

  .userpanel .contentheader .summary h2 {
    font-size: 23px;
    line-height: 23px;
  }

}

@media screen and (max-width: 767px) {
  body .panel-report .wrapcontent,
  body .panel-report .wrapcontent.v2 {
    width: 100%;
    padding: 0px;
  }

  body.body_login {
    background: none;
  }

  body.body_login .header {
    background: none;
    padding: 0 5px;
    border-bottom: 1px solid #eee;
  }

  body.body_login .header .page-title {
    color: #333;
  }

  body.body_login .header .logo {
    background: url(/common/images/logo_naenote.svg) no-repeat right center;
    left: auto;
    right: 0px;
    transform: translateX(0%);
    display: none;
  }

  .signinpanel form {
    border: none;
    margin: 0px;
    padding: 0px 10px;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
  }

  .wrapnote .searchbx {
    text-align: left;
  }


  .panel-report table tbody tr td {
    line-height: 22px;
  }

  .col-sm-hide {
    display: none;
  }

  .xmt10 {
    margin-top: 10px;
  }

  body .headermenu li.search.open .search-container {
    width: 200px;
  }

  .mod_home #home_friends .filter .btn span,
  .mod_home #home_friends .mnu .btn span {
    display: none;
  }

  .modal .form-horizontal .radio, .modal .form-horizontal .checkbox, .modal .form-horizontal .radio-inline, .modal .form-horizontal .checkbox-inline {
    padding-top: 0px;
  }

  .panel-report .userinfobx > .score {
    display: none;
  }

  .sidepanel .tab-content .btn-add {
    display: initial;
  }

  .panel-paper .pages .smrybrd {
    display: none;
  }

  .omron .omr {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: auto;
    min-height: 100%;
    padding: 0px 0px 0px;
    border: none;
  }

  .omron .omr .head {
    position: initial;
  }

  .omron .omr .wrap-omr {
    overflow: initial;
    height: auto;
  }

  .omron .omr div.row {
    margin-left: 0px;
    margin-right: 0px;
  }

  .omr .cmd {
    width: auto !important;
  }

  .modal .modal-header {
    padding: 10px;
  }

  .modal .form-search .form-group {
    margin-bottom: 0px;
  }

  .modal .form-search .form-group .col-xs-9 {
    margin-bottom: 10px;
  }

  .modal .form-search .control-label {
    color: #8f939e;
    font-size: 12px;
    word-break: break-all;
    overflow: hidden;
    white-space: nowrap;
  }

  .modal .form-search .input-sm {
    line-height: 19px;
  }

  .modal form .form-group {
    margin-left: 0px;
    margin-right: 0px;
    color: #555;
    font-size: 12px;
  }

  .modal form .control-label {
    /*color: #ccc; */
  }

  .modal form .form-control {
    /*font-size: 12px;*/
  }

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

  .modal form .checkbox-inline, 
  .modal form .radio-inline {
    line-height: 25px;
    /*color: #fff;*/
  }

  .storepanel .tab-content .voucher-list .col-xs-6 {
    padding-left: 5px;
    padding-right: 5px;
  }

  .storepanel .tab-content .voucher-list .col-xs-6 .voucher {
    margin-bottom: 10px;
  }

  .storepanel .tab-content .voucher-list .col-xs-6 .voucher > h2 {
    font-size: 15px;
  }
  
  .storepanel .tab-content .voucher-list .col-xs-6 .voucher > .info {
    height: 100px;
  }

  .storepanel .tab-content #institution .voucher-list .col-xs-6 .voucher > .info {
    height: 130px;
  }

  .storepanel .tab-content .voucher-list .col-xs-6 .voucher .price {
    font-size: 20px;
    line-height: 20px;
  }

  .storepanel .tab-content .voucher-list .col-xs-6 .voucher .desc {
    font-size: 13px;
  }

  .chart-page .widget .smry {
    margin-left: 0px;
    margin-right: 0px;
  }

  .chart-page .widget .smry .col-xs-6 {
    padding-left: 5px;
    padding-right: 5px;
  }

  .lesson-panel .lpanel {
    display: none;
  }

  .lesson-panel .cpanel {
    margin-left: 0px !important;
  }

  .panel-paper .gtable .row > div > label,
  .panel-paper .gtable .row > div > span {
    width: 100% !important;
  }

  .searchform {
      position: relative;
  }

  .mod_paper .row .historybx {
    display: none;
  }

  .panel-paper .resultpanel .infobx .btn-test {
    background-color: #eee;
    border-bottom: 1px solid #ddd;
  }


  .editcontent .nav-tabs {
    display: block !important;
  }

  .editcontent .questions .items {
    margin-left: -10px;
    margin-right: -10px;
  }

  .editcontent.tabon .frmResrc .questions {
    display: block;
  }

  .editcontent.tabon .frmResrc .property,
  .editcontent .frmResrc .questions, 
  .editcontent h4.subject {
    display: none;
  }


  .leftpanel .searchform,
  .leftpanel .userlogged {
      display: block;
  }

  .breadcrumb-wrapper {
      display: none;
  }

  .mod_library .path {
    display: none;
  }

  .headermenu .dropdown-menu:after {
      display: none;
  }

  .sidepanel .nav-tabs.nav-justified > li > a,
  .sidepanel .nav-justified > li > a {
      margin-bottom: 0;
  }

  .panel-email .col-sm-3 {
      display: none;
  }


  .mod_help .contentpanel > .header > .searchbox {
    width: 80% !important;
  }

  .storepanel .intro .cover {
    left: 10px !important;
    bottom: -40px !important;
    width: 120px !important;
  }

  .storepanel .intro .prop {
    left: 140px !important;
  }

  .storepanel .content .ctrls {
    padding: 10px 0px 10px 140px !important;
  }

  .lectures .lecture.box .bgLec {
    float: left;
    width: 100px;
    margin-right: 5px;
    margin-bottom: 0px;
  }

  .lectures .lecture.box .bgLec .pic,
  .lectures .lecture.box .bgLec .img-circle {
    width: 40px;
    height: 40px;
    bottom: 5px;
    left: 5px;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    overflow: hidden;
    font-size: 9px;
  }

  body .lectures .lecture.box .smry {
    position: static;
  }

  .lectures .lecture.box .rate,
  .lectures .lecture.box .bgLec .ucnt {
    display: none;
  }

  body .lectures .lecture.box .cate {
    text-align: inherit;
    position: static;
  }

  body .lectures .lecture.box .bgLec {
    height: 70px;
  }

  .mod_setting.menuon .contentpanel .content,
  .mod_setting .contentpanel .menu {
    display: none;
  }

  .mod_setting.menuon .contentpanel .menu {
    display: block;
  }

  body .mod_help .contentpanel .body .container > h1 {
    font-size: 20px;
    margin-bottom: 10px;
  }

  body .mod_help .contentpanel .body .container > ul {
    -webkit-column-count: 1;
    column-count: 1;
  }

  body .mod_help .contentpanel .body .container > ul > li > div {
    border: none;
    border-bottom: 1px solid #d6dde1;
    -moz-border-radius: 0px;
    -webkit-border-radius: 0px;
    border-radius: 0px;
    padding: 5px;
    height: auto;
    text-align: left;
    cursor: pointer;
    line-height: 40px;
  }

  body .mod_help .contentpanel .body .container > ul > li > div:hover {
    background-color: #F5F5F5;
  }

  body .mod_help .contentpanel .body .container > ul > li > div > i {
    display: inline-block;
    font-size: 15px;
    width: 30px;
    margin: 0px;
    height: auto;
    line-height: 15px;
  }

  body .mod_help .contentpanel .body .container > ul > li > div > h5 {
    display: inline-block;
    font-size: 15px;
    padding: 0px;
  }

  body .mod_help .contentpanel .body .container > ul > li > div > p {
    display: none;
  }
}

@media screen and (max-width: 640px) {
  .mhide {
    display: none;
  }

  body .mshow {
    display: block;
  }

  body .storepanel .prodinfo > .info .title {
    margin: 7px 0px;
    font-size: 15px;
  }

  body .frmMove .buddies {
    height: 300px;
  }

  body .frmMove .group {
    width: 100%;
    display: inherit;
    height: auto;
  }

  body .frmMove .src {
    width: 100%;
    display: inherit;
    height: auto;
    margin-bottom: 10px;
  }

  body .frmMove .ctrlbar {
    width: 100%;
    margin: 10px 0px 0px;
    padding: 5px 0px;
    position: inherit;
  }

  body .frmMove .ctrlbar > a {
    display: inline-block;
    margin: 3px 5px;
  }

  body .frmMove .ctrlbar a.btn-left i::before {
    content: '\f077';
  }

  body .frmMove .ctrlbar a.btn-right i::before {
    content: '\f078';
  }

  #popup-tpl .list-filter {
    font-size: 12px;
    margin: 0px 0px 5px !important;
    text-align: center;
    white-space: nowrap;
  }

  #popup-tpl .list-filter > li {
    margin: 0px;
  }

  #popup-tpl #tpl-view {
    padding: 5px 0px !important;
  }

  #popup-tpl #tpl-view .carousel-control {
    display: none;
  }

  #popup-assign .nav-tabs {
    float: none !important;
  }

  #popup-assign .nav-tabs > li {
    float: left !important;
  }

  #popup-assign .modal-body {
    min-height: auto;
  }

  .userpanel .contentheader .summary {
    display: none;
  }

  .userpanel .contentheader .img-profile {
    max-width: 80px;
    left: 5px;
    bottom: 10px;
    padding: 3px;
  }

  .userpanel .contentheader .title {
    left: 90px;
    bottom: 20px;
  }

  .userpanel .contentheader .title .alias {
    font-size: 14px;
  }

  .userpanel .contentheader .title .profile-name {
    font-size: 19px;
    line-height: 25px;
  }

  .userpanel .contentpanel .content-right .nav-tabs {
    padding-left: 0px;
    white-space: nowrap;
  }

  .contentpanel .content-right .nav-tabs {
    padding-left: 0px;
  }

  body .nav-tabs > li > a {
      text-align: center;
      padding: 10px 15px;
      font-size: 13px;
    }

    .panelc2 > .preview  {
      display: none;
    }

    .modal-dialog {
      width: 100% !important;
      margin: 0px;
      padding: 10px;
    }

    .modal-dialog .modal-body {
      overflow-y: auto;
      overflow-x: hidden;
      min-height: initial !important;
    }

    .modal-dialog .modal-footer {
      padding: 5px 10px;
    }

    /*
    .circle-btn {
      z-index: 10;
      -moz-border-radius: 50%;
      -webkit-border-radius: 50%;
      background-color: #F0AD4E !important;
      border-color: #EEA236 !important;
      border-radius: 50%;
      display: inline-block;
      line-height: 40px !important;
      width: 40px !important;
      height: 40px !important;
      color: #fff !important;
      font-weight: normal;
      font-size: 18px !important;
      text-align: center;
      cursor: pointer !important;
      padding: 0px !important;
      margin: 0px !important;
      -moz-box-shadow: 3px 0 5px rgba(12,12,12,0.5) !important;
      -webkit-box-shadow: 3px 0 5px rgba(12,12,12,0.5) !important;
      box-shadow: 2px 2px 5px rgba(12,12,12,0.5) !important;
      position: fixed !important;
      bottom: 80px;
      right: 15px;
    }
    
    .circle-btn > div {
      line-height: 13px;
    }

    .circle-btn .label {
      display: none !important;
    }
    */

    .headerbar .extmenu {
      display: none;
    }

    .headerbar .optmenu {
      display: initial;
    }

    .mod_home .extraprofile .md-title {
      display: none;
    }

    .mod_home .extraprofile .box {
      margin-bottom: 10px !important;
    }

    .mod_home .infoprofile .myurl {
      padding-left: 10px;
    }


    .bgLecHeader {
      height: 100px !important;
    }

    .lecPanel > .lecHeader {
      height: 90px;
    }

    .lecPanel > .lecHeader > img.logo {
      display: none;
    }

    .lecPanel > .lecHeader > h2.title {
      left: 5px;
      font-size: 25px;
      margin-bottom: 0px;
    }

    .lecPanel > .lecHeader > .setting {
      right: 0px;
      bottom: 15px;
    }

    .lecPanel > .lecHeader > .setting > i {
      margin: 0px !important;
    }

    .lecPanel > .lecHeader > .setting > span {
      display: none;
    }

    .lecPanel > .mnuLec {
      margin: 0px auto 10px;
    }

    .lecPanel > .mnuLec > li.mnu > a {
      padding: 10px 20px;
    }

    .lecPanel .lecContent > .panelL {
      display: none;
    }

    .lecPanel .lecContent > .panelR {
      padding-left: 0px;
    }

    .notfoundpanel {
        width: auto;
        padding: 0 20px;
    }

    .notfoundpanel h1 {
        font-size: 72px;
        line-height: 72px;
    }

    .notfoundpanel h3 {
        font-size: 14px;
        line-height: normal;
    }

    .notfound h4 {
        font-size: 12px;
        line-height: 18px;
    }

    .notfoundpanel form {
        width: auto;
    }

    .notfoundpanel .form-control {
        float: none;
        width: 100%;
    }

    .notfoundpanel .btn {
        margin-top: 10px;
        width: 100%;
    }

    .signinpanel,
    .signuppanel {
        margin: 0 auto;
        width: 480px;
        padding: 20px;
    }

    .signinpanel form {
        margin-top: 20px;
    }

    .signup-footer {
        margin-bottom: 10px;
    }

    .signuppanel .form-control {
        margin-bottom: 10px;
    }

    .signup-footer .pull-left,
    .signup-footer .pull-right {
        float: none !important;
        text-align: center;
    }

    .widget-quick-status-post .nav-tabs.nav-justified > li {
        display: table-cell;
        width: 1%;
        margin-bottom: -5px;
    }

    .widget-quick-status-post .nav-tabs.nav-justified > li a {
        margin: 0;
    }

    .nav-tabs.nav-justified.nav-profile > li {
        float: none;
        margin-bottom: 0;
        display: table-cell;
        width: 1%;
    }

    .nav-tabs.nav-justified.nav-profile > li a {
        margin: 0;
        -moz-border-radius: 3px 3px 0 0;
        -webkit-border-radius: 3px 3px 0 0;
        border-radius: 3px 3px 0 0;

    }

    .dataTables_info {
        float: none !important;
        text-align: center;
        margin-bottom: 10px;
    }

    .dataTables_paginate {
        margin-bottom: 10px;
        text-align: center !important;
        float: none !important;
    }

    .paginate_disabled_previous,
    .paginate_enabled_previous,
    .paginate_disabled_next,
    .paginate_enabled_next {
        float: none !important;
    }

    .dataTables_filter,
    .dataTables_length {
        float: none !important;
        padding: 10px 0 0 10px;
        margin: auto !important;
        display: inline-block;
    }

    .table.dataTable th,
    .table.dataTable td {
        font-size: 13px;
        min-width: 150px;
    }

    .paging_full_numbers {
        min-width: 500px;
        margin: 0 0 10px 10px;
    }

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

    .notepanel .taskbar .smry span {
      display: none;
    }

    body .wrapsch > .input-group {
      display: table;
      width: auto;
      margin-bottom: 5px;
    }
}

@media screen and (max-width: 480px) {

    .signinpanel,
    .signuppanel {
      width: 320px;
    }

    .signinpanel .footer {
      display: none;
    }

    body .wizardpanel .bxTpl {
      padding: 0px;
    }

    body .wizardpanel .form-inline input {
      display: inline-block;
    }

    body .wizardpanel .form-inline input.w100 {
      width: 80px !important;
    }

    .widget .smry .box i {
      display: none;
    }

    body .nav-tabs.maintabs {
      z-index: 99; 
      position: fixed; 
      top: 50px;
      left: 0; 
      width: 100%;
      text-align: center;
      background-color: rgba(255, 255, 255, 0.9);
      border-radius: 0px;
      -moz-box-shadow: 0 3px 0 rgba(0,0,0,0.1);
      -webkit-box-shadow: 0 3px 0 rgba(0,0,0,0.1);
      box-shadow: 0 3px 0 rgba(0,0,0,0.1);
      white-space: nowrap;
      overflow-x: auto;
    }

    body .nav-tabs.maintabs > li {
      float: initial;
      display: inline-block;
    }


    .headerbar .header-right li > .btn {
      padding: 13px 5px;
    }

    .headermenu .btn-menu {
      padding: 13px 7px;
    }

    .mnu-expand-right .headerbar,
    .mnu-expand .headerbar {
      /*min-width: 480px !important;*/
    }

    body.mnu-expand .mainpanel2 .headerbar .header-left {
      margin-left: 0px;
      left: 280px;
    }

    .mnu-expand .mainpanel2 .headerbar .header-left {
      /*margin-left: 0px !important;*/
    }

    .mnu-expand-right .headerbar {
      /*right: 300px;*/
    }

    .mnu-expand-right .mainpanel2 .headerbar .header-right {
      margin-right: 0px !important;
    }

    body .nav-tabs > li > a {
      text-align: center;
      padding: 10px 15px;
    }

    .messageview .headerbar,
    .schoolview .headerbar,
    .userview .headerbar,
    .homeview .headerbar,
    .lectureview .headerbar {
      -moz-box-shadow: none;
      -webkit-box-shadow: none;
      box-shadow: none;
    }

    body .messageview .contentpanel,
    body .userview .contentpanel,
    body .lectureview .contentpanel,
    body .homeview .contentpanel {
      margin-top: 40px;
    }

    .etests .test {
      height: auto !important;
    }

    .etests .test .thumb {
      float: none !important;
      width: auto !important;
    }

    .etests .test .thumb > .time {
      top: 5px;
      bottom: initial;
    }

    .etests .test .info {
      position: relative;
      overflow: initial !important;
      padding: 0px !important;
      margin: 2px;
    }

    .etests .test .wrapinfo {
      position: absolute;
      width: 100%;
      bottom: 3px;
      left: 0px;
      background-color: #000;
      color: #fff;
      opacity: 0.7;
      padding: 3px;
      font-size: 11px !important;
      text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
    }

    .etests .test .info .title {
      padding: 3px 0px !important;
      font-size: 11px !important;
    }

    .etests .test .info .period,
    .etests .test .info .graph,
    .etests .test .info .result .comments {
      display: none;
    }

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

    .pageheader h2 {
        font-size: 18px;
    }

    .pageheader .glyphicon,
    .pageheader .fa {
        font-size: 18px;
    }

    .pageheader h2 span {
        font-size: 11px;
    }

    .fc-header td {
        display: block !important;
        text-align: center;
        width: 100%;
        border: 1px solid #eee;
        padding: 10px !important;
        margin-top: -1px;
    }

    .fc-button {
        padding: 2px 5px !important;
        margin: 0 !important;
    }

    .fc-header-title h2 {
        margin: 0 !important;
    }

    .filemanager-options li {
        padding: 5px 7px;
    }

    .filemanager-options .filter-type {
        display: block;
        float: none;
        border-top: 1px solid #eee;
    }

    .comment-list .media-object {
        width: 30px;
        padding: 2px;
    }

    .comment-list .media > .pull-left {
        margin: 0;
    }

    .comment-list h4 {
        font-size: 13px;
    }

    .comment-list .reply {
        font-size: 10px;
        padding: 2px 5px;
    }

    .comment-list .media-body {
        font-size: 12px;
        line-height: 18px;
    }

    .blog-content form {
        margin-bottom: 20px;
    }

    .letter-list {
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
        box-shadow: none;
    }

    .letter-list::after {
        clear: both;
        display: block;
        content: '';
    }

    .letter-list li {
        float: left;
        width: auto;
        display: inline-block;
    }

    .letter-list li a {
        display: block;
        padding: 2px 5px;
    }

    .btn-invoice:before {
        display: block;
        content: '';
        clear: both;
    }

    .btn-invoice .btn {
        display: block;
        width: 100%;
        margin-top: 10px;
    }

    .nav-tabs.nav-justified.nav-profile > li a {
        font-size: 13px;
        padding: 14px 10px;
    }

    #bloglist > div {
        padding: 0;
        margin: 0;
        float: none;
        width: auto;
    }


    .infoprofile > ul > li {
      display: none;
    }

    .storepanel .intro .cover {
      display: none;
    }

    .storepanel .intro .prop {
      left: 0px !important;
    }


    .storepanel .content .ctrls {
      padding: 10px 0 !important;
    }

    body .panel-report .gtable .row > div > label {
      width: 100%;
    }

    body .btn-toolbar .btn {
      padding: 5px 13px;
    }

  .wrapnote .searchbx .date,
  .wrapnote .searchbx .keyword {
    width: 100%;
  }
}

@media screen and (max-width: 360px) {
    body .lesson-panel .smry {
      font-size: 12px;
    }

    body.body_login .bxCSPanel {
      padding: 0px 20px;
      width: 320px;
    }

    .pageheader h2 span {
        display: none;
    }


    .modal {
      bottom: initial;
      height: 100%;
    }

    /*
    .modal-dialog {
      width: 300px !important;
    }
    */

    .editcontent .questions .items > li select.think {
      width: 100%;
      margin-bottom: 5px;
    }

    .blog-title {
        font-size: 14px;
        line-height: 18px;
    }

    .blog-summary {
        font-size: 12px;
        line-height: 18px;
    }

    .blog-summary .btn {
        padding: 2px 5px;
        display: block;
        width: 100%;
    }

    .mod_home .tab-pane .panelbar .mnu .btn-group-new {
      display: none;
    }

    body.body_home .tab-pane .panelbar .mnu .btn-group-mobile-new {
      display: inline-block;
    }

    .mod_home .tab-pane .panelbar .mnu .btn-new {
      -moz-border-radius: 50%;
      -webkit-border-radius: 50%;
      background-color: #F0AD4E;
      border-color: #EEA236;
      border-radius: 50%;
      display: inline-block;
      line-height: 40px;
      width: 40px;
      height: 40px;
      color: #fff;
      font-weight: normal;
      font-size: 18px;
      text-align: center;
      cursor: pointer;
      padding: 0px;
      -moz-box-shadow: 3px 0 5px rgba(12,12,12,0.5);
      -webkit-box-shadow: 3px 0 5px rgba(12,12,12,0.5);
      box-shadow: 2px 2px 5px rgba(12,12,12,0.5);
      position: fixed;
      bottom: 15px;
      right: 15px;
    }


    .mod_home .tab-pane .panelbar .mnu .btn-new > span {
      display: none;
    }

    .mod_admin .content-body > li {
      width: 49%;
    }


    body .nav-tabs > li > a {
      text-align: center;
      padding: 10px 5px;
      font-size: 13px;
    }

    body .nav-tabs > li > a > i {
      display: none;
    }

    .headermenu li:first-child .dropdown-menu {
        /*margin-right: -130px; */
    }

    .headermenu li:nth-child(2) .dropdown-menu {
        /*margin-right: -85px;*/
    }

    .headermenu li:nth-child(3) .dropdown-menu {
        /*margin-right: -37px;*/
    }

    .nav-tabs.nav-justified.nav-profile > li {
        float: none;
        display: block;
        width: auto;
    }

    .blog-media .media-body {
        overflow: visible;
    }

    .follower-list .btn {
        display: block;
        margin: 0 0 5px 0;
        width: 100%;
    }

    .filemanager-options li {
        display: block;
        border-top: 1px solid #eee;
    }

    .filemanager-options li:first-child {
        border-top: 0;
    }

    .authorpanel .media-object {
        width: 80px;
        margin-right: 10px;
    }

    .people-item .media-object {
        width: 80px !important;
        height: 80px !important;
    }

    .pagination {
        margin-bottom: 20px;
    }

    .storepanel .bar .title span {
    }

    .storepanel .bar .view-options .btn i {
      margin: 0px !important;
    }

    .storepanel .bar .view-options .btn span {
      display: none;
    }

    .storepanel .item-list > .col-xs-6 {
      width: 100% !important;
    }

    .mod_school .headerbar .header-right li > .btn-new {
      -moz-border-radius: 50%;
      -webkit-border-radius: 50%;
      background-color: #F0AD4E;
      border-color: #EEA236;
      border-radius: 50%;
      display: inline-block;
      line-height: 40px;
      width: 40px;
      height: 40px;
      color: #fff;
      font-weight: normal;
      font-size: 18px;
      text-align: center;
      cursor: pointer;
      padding: 0px;
      -moz-box-shadow: 3px 0 5px rgba(12,12,12,0.5);
      -webkit-box-shadow: 3px 0 5px rgba(12,12,12,0.5);
      box-shadow: 2px 2px 5px rgba(12,12,12,0.5);
      position: fixed;
      bottom: 15px;
      right: 15px;
    }

}

@media screen and (max-width: 320px) {


    body .pages > .score {
      top: 10px;
      right: 20px;
      width: 50px;
      font-size: 30px;
    }

    /*
    .modal-dialog {
      width: 280px;
    }
    */

    .col-xs-hide {
      display: none !important;
    }

    body .panel-report .userinfobx .thumb {
      margin: 0px 0px 0px 5px;
      width: 80px;
    }

    body .panel-report .userinfobx > .info {
      margin-left: 90px;
    }
}


/*************** school css ************/

.mod_school .mainpanel2 .contentpanel .wrapcontent {
  max-width: 1000px;
  margin: 0 auto;
}

.mod_school .mainpanel2 .nav-tabs li > a {
  padding: 10px 15px;
}

.filterbar {
  position: relative;
  padding: 5px;
  line-height: 30px;
  border-bottom: 1px solid #ddd;
}

.filterbar .btn-group {
  margin-bottom: 0px;
}

.filterbar .wrapsearch {
  float: left;
  width: 50%;
}

.filterbar .filter {
  float: right;
}

.filterbar .smry {
  float: left;
}

.mod_school .items {
  padding: 10px 0px;
}

.mod_school .items .box {
  padding: 10px;
  margin-bottom: 10px;
  min-height: auto;
  cursor: pointer;
  position: relative;
}

.mod_school .items .box:hover {
  border: 1px solid #ccc;
}

.mod_school .items .box:hover input[type="checkbox"],
.mod_school .items .box:hover .option {
  display: inline-block;
}

.mod_school .items .box.sel:hover,
.mod_school .items .box.sel {
  background-color: #F0F0F0;
} 

.mod_school .items .box.sel input[type="checkbox"] { 
  display: inline-block;
} 

.mod_school .items .box .option {
  display: none;
}

.box.course {
  width: 100%;
  height: auto;
}

.lectures .box.course > .thumb {
  float: left;
  width: 80px;
  height: 70px;
  position: relative;
  background-color: #ababab;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

.lectures .box.course > .thumb > i {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
}

.lectures .box.course > .thumb .pic {
  width: 100%;
  height: 100%;
}

.lectures .box.course > .info {
  list-style: none;
  margin: 0px 0px 0px 85px;
  padding: 0px;
  font-size: 12px;
  border: none;
  position: relative;
}

.lectures .box.course > .info .cate {
  top: auto;
}

.box.course > .thumb > .bg {
  width: 100%;
  height: 100%;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
}

.box.course > .info .title {
  font-size: 14px;
  margin: 5px 0px;
  font-weight: 600;
}

.box.course > .info .rate > .desc {
  margin-top: 5px;
}

.box.course > .info .rate > .desc > span {
  margin-right: 2px;
  color: #000;
}

.box.course > .info .rdate {
  font-size: 11px;
  margin-top: 2px;
}

.widget .option,
.box .option {
  position: absolute;
  top: 0px;
  right: 5px;
  display: none;
}

.box .checkbox {
  position: absolute;
  top: 0px;
  left: 5px;
  display: none;
  z-index: 3;
}

.box.sel .option,
.box.sel .checkbox,
.box:hover .option,
.box:hover .checkbox {
  display: inline-block;
}

.box .option > span[data-role="remove"] {
  font-size: 25px;
}

.widget .option .btn,
.box .option .btn {
  color: #fff;
  background-color: transparent;
  padding: 3px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.mod_school .buddy > .thumb {
  float: left;
  position: relative;
  margin-right: 5px;
}

.mod_school .buddy .thumb > img {
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  width: 45px;
}

.mod_school .buddy > .thumb > .status {
  position: absolute;
  width: 12px;
  height: 12px;
  top: 2px;
  right: 2px;
  border: 2px solid #FFF;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  background-color: #ddd;
}

.mod_school .buddy {
  font-size: 12px;
}

.mod_school .buddy > .info h5 {
  margin: 5px 0px;
  color: #000;
}

.mod_school .buddy > .info h5 .name {
  font-size: 14px;
  font-weight: 600;
}

.mod_school .buddy > .info .organ {
  color: #777;
}


/*************** home2 css ************/

.mod_home .extraprofile .box {
  margin-bottom: 20px;
}

.mod_home .wrapcontent {
  max-width: 1280px;
  margin: 0 auto;
}

.mod_home .widget table .score {
  font-size: 15px;
  font-weight: 600;
}

.mod_home .widget table .score > span {
  margin-left: 3px;
  font-size: 11px;
  font-weight: normal;
}

.mod_home .widget table .score > span i {
  margin-right: 3px;
}

.mod_home .widget table .score > span.plus {
  color: #d9534f;
}

.mainpanel2 {
  padding-top: 60px;
  -webkit-transition: width 300ms;
  -moz-transition: width 300ms;
  -o-transition: width 300ms;
  transition: width 300ms;
}


.mainpanel2 .contentpanel {
  background-color: #FFF;
  padding: 10px;
  margin: 0px 10px 10px 10px;
}

.programview .mainpanel2 .contentpanel {
  position: relative;
}

.programview .mainpanel2 .contentpanel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 200px;
  /*background-color: rgb(140, 109, 98);*/
}

.headerbar {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 100;
  -moz-box-shadow: 0 3px 5px rgba(12,12,12,0.05);
  -webkit-box-shadow: 0 3px 5px rgba(12,12,12,0.05);
  box-shadow: 0 3px 5px rgba(0,0,0,0.5);
  opacity: 0.98;
  line-height: 3.2em;
}

.hasmnu .headerbar {
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.mainpanel2.hasmnu .contentpanel {
  margin: 40px 10px 10px 10px;
}

.headerbar .header-right .dropdown-menu {
  right: 0;
  left: auto;
}

.headerbar .btn:hover, .headerbar .btn:focus {
  color: #F0F0F0;
  background: #1377c9;
}

.headerbar .header-left {
  float: left;
  white-space: nowrap;
}

.headerbar .btn-paste {
  position: relative;
}

.headerbar .btn-paste .badge {
  position: absolute;
  font-size: 10px;
  font-weight: normal;
  right: 2px;
  top: 5px;
  line-height: 13px;
  background-color: #D9534F;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  border-radius: 2px;
  padding: 2px 5px;
}

.page-title {
  display: inline-block;
  font-size: 15px;
  font-weight: bold;
  line-height: 50px;
  padding: 0px 5px;
  margin-left: -5px;
  vertical-align: middle;
  color: #FFF;
  white-space: nowrap;
}

a.page-title:hover, 
a.page-title:focus {
  text-decoration: none;
  background: #1377c9;
  color: #F0F0F0;
}

.selheader .page-title {
  padding-left: 10px;
}

.mnutoggle {
  padding: 10px;
}

/*
.mnutoggle {
  display: inline-block;
  width: 50px;
  cursor: pointer;
  color: #FFF;
  text-align: center;
  -moz-transition: all 0.2s ease-out 0s;
  -webkit-transition: all 0.2s ease-out 0s;
  transition: all 0.2s ease-out 0s;
}

.mnutoggle:hover {
  color: #F0F0F0;
  background: #1377c9;
}

.mnuback {
  cursor: pointer;
  padding: 0 5px;
}

.mnuback:hover {
  color: #F0F0F0;
  background: #1377c9;
  text-decoration: none;
}
*/
.modal-header .modal-title {
  display: inline-block;
}

.modal-header .mnuback {
  cursor: pointer;
  text-decoration: none;
}

.modal-header .mnuback:active,
.modal-header .mnuback:hover {
  text-decoration: none;
}

.modal-header .close {
  font-size: 30px;
  margin-top: 0px !important;
  line-height: 0.8em;
}

.mainpanel2 .headerbar .header-right {
  position: absolute;
  top: 0px;
  right: 0px;
  z-index: 1;
  background-color: #1582dc;
}

.mainpanel2 .headerbar a.btn {
  color: #FFF;
  padding-bottom: 10px;
}

.mainpanel2 .headerbar .header-right .btn-group {
  margin-bottom: 0px;
}

.stickyheader .leftpanel {
  display: block;
}


.sidepanel {
  background-color: #1d2939;
  display: none;
}

.mnu-expand section {
  overflow-x: hidden;
}

.mnu-expand .leftpanel {
  width: 280px;
  display: block;
  position: fixed;
}

.mnu-expand .mainpanel2 {
}

.mnu-expand .mainpanel2 .headerbar .header-left {
  /*margin-left: 280px;*/
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -o-transition: 0.3ms;
  transition: 0.3s;
}

.mnu-expand-right .sidepanel {
  height: 100%;
  display: block;
  overflow-y: scroll;
  position: fixed;
  -webkit-overflow-scrolling: touch;
}

.mnu-expand-right .mainpanel2 {
}

.mnu-expand-right .mainpanel2 .headerbar .header-right {
  /*margin-right: 300px;*/
}

.panel-book .leftpanel {
  background-color: #1d1f26;
}


.leftpanel .profile {
  padding: 10px;
  background: url(/skins/default/images/menubak.jpg) left top no-repeat;
  background-size: 100% auto;
  color: #FFF;
}

.leftpanel .profile > img {
  width: 100px;
}

.leftpanel .profile > .info {
  display: block;
  position: relative;
}

.leftpanel .profile > .info > h5 {
  margin: 10px 0 5px;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}

.leftpanel .profile > .info > .btn-group {
  position: absolute;
  top: 0px;
  right: 0px;
  margin: 0px;
}

.leftpanel .profile > .info > .btn-group .dropdown-toggle {
  background-color: transparent;
  padding: 3px 8px;
  border: none;
  color: #fff;
  line-height: 13px;
}

.leftpanel .profile > .info > label {
  color: #FFF;
  font-weight: 300;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}

.leftpanel .menu {
  list-style: none;
  margin: 0;
  padding: 10px 0;
}

.leftpanel .menu li {
}

.leftpanel .menu li.active {
  background-color: #3f485a;
}

.leftpanel .menu li a {
  color: #b2b7c3;
  display: block;
  padding: 10px 15px;
  width: 100%;
  position: relative;
}

.leftpanel .menu li a:hover {
  text-decoration: none;
  color: #FFF;
}

.leftpanel .menu li a i {
  min-width: 30px;
  padding-right: 5px;
  line-height: 20px;
}

.leftpanel .menu li a i.dir-right {
  position: absolute;
  right: 0px;
}

.leftpanel .menu li a i.mnu-expand.expand::before {
  content: "\f107";
}

.leftpanel .menu .smenu {
  list-style: none;
  padding: 0px;
  margin: 0px;
}

.leftpanel .menu .smenu li {
  padding-left: 25px;
}

.panelbar .ddlcate .btn-cate {
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.contentpanel .panelbar {
  position: relative;
  background-color: #F5F5F5;
  padding: 5px;
}

.contentpanel .panelbar .mnu {
}


.contentpanel .panelbar .mnu .btn-group {
  margin-bottom: 0px;
}

.contentpanel .panelbar .mnu .dropdown-menu li i {
  width: 15px;
  margin-right: 10px;
  text-align: center;
}

.mod_home .tab-pane .panelbar .mnu .btn-group-mobile-new {
  position: fixed;
  bottom: 15px;
  right: 15px;
  display: none;
  z-index: 1;
}

.mod_home .tab-pane .panelbar .mnu .btn-group-mobile-new .btn {
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  background-color: #F0AD4E;
  border-color: #EEA236;
  border-radius: 50%;
  line-height: 40px;
  width: 40px;
  height: 40px;
  color: #fff;
  font-weight: normal;
  font-size: 18px;
  text-align: center;
  cursor: pointer;
  padding: 0px;
  -moz-box-shadow: 3px 0 5px rgba(12,12,12,0.5);
  -webkit-box-shadow: 3px 0 5px rgba(12,12,12,0.5);
  box-shadow: 2px 2px 5px rgba(12,12,12,0.5);
}

.picbx {
  background-color: rgba(0, 0, 0, 0.3);
  min-height: 110px;
  cursor: pointer;
  font-size: 0px;
  line-height: 0;
  position: relative;
  -moz-user-select: none;
  direction: ltr !important;
}

#popup-user .modal-body .picbx {
  background-color: #F5F5F5;
}

.picbx .label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin-top: 0px;
  color: #777;
}

.form-group .required::before {
  content: '*';
}

.form-group .required {
  color: #db5b1e;
}

.modal .form-group .desc {
  margin-top: 5px;
  font-size: 12px;
  line-height: 20px;
  color: #22A7F0;
}

.modal .form-group .bgsort {
  background-color: #F5F5F5;
  padding: 0px 10px 10px;
}

.tab-pane.initial .panelbar .mnu .btn-new {
  display: none;
}

.contentpanel .panelbar .mnu > .initials > span {
  display: inline-block;
  padding-right: 8px;
  font-size: 15px;
  font-weight: 500;
}

.contentpanel .panelbar .mnu > .initials > span + span::before {
  content: '|';
  font-family: FontAwesome;
  color: #ccc;
  padding-right: 8px;
}

.contentpanel .panelbar .filter {
  float: right;
}
  
.contentpanel .panelbar .filter .btn-group {
  margin-bottom: 0px;
} 

/*
.contentpanel .panelbar .filter .btn-group .btn-white {
  background: #F7F7F7 none repeat scroll 0% 0%;
}

.contentpanel .panelbar .filter .btn-group .btn-white:active,
.contentpanel .panelbar .filter .btn-group .btn-white:hover,
.contentpanel .panelbar .filter .btn-group .btn-white.active {
  background: #FFF none repeat scroll 0% 0%;
}
*/

.contentpanel .filterbx .btn-group .btn-white {
  background: #F7F7F7 none repeat scroll 0% 0%;
}

.contentpanel .filterbx .btn-group .btn-white:active,
.contentpanel .filterbx .btn-group .btn-white:hover,
.contentpanel .filterbx .btn-group .btn-white.active {
  background: #FFF none repeat scroll 0% 0%;
}

.panelcontent .category {
  font-size: 14px;
  font-weight: bold;
  padding: 5px 5px 0px 5px;
  margin-bottom: 5px;
  border-bottom: 1px solid #eee;
  cursor: pointer;
  position: relative;
}

.panelcontent .category.expand {
  background-color: #f9f9f9;
}

.panelcontent .category:hover {
  background-color: #F5F5F5;
}

.panelcontent .category .badge {
  font-size: 10px;
  font-weight: normal;
  padding: 2px 5px;
  margin-bottom: 3px;
  line-height: 12px;
  background-color: #1CAF9A;
}

.panelcontent .category.share .badge {
  background-color: #D9534F;
}

.panelcontent .category.default .badge {
  background-color: #428bca;
}

.panelcontent .category > .control {
  display: inline-block;
}

.panelcontent .category > .control > a {
  text-decoration: none;
}

.panelcontent .category > .control .dropdown-menu i {
  width: 10px;
  text-align: center;
}

.panelcontent .category > .control .dropdown-menu > li.master {
  display: none;
}

.panelcontent .category > .control .dropdown-menu.master-menu > li.master {
  display: inherit;
}

.panelcontent .category > .control .dropdown-menu.lock-menu > li.lock {
  display: none;
}

.panelcontent .category > i.icoex {
  font-size: 16px;
  font-weight: normal;
  color: #333;
  position: absolute;
  right: 10px;
  padding: 2px 5px;
}

#home_friends .panelcontent .category.expand i.icoex::before {
  content: "\f107";
}

.panelcontent .buddys {
  min-height: 50px;
  position: relative;
}

.panelcontent .buddys.hover {
  background-color: #F5F5F5;
}

.panelcontent .buddys.active {
  border: 1px dashed #eee;
}

.panelcontent .nogrp .option .mnu-drop {
  display: none;
}

.buddys > .me {
  opacity: .5;
}

.buddys > .me img {
  filter: gray;
  -webkit-filter: grayscale(1); 
  filter: grayscale(1);
}

.buddy {
  margin: 5px 0px;
  padding: 5px;
  cursor: pointer;
  position: relative;
}

.buddy.sel:hover,
.buddy.sel {
  background-color: #F0F0F0;
} 

.buddy.sel input[type="checkbox"] { 
  display: initial; 
} 
  
.buddy input[type="checkbox"] {
  position: absolute;
  top: 0px;
  left: 3px;
  z-index: 1;
  display: none;
}

.buddys .more {
  height: 70px;
  display: flex;
  align-items: center;
}

.buddys .more > a {
  display: inline-block;
  margin-left: 10px;
  width: 100%;
  text-decoration: none;
}

.buddys .more > a:hover,
.buddys .more > a:hover {
  text-decoration: none;
}

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

.buddy:hover {
  background-color:#F9F9F9;
}

.buddy:hover input[type="checkbox"] {
  display: initial;
}

.buddy > .thumb {
  float: left;
  position: relative;
}

.profile .thumb > img,
.buddy .thumb > img {
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  width: 45px;
}

.buddy .thumb > .status {
  position: absolute;
  width: 12px;
  height: 12px;
  top: 2px;
  right: 2px;
  border: 2px solid #FFF;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
}

.buddy_status {
  margin-top: 10px;
  font-size: 12px;
}

.buddy_status li {
  margin-right: 10px;
  padding: 3px 0px;
}

.buddy_status .status {
  display: inline-block;
  width: 12px;
  height: 12px;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  margin-right: 3px;
  position: relative;
  top: 0.07em;
}

.buddy_status .status.free {
  background-color: #D8DCEE;
}

.buddy_status .status.student {
  background-color: #1caf9a;
}

.buddy_status .status.teacher {
  background-color: #d9534f;
}

.buddy_status .status.manager {
  background-color: #428bca;
}

.buddy_status .status.school {
  background-color: #f0ad4e;
}

.buddy_status .status.master {
  background-color: #333;
}

.buddy_status a {
  text-decoration: none;
}

.buddy > .thumb.free > .status {
  background-color: #D8DCEE;
}

.buddy > .thumb.student > .status {
  background-color: #1caf9a;
}

.buddy > .thumb.teacher > .status {
  background-color: #d9534f;
}

.buddy > .thumb.manager > .status {
  background-color: #428bca;
}

.buddy > .thumb.school > .status {
  background-color: #f2dede;
}

.buddy > .thumb.master > .status {
  background-color: #333;
}

.buddy > .info {
  overflow: hidden;
  padding-left: 10px;
}

.buddy > .info > .prop {
  margin: 7px 0px 5px;
  font-size: 12px;
}

.buddy > .info > .prop > span {
  display: inline-block;
}

.buddy > .info > .organ {
  color: #727274;
  font-size: 11px;
}

.buddy.block > .checkbox,
.buddy.block > .option,
.block .buddy > .checkbox,
.block .buddy > .option {
  display: none !important;
}

.buddy > .option {
  position: absolute;
  top: 0px;
  right: 8px;
  display: none;
  font-size: 12px;
}

.buddy > .option i {
  width: 10px;
  text-align: center;
}

.buddy > .option > .dropdown-toggle {
  color: #777;
  background-color: transparent;
  padding: 3px 8px;
}

.buddy:hover > .option {
  display: inline-block;
}

.report .chart {
  height: 200px;
}

.report .report-head,
.printpanel .report .filter,
.printpanel .report .rhide,
.tab-pane.report .userinfobx,
.printpanel .report .mylevel {
  display: none;
}

.printpanel .report .report-head {
  display: block;
  position: relative;
}

.report .report-head .logo {
  position: absolute;
  bottom: 10px;
  right: 5px;
}

.report .report-head .title {
  margin: 0px;
  padding: 10px;
  color: #000;
  font-size: 40px;
  font-weight: 600;
  margin-top: 10px;
  border-bottom: 2px solid #334869;
  /*
  background-color: #25344d;
  color: #fff;
  border-radius: 5px;
  font-size: 20px;
  margin-bottom: 10px;
  position: relative;
  */
}

.report .report-head .title > .period {
  font-size: 17px;
  color: #333;
}

.report .report-head .infobx {
  position: relative;
  border-top: 2px solid #334869;
  background-color: #F9F9F9;
  padding: 5px;
  color: #333;
}

.report .report-head .publish {
  float: right;
}

.report .mylevel {
  background-color: #F9F9F9;
  padding: 0px 10px;
}

.report .mylevel > .title {
  font-size: 12px;
  padding: 3px;
  display: block;
}

.report .mylevel-status {
  padding: 5px 10px 10px;
  margin-top: 0px;
}

.report .mylevel-status .cur-level {
  width: 95px;
}

.report .mylevel-status .cur-level .info {
  text-align: center;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  background-color: #2fad92;
  width: 85px;
  height: 85px;
  padding: 25px 0px 0px;
  color: #fff;
}

.report .mylevel-status .cur-level .info h2 {
  margin: 0px;
  font-weight: 600;
  font-size: 20px;
}

.report .mylevel-status .cur-level .info span {
  font-size: 12px;
}

.report .mylevel-status .statusbar {
  font-size: 12px;
  position: relative;
  margin: 15px 30px 0px 95px;
}

.indicator {
  padding: 3px 5px;
  background-color: #4c9ed9;
  color: #fff;
  font-weight: 600;
  position: relative;
  top: -10px;
  left: -15px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
}

.indicator:before {
  content:'';
  display:block;
  position:absolute;
  top:100%; /*should be set to 100% */
  left:10px;
  width:0;
  height:0;
  border-color: #4c9ed9 transparent transparent transparent; 
  border-style: solid;
  border-width: 5px;
}

.report .mylevel-status .statusbar .progress {
  background-color: #F0F0F0;
}

.report .mylevel-status .statusbar .progress .score {
  position: absolute;
  right: 3px;
  font-size: 11px;
  color: #777;
  line-height: 20px;
}

.report .mylevel-status .statusbar .progress .progress-bar {
}

.report .mylevel-status .statusbar .desc {
  font-size: 11px;
  line-height: 27px;
}

.report .mylevel-status .next-level {
  position: absolute;
  top: 0px;
  right: -35px;
}

.report .mylevel-status .next-level span {
  display: inline-block;
  font-size: 15px;
  line-height: 53px;
  color: #333;
  font-weight: 600;
}

.report table .mark {
  background-color: transparent;
  font-size: 17px;
  font-weight: 600;
  text-align: center;
  color: #f01fd0;
}

.report .vtable th,
.report .vtable td {
  vertical-align: middle;
}

.report .table .score > .plus {
  color: #cb4636;
  margin-left: 3px;
}

/*******************  ******************/

.contentpanel .item-list {
  font-size: 12px;
  min-height: 400px;
}

.contentpanel .item-list .panel {
  position: relative;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  background-color: #FFF;
  -webkit-user-select: none;
  height: 165px;
}

.contentpanel .item-list .panel .item .symbol .fa-unlink { 
  position: absolute;
  top: 5px;
  left: 5px;
  display: none;
} 

.contentpanel .item-list .panel.unlink .item .symbol .fa-unlink { 
  display: inherit;
  color: #fff;
  font-size: 15px;
  line-height: 3.3em;
  width: 2.2em;
}

.contentpanel .item-list .panel .bg {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 1;
}

.contentpanel .item-list .panel.sel .bg {
  display: initial;
}

.contentpanel .item-list .panel:hover {
}

.contentpanel .item-list .cate {
  font-size: 15px;
  border-bottom: 1px solid #e3e6f3;
  margin: 0px 0px 10px;
  padding: 10px;
  position: relative;
  cursor: pointer;
}

.contentpanel .item-list .cate.down {
  color: #999;
}

.contentpanel .item-list .cate > span {
}

.contentpanel .item-list .cate > i {
  position: absolute;
  right: 10px;
  font-size: 20px;
}

.contentpanel .item-list .cate.down > i:before {
  content: '\f106';
}

.contentpanel .list-filter > li {
  padding: 0px;
}

.contentpanel .list-filter > li .badge {
}

.contentpanel .item-list .fa-check {
  display: none;
}

.contentpanel .item-list .fa-info-circle {
  position: absolute;
  top: 15px;
  right: 10px;
  color: #B0B0B0;
}

.contentpanel .item-list .sel {
  background-color: rgba(0, 0, 0, 0.05);
}

.contentpanel .item-list .sel .checkbox {
  display: initial;
}

.contentpanel .item-list .sel .symbol {
}

.contentpanel .item-list .sel .fa-check {
  display: inline-block;
  position: absolute;
  top: 0px;
  left: 5px;
  color: #4ECDB4;
  vertical-align: bottom;
}

.contentpanel .item-list .img-circle {
  width: 60px;
  margin: 0px 10px;
}

.contentpanel .item-list .symbol {
  width: 70px;
  text-align: center;
  line-height: 80px;
  position: relative;
  margin-right: 10px;
  background-color: #fbfbfb;
}

.contentpanel .item-list .tleft .symbol {
  text-align: left;
}

.contentpanel .item-list .share .symbol {
  background-color: #f8f5ff;
}

.libpanel .item-list .prop {
}

.contentpanel .item-list .symbol > i.fa-folder {
  font-size: 45px !important;
}

.contentpanel .item-list .symbol > i.ico-type {
  display: inline-block;
  font-size: 40px;
  vertical-align: middle;
}

.contentpanel .item-list .symbol > i.ico-share {
  position: absolute;
  bottom: 17px;
  right: 22px;
  color: #d9534f;
}

.contentpanel .item-list .symbol > i.ico-share.mine {
  color: #428bca;
}

.contentpanel nav {
  text-align: center;
}

.modal-body .item-list .item {
  text-align: center;
  cursor: pointer;
  padding: 5px;
  position: relative;
}

.modal-body .item-list .item > i {
  display: none;
}

.modal-body .item-list .item.sel:not(tr) > i {
  position: absolute;
  top: 50%;
  left: 50%;
  color: #ef450d;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
  font-size: 30px;
  display: block;
  transform: translate(-50%, -50%);
}

.modal-body .item-list .item .wrapitem {
  height: 100px;
  padding: 5px;
  position: relative;
}

.modal-body .item-list .item .wrapitem:hover {
  background-color: #f5f5f5;
}

.modal-body .item-list .item.sel .wrapitem {
  background-color: #f5f5f5;
}


.modal-body .item-list .item .wrapitem .src {
  position: relative;
  height: 90px;
}

.modal-body .item-list .item .wrapitem i.ico-type {
  line-height: 70px;
}

.item-list .fa-archive {
  color: #1582dc;
}

.item-list .fa-file-text {
  color: #6C7A89;
}

.item-list .wrapitem .fa-file-text {
  font-size: 4em;
}

.item-list .question .item .fa-list-alt {
  color: #5cb85c;
}

.item-list .theory .fa-list-alt {
  color: #f0ad4e;
}

.item-list .item .title {
  margin: 0px;
  font-size: 11px;
  line-height: 18px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.item-list .item div.title {
  position: absolute;
  width: 100%;
  bottom: 0px;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.5);
}

.item-list .item p.desc {
  margin: 0px;
  color: #22A7F0;
  font-size: 11px;
}

.contentpanel .item-list .symbol .fa-file-text-o {
}

.contentpanel .item-list h4 {
  font-size: 12px;
  margin: 5px 0;
}

.contentpanel .item-list h4 > span {
  font-size: 12px;
  margin-left: 5px;
}

.contentpanel .item-list .info {
  margin-top: 3px;
}

.contentpanel .item-list .info > a {
  margin-right: 5px;
}

.contentpanel .item-list .info > a:hover, .item-list .info > a:focus {
  text-decoration: none;
}

.contentpanel .item-list .score {
  margin-right: 10px;
  text-align: center;
  padding-top: 25px;
}

.contentpanel .item-list .score > span {
  display: inline-block;
  font-size: 30px;
  font-weight: bold;
  color: #E74C3C;
}

.contentpanel .item-list .btns {
  padding: 5px 10px;
}

.contentpanel .item-list .btns > a {
  cursor: pointer;
  color: #AAA;
}

.chatpanel .form-box {
  margin: 10px;
  padding: 20px;
  background-color: #EFEFEF;
}

.chatpanel .form-box .form-control:focus {
  background-color: #FFF;
}

.chat {
  padding: 10px;
}

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

.chat .user-pic {
  display: block;
  width: 48px;
  padding-top: 5px;
}

.chat .user-pic img {
  width: 100%;
}

.chat .panel {
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  margin-bottom: 5px;
}

.chat .message:before {
  content: "";
  position: absolute;
  top: 20px;
}

.chat .panel-body {
  display: table;
  width: 100%;
}

.chat-box .panel {
  background-color: #ecf0f1;
}

.chat-box .message {
  margin-left: 65px;
  position: relative;
}

.chat-box .message:before {
  left: 0;
  border-right: 6px solid #ecf0f1;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  margin-left: -6px;
}

.chat-box .chat-time {
  display: block;
  text-align: right;
}

.chat-box-right .message {
  position: relative;
  margin-left: 0;
  margin-right: 65px;
}

.chat-box-right .message .panel {
  background-color: #7f8c8d;
  color: #fff;
}

.chat-box-right .message .chat-time {
  text-align: left;
}

.chat-box-right .message:before {
  left: 100%;
  margin-right: 6px;
  margin-left: 0;
  border-right: 6px solid transparent;
  border-left: 6px solid #7f8c8d;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
}
.chat-box p {
  margin: 0;
}

.clipbrd .clip {
  color: #8a6d3b;
  border: 1px solid #faebcc;
  background-color: #fcf8e3;
  line-height: 25px;
  padding: 0 5px;
  margin-bottom: 5px;
  font-size: 12px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
}

.clipbrd .clip button.close {
  position: relative;
  top: 5px;
  right: 0px;
  font-size: 13px;
}

.clipbrd .ul-list > li {
  width: 50%;
}

.row-target {
  margin-top: 5px;
}

.bxPerms .btn-del {
  cursor: pointer;
}

.ui-autocomplete {
  background-color: #FFF;
  border: 1px solid #EEE;
}

.ui-autocomplete > li.ui-menu-item {
}

.ui-menu .ui-menu-item a.ui-state-focus, .ui-menu .ui-menu-item a.ui-state-active {
  background-color: #F0F0F0;
  margin: 0px;
}

.item.clear {
  width: auto;
  display: block;
  padding: 5px;
}

.buddies .item {
  cursor: pointer;
}

.buddies .item.clear:hover,
.buddies .item.sel {
  background-color: #eee;
}

.item.clear .thumb {
  width: 40px;
  height: 40px;
  float: left;
  position: relative;
  text-align: center;
}

.item.group .thumb i {
  color: #777;
  line-height: 40px;
}

.item.lecture .thumb img {
  width: 100%;
  height: 100%;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
}

.item.user .thumb img {
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  width: 40px;
}

.item.clear .info {
  margin-left: 45px;
  font-size: 12px;
  position: relative;
}

.item.clear .info > .name {
  margin: 5px 0px;
  font-size: 13px;
}

.suggestions {
  background-color: #FFF;
  border: 1px solid #EEE;
}

.suggestions .item {
  padding: 5px;
  margin: 3px !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  height: auto !important;
  font-size: 12px;
  position: relative;
  cursor: pointer;
  color: #333;
}

.suggestions .item span {
  display: inline-block;
  min-width: 100px;
}

.suggestions .current {
  background-color: #EFEFEF;
}

.suggestions .item .btn-expand {
  cursor: pointer;
  position: absolute;
  top: 0px;
  right: 0px;
  line-height: 2.5em;
  display: none;
}

.suggestions .item.folder {
  padding-right: 10px;
}

.suggestions .item.folder .btn-expand {
  display: block;
}

.suggestions .item.book .thumb {
  float: left;
  width: 40px;
}

.suggestions .item.user .pic {
  float: left;
  width: 40px;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
}

.suggestions .item.book .info,
.suggestions .item.user .info {
  margin-left: 45px;
}

.suggestions .item.book .info > div,
.suggestions .item.user .info > div {
  line-height: 20px;
}

.suggestions .item.book .info > .name,
.suggestions .item.user .info > .name {
  font-weight: 600;
  color: #333;
  margin: 0px;
}

.suggestions .item.user .info > .tag {
  display: block;
}

.suggestions .item.book .info > .desc,
.suggestions .item.user .info > .desc {
  font-size: 11px;
  color: #777;
}

.modal-body form .form-group {
  margin-bottom: 10px;
  margin-left: 0px;
  margin-right: 0px;
}

.modal-body input[type="checkbox"], .modal-body input[type="radio"] {
  position: static;
}

.bxbtn {
  padding: 15px;
  text-align: center;
  background-color: #EFEFEF;
  cursor: pointer;
  font-size: 12px;
}

select.input-sm {
  height: auto;
  line-height: initial;
}

select.selinline {
  display: block !important;
  width: 100% !important;
  margin-bottom: 10px;
}

.modal-body form .control-inline input {
  display: inline-block;
}

.input-group-btn .btn {
  border-top-left-radius: 0;
  -webkit-border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  -webkit-border-bottom-left-radius: 0;
  border-left: none;
}

.modal .input-group-btn .btn-sm {
  padding: 6px 10px;
}

.modal .src-wrap {
  margin-top: 5px;
  background-color: #EFEFEF;
  padding: 5px;
}

.modal .src-wrap:after {
  clear: both;
  display: block;
  content: '';
}

.modal .src-wrap i.fa-chevron-right {
  margin: 0 5px;
}

.modal .condlist {
  margin-top: 10px;
  border-top: solid 1px #EEE;
  padding-top: 10px;
}

.modal .condlist .label {
  font-size: 13px;
  cursor: pointer;
  margin-top: 5px;
  margin-right: 5px;
  margin-bottom: 0px;
  display: inline-block;
}

.modal .condlist .title {
  display: inline-block;
  max-width: 100px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}

.modal .condlist .badge {
  background-color: #FFF;
  color: #da3e16;
}

.modal .badge {
  margin-left: 3px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
}

.modal .label [data-role="remove"] {
  margin-left: 5px;
  cursor: pointer;
  font-size: 15px;
  line-height: 1px;
  /*vertical-align: middle;*/
}

.modal .label [data-role="remove"]::after {
  content: "x";
  padding: 2px;
}

.modal .label [data-role="remove"]:hover {
  color: #EEE;
}

.modal-footer .total-cnt {
  line-height: 43px;
  font-size: 20px;
}

.modal-footer .total-cnt > span {
  color: #000;
}

.modal-footer .total-cnt .cnt {
  font-weight: bold;
  padding: 0px 5px;
}

#popup-search .nav > li > a {
  padding: 5px 40px;
}

#popup-search form .history {
  display: none;
}

#popup-search .mod-explore .modal-footer .ul-cmds,
#popup-search .modal-footer > .btn-add {
  display: none;
}

#popup-search .mod-explore .modal-footer > .btn-add {
  display: initial;
}

#popup-search .btn-sm {
  padding: 6.2px 10px !important
}

#popup-library .modal-body {
  height: 400px;
  overflow-y: auto;
  overflow-x: hidden;
}

.modal-body .cmd-zone {
  padding: 5px;
  background-color: #F7F7F7;
  margin-bottom: 5px;
}

.modal-body .cmd-zone > div {
}

.modal-body .cmd-zone .title {
  line-height: 35px;
  font-size: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.modal-body .cmd-zone .title a {
  text-decoration: none;
}

#popup-library .cmd-zone > div:first-child {
}

.modal-body .cmd-zone > div:first-child > span {
  height: 37px;
  display: table-cell;
  vertical-align: middle;
}

.modal-body .cmd-zone > div .btn {
  padding-top:7px;
}

.modal-body .cmd-zone > div:nth-child(2) {
  text-align: right;
}

.modal-body .cmd-zone > div .btn-group {
  margin-bottom: 0px;
}

.modal-body .cmd-zone .btn-grey {
  background-color: #FFF;
  border: 1px solid #CCC;
  color: #666;
}

.modal-body .cmd-zone .btn-grey:hover, 
.modal-body .cmd-zone .btn-grey.active, 
.modal-body .cmd-zone .open .dropdown-toggle.btn-grey {
  background-color: #D2D7D3;
  color: #FFF;
}

.modal-body table.item-list {
  font-size: 14px;
}

.modal-body .item-list > li {
  width: 110px;
  min-height: 120px;
  text-align: center;
}

.modal-body .item-list > li > i {
  cursor: pointer;
  padding: 5px 10px;
}

.modal-body .item-list > li > i:hover {
  background-color: #F0F0F0;
}

.modal-body .item-list > li.sel > i {
  background-color: #EFEFEF;
}

.item-list .item .ion-ios-folder,
.item-list .item .fa-folder {
  color: #22a7f0;
}

.modal-body .item-list > li > h4.title {
  margin: 0px;
  font-size: 13px;
  line-height: 18px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.modal-body .item-list > li > p.desc {
  margin: 0px;
  color: #22A7F0;
  font-size: 11px;
}

.modal-body table.item-list td {
  vertical-align: bottom;
  font-size: 12px;
}

.modal-body table.item-list td .udate {
  font-size: 12px;
}

.modal-body table.item-list tbody tr {
  cursor: pointer;
}

.modal-body table.item-list tbody tr.sel td {
  background-color: #1D2939 !important;
  color: #FFF;
}

#popup-tpl .list-filter {
  margin: 0px 5px 5px 5px;
}

.list-filter > li {
  padding: 0px 5px;
  margin: 5px;
  cursor: pointer;
  display: inline-block;
  border-bottom: 3px solid #fff;
}

.list-filter > li.active {
  font-weight: bold;
  border-bottom: 3px solid #e74c3c;
}

.list-filter > li .badge {
  margin-left: 3px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
}

#popup-tpl .items {
  padding: 5px;
}

#popup-tpl .items > .item {
  min-height: 185px;
  padding: 5px 0px;
  position: relative;
}

#popup-tpl .items > .item .cover {
  width: 120px;
  height: 175px;
  background-color: #F0F0F0;
  position: absolute;
  cursor: pointer;
}

#popup-tpl .items .item .info {
  padding-left: 125px;
}

#popup-tpl .items .item .info {
  line-height: 18px;
  font-size: 12px;
  padding-right: 5px;
}

#popup-tpl .items .item .info .title {
  font-weight: bold;
}

#popup-tpl .items .item .info .desc {
  border-top: 1px solid #EEE;
  margin-top: 5px;
  padding-top: 5px;
}

.modal #tpl-view {
  padding: 5px 60px;
  min-height: 300px;
}

.modal #tpl-view .item {
  font-size: 12px;
}

.modal #tpl-view .cover {
  background-size: auto 90%;
  width: 100%;
  height: 300px;
  background-position: center center;
  background-color: #f5f5f5;
  background-repeat: no-repeat;
  text-align: center;
  padding: 10px 0px;
}

.modal #tpl-view .cover > img {
  height: 100%;
}

.modal #tpl-view .cover > span {
  display: inline-block;
  padding-top: 140px;
  color: #777;
}

.modal #tpl-view .item .title {
  font-weight: bold;
}

.modal #tpl-view .item .desc {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #EEE;
}

.modal #tpl-view .item .info > .thumb {
  height: 70px;
  margin: 10px 0px;
}

.modal #tpl-view .item .info > .thumb > img {
  display: inline-block;
  height: 100%;
  border: 1px solid #eee;
  padding: 2px;
  cursor: pointer;
}

.modal #tpl-view .item .info > .thumb > img:hover,
.modal #tpl-view .item .info > .thumb > img.active {
  border: 1px solid #f3ac90;
}

.modal #tpl-view .carousel-control {
  background-image: none;
  width: 8%;
  color: #CCC;
}

.sidepanel {
  padding: 5px;
  text-align: left;
}

.sidepanel .panel-header {
  padding: 0 5px;
  border-bottom: 1px solid #4a535e;
}

.sidepanel .panel-header h4 {
  margin-top: 5px;
  margin-bottom: 5px;
}

.sidepanel .panel-header h4.back {
  cursor: pointer;
}

.sidepanel .slide {
  position: absolute;
  background-color: #1d2939;
  top: 5px;
  height: 100%;
}

.sidepanel .panel-header p {
  color: #8899a6;
}

.sidepanel .panel-body {
  padding: 10px 0px 10px;
}

.sidepanel .form-setting {
  padding-top: 10px;
}

.sidepanel .panel-footer {
  border-top: 1px solid #4a535e;
  text-align: center;
  padding: 10px;
  background-color: transparent;
}

.form-group p.desc {
  margin: 0px;
  padding-top: 5px;
  font-size: 12px;
  line-height: 17px;
  color: #8899a6;
}

#popup-assign .modal-body {
  padding: 5px;
  min-height: 370px;
}

#popup-assign .box-tabs {
}

#popup-assign .box-tabs:after {
  clear: both;
  display: block;
  content: '';
}

#popup-assign .nav-tabs {
  float: left;
  border: none;
  -moz-border-radius: 0px;
  -webkit-border-radius: 0px;
  border-radius: 0px;
}

#popup-assign .nav-tabs > li {
  float: none;
  margin: 0px;
}

#popup-assign .nav-tabs > li > a {
  margin: 0px;
  -moz-border-radius: 0px;
  -webkit-border-radius: 0px;
  border-radius: 0px;
  border: none;
}

#popup-assign .nav-tabs > li.active > a {
}

#popup-assign .tab-content {
  overflow: hidden;
  border: none;
}

#popup-assign .tab-content {
  text-align: left;
}

#popup-assign .tab-content .form-group .btn-sm {
  padding: 6px 10px;
}

#popup-assign .col-to {
  position: relative;
}

#popup-assign .col-to .fa-minus {
  position: absolute;
  top: 10px;
  left: -6px;
  color: #ccc;
}

#popup-assign .targetlist {
  margin: 10px 0px 20px;
}

#popup-publish .targetlist > label,
#popup-assign .targetlist > label {
  margin-right: 5px;
}

#popup-assign p.desc {
  margin-top: 7px;
  margin-bottom: 0px;
  padding: 0px 5px;
  color: #22A7F0;
  font-size: 12px;
}

#popup-assign p.desc > b {
  color: #d9534f;
}

.sidepanel .btn-sm {
  padding: 6px 10px;
}

.sidepanel .cmds .btn-xs {
  font-size: 1em;
  padding: 3px 10px 1px;
  height: 2em;
  color: #999;
  vertical-align: top;
}

.sidepanel .cmds .btn-xs.active {
  color: #333;
}

.sidepanel .form-group label.radio-inline {
  color: #fff;
}

.sidepanel input[type="checkbox"], .sidepanel input[type="radio"] {
  position: initial;
}

.sidepanel .checkbox label {
  color: #8f939e;
  font-size: 13px;
}


#popup-print .property {
  margin-bottom: 15px;
}

#popup-print .subtitle > span {
  font-size: 12px;
  font-weight: normal;
}

#popup-print .list-jobs {
}

#popup-print .list-jobs .row > div {
  padding: 8px;
}

#popup-print .list-jobs .ibtn {
  cursor: pointer;
}

#popup-print .list-jobs .row .progress {
  background-color: #efefef;
}

#popup-print .edate::before {
  content: '';
  position: absolute;
  top: 17px;
  left: -12px;
  width: 5px;
  height: 2px;
  background-color: #999;
}

.modal-footer .price {
  vertical-align: middle;
  margin-right: 10px;
  font-size: 17px;
}

.modal-footer .price > b {
  padding: 0px 5px;
  color: #c82929;
}

#popup-wizard .modal-body {
  padding: 0px;
}

#popup-wizard .modal-footer {
  text-align: initial;
}

#popup-wizard .nav-tabs {
  border: none;
  -moz-border-radius: 0px;
  -webkit-border-radius: 0px;
  border-radius: 0px;
}

#popup-wizard .nav-tabs > li {
  margin: 0px;
}

#popup-wizard .nav-tabs > li > a {
  margin: 0px;
  -moz-border-radius: 0px;
  -webkit-border-radius: 0px;
  border-radius: 0px;
  border: none;
}

#popup-wizard .nav-tabs > li.active > a {
}

#popup-wizard .tab-content {
  overflow: hidden;
  border: none;
}

#popup-wizard .tab-content {
  text-align: left;
}

#popup-wizard .lstSect {
}

#popup-wizard .lstSect > div {
  margin-bottom: 10px;
}

#popup-wizard .ddlSect {
  width: 86%;
}

#popup-wizard .confirm {
  background-color: #F7F7F7;
  padding: 10px;
  margin-bottom: 15px;
}

#popup-wizard .subTbl > div {
  margin-bottom: 10px;
}

.modal .targetlist {
  margin: 10px 0;
}

.modal .modal-footer .targetlist {
  margin-bottom: 0px;
}

.modal .targetlist > label {
  display: inline-block;
  line-height: 1.5;
}

#popup-wizard .tab-content .form-group .btn-sm {
  padding: 6.5px 10px;
}

#popup-wizard .ui-slider-horizontal {
  margin: 20px 25px 10px;
}

#popup-wizard .ui-slider .ui-slider-handle {
  position: absolute;
  z-index: 2;
  width: 3.5em;
  height: 2em;
  cursor: default;
  margin: 0 -25px auto !important;
  text-align: center; 
  line-height: 28px;
  color: #FFFFFF;
  font-size: 15px;
}

#popup-wizard .ui-slider .ui-slider-handle .glyphicon {
  color: #FFFFFF;
  margin: 0 3px; 
  font-size: 13px;
  opacity: 0.5;
}

#popup-wizard .ui-corner-all {
  border-radius: 15px;
}

#popup-wizard .ui-slider-horizontal .ui-slider-handle {
  top: -.8em;
}

#popup-wizard .ui-state-default,
#popup-wizard .ui-widget-content .ui-state-default {
  border: none;
}

#popup-wizard .ui-slider-horizontal .ui-slider-handle {
  margin-left: -0.5em;
}

#popup-wizard .ui-slider .ui-slider-handle {
  cursor: pointer;
}

#popup-wizard .ui-slider a,
#popup-wizard .ui-slider a:focus {
  cursor: pointer;
  outline: none;
}

#popup-wizard .ui-slider a > label{
  color: #FFF;
  font-weight: bold;
}



/*
.popup-resrc .modal-dialog {
  width: 800px;
}

.popup-resrc .modal-body {
  padding-right: 20px;
  min-height: 460px;
  overflow-y: auto;
}

#popup-equestion .modal-dialog {
  width: 400px;
}
*/

#popup-equestion .modal-body {
  min-height: 250px;
}

.popup-resrc .panelc2 {
  position: relative;
  height: 100%;
}

.popup-resrc .panelc2 h5.subtitle {
  margin-top: 0px;
}

.popup-resrc .panelc2 > .preview  {
  position: absolute;
  width: 400px;
  height: 100%;
  border: 1px solid #eee;
}

.panelc2 > .preview > .wrapImgs {
  position: relative;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}

.panelc2 > .preview .srcImg  {
  margin: 5px;
  padding-bottom: 5px;
}

.panelc2 > .preview .srcImg:not(:last-child)  {
  border-bottom: 1px dotted #A9A9A9;
}

.popup-resrc .panelc2 > .property {
  margin-left: 410px;
}

.uploadbox #queue {
	border: 1px solid #E5E5E5;
  background-color: #F0F0F0;
	height: 80px;
	overflow: auto;
	margin-bottom: 10px;
	padding: 0 3px 3px;
	width: 100%;
}

.uploadbox .uploadifive-button {
  border: none;
  border-radius: 0px;
  cursor: pointer;
}

.uploadbox .drop {
  line-height: 20px;
  border: 1px dashed #ccc;
  text-align: center;
  padding: 20px 0;
  margin-bottom: 10px;
  cursor: pointer;
  color: #aaa;
}

.sidepanel .uploadbox .drop {
  background-color: rgba(255, 255, 255, 0.1);
  color: #eee;
  border: none;
}

.sidepanel .uploadbox .drop:hover {
  border: none;
  color: #fff;
  background-color: rgba(255, 255, 255, 0.2);
}

.uploadbox .drop:hover {
  border: 1px dashed #aaa;
  color: #333;
  background-color: rgba(0, 0, 0, 0.02);
}

.uploadbox .drop > p {
  margin: 0px;
}

.modal .uploadbox .files {
  padding: 0 10px;
}

.uploadbox .files > .file {
  position: relative;
  margin-bottom: 5px;
}

.uploadbox .files .file > .thumb {
  float: left;
  margin-right: 10px;
  width: 40px;
  height: 50px;
  cursor: pointer;
}

.uploadbox .files .file > .thumb > i {
  line-height: 50px;
  color: #8293a1;
}

.uploadbox .files .file > h5 {
  margin: 3px 0;
}

.uploadbox .files .file > .size {
  font-size: 11px;
}

.uploadbox .files .file > .date {
  margin: 0px;
  font-size: 11px;
}

.uploadbox .files .file > .progress {
  height: 15px;
  margin-right: 20px;
  background-color: #f5f5f5;
}

.uploadbox .files .file > .progress .progress-bar {
  font-size: 9px;
  line-height: 17px;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 1);
}

.uploadbox .files > .file .btn-remove {
  position: absolute;
  top: 5px;
  right: 5px;
}

.uploadbox .files .item {
  background-color: #fff;
  border: 1px solid #aaa;
}

.uploadbox .files .item > .progress {
  height: 2px;
  margin-top: 5px;
  background-color: #ccc;
}

.popup-resrc .nav-tabs {
  -moz-border-radius: 0px;
  -webkit-border-radius: 0px;
  border-radius: 0px;
}

.popup-resrc .nav-tabs > li {
}

.popup-resrc .nav-tabs > li > a {
  margin: 0px;
  -moz-border-radius: 0px;
  -webkit-border-radius: 0px;
  border-radius: 0px;
  border: none;
}

.popup-resrc .nav-tabs > li.active > a {
}

.popup-resrc .tab-content {
  overflow: hidden;
  -moz-border-radius: 0px;
  -webkit-border-radius: 0px;
  border-radius: 0px;
}

.popup-resrc .tab-content .form-group .btn-sm {
  padding: 6px 10px;
}

.lnkResrcs {
}

.lnkResrcs > label.label {
  display: inline-block;
  margin-top: 10px;
  margin-right: 5px;
}

.lstItems {
  margin: 0px;
  padding: 0px;
}

.lstItems > .item {
  background-color: #f1f6ff;
  border: 1px solid #93b7f6;
  line-height: 20px;
  font-size: 12px;
  overflow: hidden;
  position: relative;
  padding: 5px 25px 5px 8px;
  margin: 5px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lstItems > .item > a.btnDel {
  position: absolute;
  right: 5px;
  padding: 2px 5px;
  font-size: 10px;
  line-height: 14px;
  text-align: center;
  text-decoration: none;
  background-color: #FFF;
  border: 1px solid #A9C5F8;
  color: #657695;
}

.input-group .form-control {
  z-index: 0;
}

.slide-modal {
  position: absolute;
  width: 100%;
  top: 0px;
  z-index: 3;
}

.lstIdx {
  padding: 5px;
  border: 1px solid #EEE;
  height: 200px;
  overflow-x: hidden;
  overflow-y: auto;
}

.lstTpl {
  background-color: #f5f5f5;
  padding: 5px;
}

.bxTpl .lstTpl {
  height: 120px;
  overflow-y: auto;
}

.lstTpl > .item {
  background-color: #FFF;
  width: 80px;
  height: 100px;
  border: 1px solid #DDD;
  margin: 5px 3px;
  cursor: pointer;
}

.lstTpl > .item:hover {
  background-color: #f9f9f9;
}

.lstTpl > .item.chk,
.lstTpl > .item.sel {
  border: 3px solid #DE7777;
}

.lstTpl > .item img {
  width: 100%;
  height: 100%;
}

.bxTplPreview {
  /*background-color: #f4f0ed;*/
  min-height: 400px;
  margin-top: 5px;
}

/******************* lecture  ******************/

.bgLecHeader {
  background: url(/skins/default/images/photos/bg_lecture.jpg) left center no-repeat;
  background-size: cover;
  height: 200px;
  width: 100%;
  position: absolute;
  left: 0px;
  top: 0px;
}

.bgLecHeader > div {
  height: 100%;
  background:rgba(0, 0, 0, 0) -webkit-linear-gradient(rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.75) 100%) repeat scroll 0 0;
  background:rgba(0, 0, 0, 0) -o-linear-gradient(rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.75) 100%) repeat scroll 0 0;
  background:rgba(0, 0, 0, 0) -moz-linear-gradient(rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.75) 100%) repeat scroll 0 0;
  background:rgba(0, 0, 0, 0) linear-gradient(rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.75) 100%) repeat scroll 0 0;
}

.lecPanel {
  max-width: 1000px;
  margin: 0 auto;
  position: relative;
}

.lecHeader {
  height: 200px;
  position: relative;
}

.lecHeader img.logo {
  width: 150px;
  height: 150px;
  margin: 0px;
  background-color: #FFF;
  position: absolute;
  left: 10px;
  bottom: -30px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  border: 3px solid #FFF;
}

.lecHeader h2.title  {
  color: #FFF;
  font-weight: 500;
  position: absolute;
  left: 180px;
  bottom: 5px;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}

.lecHeader .setting {
  color: #4e5665;
  font-size: 11px;
  padding: 2px 5px;
  font-weight: 500;
  position: absolute;
  right: 5px;
  line-height: 1px;
  bottom: 20px;
  background-color: #f6f7f8;
  text-shadow: 0 1px 0 #fff;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  border-radius: 2px;
}
  
.mnuLec {
  display: table;
  margin: 10px auto;
}

.mnuLec > li.cmd {
  position: absolute;
  right: 0px;
  padding: 10px;
}

.mnuLec > li.cmd > a {
  text-decoration: none;
  cursor: pointer;
}
  
.mnuLec > li.mnu:hover {
  -moz-box-shadow: 0 3px 0 #AAA;
  -webkit-box-shadow: 0 3px 0 #AAA;
  box-shadow: 0 3px 0 #AAA;
  background-color: #F8F8F8;
}

.mnuLec > li.mnu.active {
  -moz-box-shadow: 0 3px 0 #428bca;
  -webkit-box-shadow: 0 3px 0 #428bca;
  box-shadow: 0 3px 0 #428bca;
}

.mnuLec > li.mnu > a {
  text-decoration: none;
  display: inline-block;
  text-align: center;
  padding: 10px 40px;
  color: #555;
}

.bxLecUsrs {
  border: solid 1px #EEE;
  padding: 10px;
  margin-bottom: 10px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

.bxLecUsrs h5 {
  margin: 0px;
  font-size: 12px; 
}

.bxLecUsrs h5 span.cnt {
  font-weight: bold;
}

.bxLecUsrs h5 span.close {
  font-size: 12px;
  line-height: 1px;
}

.bxLecUsrs .lstUsrs {
  margin-top: 7px;
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
}

.bxLecUsrs .lstUsrs > li {
  margin-right: 10px;
  position: relative;
  width: 72px;
  height: 68px;
  padding: 1px;
  display: inline-block;
  float: none;
  overflow: hidden;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
}

.bxLecUsrs .lstUsrs > li > div.new {
  border: 1px dashed #ccc;
  height: 100%;
  line-height: 60px;
  font-size: 15px;
  text-align: center;
  cursor: pointer;
}

.bxLecUsrs .lstUsrs > li > div.new:hover {
  background-color: #efefef;
  color: #000;
}

.bxLecUsrs .lstUsrs > li > a {
  display: inline-block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 5px;
  background:rgba(0, 0, 0, 0) -webkit-linear-gradient(rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.75) 100%) repeat scroll 0 0;
  background:rgba(0, 0, 0, 0) -o-linear-gradient(rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.75) 100%) repeat scroll 0 0;
  background:rgba(0, 0, 0, 0) -moz-linear-gradient(rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.75) 100%) repeat scroll 0 0;
  background:rgba(0, 0, 0, 0) linear-gradient(rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.75) 100%) repeat scroll 0 0;
}

.bxLecUsrs .lstUsrs > li > img {
  display: inline-block;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.bxLecUsrs .lstUsrs > li > span.name {
  color: #FFF;
  font-weight: bold;
  text-align: center;
  position: absolute;
  width: 100%;
  font-size: 11px;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
  left: 0px;
  bottom: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background-color: rgba(0, 0, 0, 0.2);
}

.bxLecUsrs .lstUsrs > li > span[data-role="remove"] {
  position: absolute;
  top: 2px;
  right: 3px;
  color: #EFEFEF;
  font-size: 20px;
  text-shadow: 0px 3px 3px rgba(0, 0, 0, 0.9);
  cursor: pointer;
  display: none;
}

.bxLecUsrs .lstUsrs > li:hover > span[data-role="remove"] {
  display: inline-block;
}

.lecContent {
}

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

.lecContent .panelL {
  float: left;
  width: 220px;
}

.lecContent .panelR {
  padding-left: 20px;
  overflow: hidden;
}

.lecContent .intro .overview {
  padding: 5px;
}

.lecContent .intro .overview .desc {
  padding: 5px;
  line-height: 17px;
}

.lecContent .intro .overview .desc.edit {
  border: 1px dashed #ddd;
  min-height: 150px;
  cursor: pointer;
}

.lecContent .intro .overview .desc.edit:hover {
  border-color: #ddd;
}

.panelR.intro .teachers {
  padding: 0px;
}

.box {
  padding: 5px;
  border: 1px solid #EEE;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  min-height: auto;
}

.lecContent .panelR .newbox {
  cursor: pointer;
}

.lecContent .panelR .newbox:hover {
  background-color: #F5F5F5;
  color: #c23c1f;
}

.lecContent .bxBook {
}

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

.lecContent .bxBook .cover {
  float: left;
  width: 100px;
  height: 110px;
  border: 1px solid #EEE;
  background-color: #F0F0F0;
}

.lecContent .bxBook .prop {
  margin-left: 105px;
}

.lecContent .bxProp {
  list-style: none;
  margin: 0px;
  padding: 15px;
}

.lecContent .bxProp > li {
  line-height: 26px;
  font-size: 12px;
}

.lecContent .bxProp > li > label {
  font-weight: bold;
}

.md-title {
  font-weight: bold;
  position: relative;
}

.md-title:not(:first-child) {
  margin-top: 25px;
}

.md-title .btn-introedit {
  position: absolute;
  top: -5px;
  right: 0px;
  line-height: 20px;
}

.md-title.bb1 {
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

.md-title.bb1 .btn-more{
  top: -3px;
}

.md-title .btn-more {
  position: absolute;
  right: 0px;
  padding: 0px 15px;
  font-size: 12px;
  background-color: #EFEFEF;
}

.lecturepanel .nav-tabs {
  display: table;
  margin: 0px auto 10px;
  box-shadow: none;
  -webkit-box-shadow: none;
}

.lecturepanel .nav-tabs.nav-fixed {
  -moz-box-shadow: 0 3px 0 rgba(0,0,0,0.1);
  -webkit-box-shadow: 0 3px 0 rgba(0,0,0,0.1);
  box-shadow: 0 3px 0 rgba(0,0,0,0.1);
}

.lecturepanel .nav-tabs > li > a {
  padding: 10px 40px;
}

/*
.lecContent .reviews {
  margin: 0px -10px;
}

.lecContent .reviews > li {
  width: 350px;
  margin: 10px;
  float: left;
}
*/

.overview .video {
}

.overview .desc {
  font-size: 12px;
  position: relative;
}

/*
.overview .desc:after {
  content: "";
  text-align: right;
  position: absolute;
  bottom: 0;
  right: 0;
  width: 50%;
  height: 1.2em;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%);
}
*/

.reviews section {
  margin: 10px auto;
}

.reviews .board {
  font-size: 12px;
}

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

.reviews .board > .info {
  width: 110px;
  float: left;
  text-align: center;
}

.reviews .board > .info h2 {
  margin: 5px 0;
  font-size: 40px;
}

.reviews .board > .info > div {
  margin: 5px;
}

.reviews .board > .rate {
  padding-left: 5px;
  overflow: hidden;
}

.reviews .board > .rate > div {
  padding: 2px 0;
}

.reviews .board > .rate > div:after {
  clear: both;
  display: block;
  content: '';
}

.reviews .board > .rate > div > label {
  float: left;
  width: 30px;
  margin-bottom: 0px;
  vertical-align: top;
}

.reviews .board > .rate .progress {
  padding-left: 5px;
  overflow: hidden;
  height: 11px;
  position: relative;
  top: 4px;
}

.reviews .review {
  min-height: 90px;
  padding: 10px 5px;
}

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

.reviews .review > .img-profile {
  margin-left: 5px;
  width: 50px;
  float: left;
}

.reviews .review > div {
  padding-left: 15px;
  overflow: hidden;
}

.reviews .review > div .author {
  font-weight: bold;
}

.reviews .review > div .date {
  padding-left: 10px;
  font-size: 12px;
  color: #CCC;
}

.reviews .review > div .rating {
  padding: 5px 0;
}

.reviews .review > div .text {
  font-size: 12px;
}

.sline {
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
}

/*
.sline .lstItems {
  white-space: nowrap;
}

.sline .lstItems > li {
  float: none;
  display: inline-block;
}

.lstItems {
  margin: 10px -10px 20px;
}

.lstItems > li {
  display: inline-block;
}
*/

.sline.lectures > .lecture {
  width: 300px;
  margin-bottom: 0px;
}

ul.lecture {
  list-style: none;
  margin: 5px 10px;
  padding: 5px 5px 5px 110px;
  width: 300px;
  height: 90px;
  min-height: 0px; 
  background: url(/skins/default/images/menubak.jpg) left center no-repeat;
  background-size: 100px 100%;
  position: relative;
}

ul.lecture > li {
  line-height: 20px;
}

ul.lecture > li.title {
  font-weight: bold;
}

ul.lecture > li.info {
  padding: 3px 0;
}

ul.lecture > li.info .rate {
}

.lecture .redbox {
  display: inline-block;
  width: 50px;
  line-height: 25px;
  background-color: red;
  font-size: 12px;
  font-weight: bold;
  text-align: center;
  color: #FFF;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}

ul.lecture > li.info .ucnt {
  position: absolute;
  bottom: 0px;
  left: 50px;
}

ul.lecture > li.desc {
  font-size: 12px;
}

div.lecture {
  width: 200px;
  height: 200px;
  display: inline-block;
  position: relative;
}

.sline div.lecture {
  margin-right: 5px;
}

div.lecture .bgLec {
  height: 100px;
  margin-bottom: 5px;
  position: relative;
}

div.lecture .bgImg1 {
  background: url(/skins/default/images/photos/thumb_lecture01.jpg) left center no-repeat;
  background-size: cover;
}

div.lecture .bgImg2 {
  background: url(/skins/default/images/photos/bg_blackboard.jpg) left center no-repeat;
  background-size: cover;
}

div.lecture .bgLec .img-circle {
  border: 2px solid #FFF;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  width: 60px;
  position: absolute;
  left: 10px;
  bottom: -20px;
}

div.lecture .bgLec .pic {
  display: inline-block;
  width: 60px;
  height: 60px;
  position: absolute;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  width: 60px;
  position: absolute;
  left: 10px;
  bottom: -20px;
  opacity: 1;
  border: 2px solid #fff;
  background-color: #fff;
}

div.lecture .bgLec .pic i {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #aaa;
}

div.lecture .bgLec .ucnt {
  position: absolute;
  bottom: 0px;
  right: 0px;
  display: none;
}

div.lecture .info {
  position: relative;
}

div.lecture .info .title {
  font-weight: bold;
}

div.lecture.box .info .title {
  padding: 5px 0px;
  color: #333;
}

div.lecture > .rate {
  text-align: right;
}

div.lecture .desc {
  font-size: 12px;
  margin-bottom: 5px;
  display: none;
}

div.lecture .price {
  font-size: 12px;
  text-align: right;
}

.lessons div.lesson {
  margin: 5px 0px;
  position: relative;
}

.lessons div.lesson > .thumb {
  margin-bottom: 5px;
  position: relative;
}

.lessons div.lesson > .thumb > img {
  width: 100%;
  height: 100%;
}

.lessons div.lesson > .thumb > .time {
  position: absolute;
  right: 3px;
  bottom: 3px;
  background-color: #000;
  opacity: 0.7;
  color: #FFF;
  font-size: 11px;
  padding: 0px 5px;
  height: 14px;
  line-height: 14px;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}

.lessons div.lesson .rate {
  color: #daac16;
  font-size: 12px;
}

.lessons div.lesson .title {
  margin: 8px 0 5px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.lessons div.lesson .thumb .no {
  padding: 5px 8px;
  color: #FFF;
  font-size: 15px;
  font-weight: bold;
  position: absolute;
  top: -7px;
  left: -7px;
}

.lessons div.lesson .info {
  position: relative;
  font-size: 12px;
}

.lessons div.lesson .info .comments {
  position: absolute;
  right: 0px;
}

.papers div.paper,
.tests div.test {
  position: relative;
  border: 1px solid #ddd;
  height: 105px;
  margin-bottom: 10px;
  cursor: pointer;
  background-color: transparent;
}

.tests div.test span {
  opacity: 1;
}

.resrcs div.resrc .option,
.books div.book .option,
.papers div.paper .option,
.tests div.test .option {
  display: none;
}

.papers div.paper:hover,
.tests div.test:hover {
  background-color: rgba(0, 0, 0, 0.1);
}

.schoolview .tests div.test:hover {
  background-color: #f9f9f9;
}

.schoolview .box .option .btn {
  color: #333;
  text-shadow: none;
}

.tests div.test:hover .thumb .score {
  color: red;
}

.papers div.paper:hover > .thumb > .options,
.tests div.test:hover > .thumb > .options {
  background-color: rgba(0, 0, 0, 0.7);
}

.tests div.test:hover .thumb .imgbg {
  display: none;
}

.resrcs div.resrc:hover .option,
.books div.book:hover .option,
.papers div.paper:hover .option,
.tests div.test:hover .option {
  display: inline-block;
}

.tests.tile div.test {
  border: none;
  -webkit-border-radius: 0px;
  border-radius: 0px;
  height: auto;
  width: 90%;
  margin: 5px auto;
}

.papers div.paper:after,
.tests div.test:after {
  clear: both;
  display: block;
  content: '';
}

.papers div.paper > .thumb,
.tests div.test > .thumb {
  float: left;
  width: 70px;
  height: 100%;
  position: relative;
  background-color: #FCFCFC;
  padding: 2px;
  margin-right: 10px;
  box-shadow: 3px 3px 3px rgba(12,12,12,0.2);
  overflow: hidden;
}

.papers div.paper > .thumb {
  padding: 0px;
  box-shadow: 1px 1px 1px rgba(12,12,12,0.2);
}

.tests.tile .test > .thumb {
  float: none;
  width: 100%;
  height: 100%;
  margin: 0px;
  overflow: hidden;
}

.tests.tile .test .thumb:after {
  content: '';
  display: block;
  padding-top: 140%;
}

.papers div.paper > .thumb > img,
.tests div.test > .thumb > img {
  width: 100%;
  height: 100%;
  position: absolute;
}

.papers div.paper > .thumb > i,
.tests div.test > .thumb > i {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 50px;
}

.tests div.test > .thumb > div.imgbg,
.tests div.test > .thumb > div.ibg {
  display: inline-block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  /*
  background-color: #000;
  opacity: 0.05;
  */
  background:rgba(0, 0, 0, 0) -webkit-linear-gradient(rgba(0, 0, 0, 0) 10%, rgba(205, 205, 205, 0.15) 100%) repeat scroll 0 0;
  background:rgba(0, 0, 0, 0) -o-linear-gradient(rgba(0, 0, 0, 0) 10%, rgba(205, 205, 205, 0.15) 100%) repeat scroll 0 0;
  background:rgba(0, 0, 0, 0) -moz-linear-gradient(rgba(0, 0, 0, 0) 10%, rgba(205, 205, 205, 0.15) 100%) repeat scroll 0 0;
  background:rgba(0, 0, 0, 0) linear-gradient(rgba(0, 0, 0, 0) 10%, rgba(205, 205, 205, 0.15) 100%) repeat scroll 0 0;
}

.tests div.test > .thumb > .score {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 30px;
  font-weight: bold;
  text-align: center;
  color: #d9534f;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.8);
}


.papers div.paper > .thumb > .options,
.tests div.test > .thumb > .options {
  position: absolute;
  bottom: 0px;
  right: 0px;
  width: 100%;
  height: 25px;
  line-height: 25px;
  padding: 0px 5px;
  background-color: rgba(0, 0, 0, 0.3);
  font-weight: bold;
  text-align: right;
  color: #FFF;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.9);
  z-index: 1;
}

.tests div.test > .thumb > .options > span {
  font-size: 15px;
}

.tests div.test > .thumb > .time {
  position: absolute;
  bottom: 0px;
  right: 0px;
  display: inline-block;
  width: 40px;
  height: 20px;
  line-height: 20px;
  background-color: rgba(239, 43, 28, 0.8);
  font-size: 12px;
  font-weight: bold;
  text-align: center;
  color: #FFF;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
  z-index: 1;
}

.papers div.paper .info,
.tests div.test .info {
  overflow: hidden;
  font-size: 12px;
}

.papers div.paper ul.info {
  margin: 0px;
  padding: 0px;
  list-style: none;
}

.papers div.paper ul.info > li {
  margin: 3px 0px;
}

.tests div.test .info .wrapinfo {
}

.tests div.test .info .cate {
  padding: 2px 0px;
}

.papers div.paper .info .cate {
  margin-top: 3px;
  font-size: 11px;
  display: inline-block;
}

.tests.tile .test > .info  .adate,
.tests.tile .test > .info  .result,
.tests.tile .test > .info  .cate {
  display: none;
}

.papers div.paper .info .title,
.tests div.test .info .title {
  font-size: 14px;
  font-weight: normal;
  margin: 0px;
  padding: 5px 0px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.papers div.paper .info .title {
  padding: 7px 0px;
  font-weight: 500;
}

.tests div.test .info .smry {
  height: 15px;
}

.tests div.test .info .adate,
.tests div.test .info .period {
  font-size: 12px;
  margin: 4px 0;
}

.tests div.test .info .result {
}

.tests div.test .info .graph {
  padding-top: 10px;
}

.tests div.test .info .graph label {
}

.tests div.test .info .graph .progress {
  background-color: #F0F0F0;
  height: 5px;
}

.newbox {
  border: 1px dashed #ddd;
  min-height: 105px;
  width: 100%;
  position: relative;
  margin: 10px 0px;
}

.newbox > div {
  font-size: 13px;
  line-height: 20px;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  white-space: nowrap;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);
}

.newbox .label {
  display: block;
  color: inherit;
}

.tests div.new > div > span {
  display: inline-block;
  font-size: 25px;
  font-weight: 500;
  margin-bottom: 10px;
}

.mainItems {
}

.lectures.rows {
  margin-left: -10px;
  margin-right: -10px;
}

.lectures .lecture.box {
  width: auto;
  height: auto;
  display: inherit;
}

.lectures .lecture.box.sel,
.lectures .lecture.box:hover {
  border: 1px solid #ccc;
  background-color: #F5F5F5;
}

.lectures .lecture.box .cate {
  text-align: right;
  position: relative;
  top: -30px;
  margin-right: 5px;
}

.lectures .lecture.box .cate > span {
  background-color: #000;
  color: #fff;
  padding: 2px 5px;
  display: inline-block;
}

.lectures .lecture.box .progress {
  background-color: #ccc;
}

.lectures .lecture.box .smry {
  font-size: 12px;
  padding: 5px 0px;
  position: absolute;
  top: -5px;
  right: 0px;
}

.lectures div.lecture {
  background-color: #FFF;
  height: 120px;
  width: 100%;
  margin-bottom: 10px;
  cursor: pointer;
}

.lectures div.lecture:after {
  clear: both;
  display: block;
  content: '';
}

.lectures div.lecture .thumb {
  float: left;
  width: 120px;
  height: 100%;
  position: relative;
}

.lectures div.lecture .thumb img.bg {
  width: 100%;
  height: 100%;
}

.lectures div.lecture .thumb img.pic {
  border: 1px solid #FFF;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  width: 60px;
  position: absolute;
  right: 5px;
  bottom: 5px;
}

.lectures div.lecture .thumb .ucnt {
  display: inline-block;
  width: 50px;
  line-height: 25px;
  opacity: 0.8;
  background-color: red;
  font-size: 12px;
  font-weight: bold;
  text-align: center;
  color: #FFF;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
  position: absolute;
  bottom: 0px;
  right: 0px;
}

.lectures div.lecture ul.info {
  list-style: none;
  margin: 0px;
  padding: 0px 5px;
  overflow: hidden;
  border: 1px solid #eee;
  height: 100%;
  position: relative;
}

.lectures div.lecture ul.info > li {
  margin: 3px 0px;
  font-size: 12px;
}

.lectures div.lecture ul.info .option {
  position: absolute;
  top: 0px;
  right: 5px;
}

.lectures div.lecture ul.info .cate {
  display: inline-block;
  color: #111;
  font-size: 11px;
}

.sline .lecture .title,
.lectures div.lecture ul.info h3.title {
  margin: 0px;
  padding: 3px 0px;
  font-weight: normal;
  font-size: 15px;
}

.lectures div.lecture ul.info .rdate {
  font-size: 11px;
  color: #999;
}

.lectures div.lecture ul.info .rate {
  margin: 5px 0px;
}

.lectures div.lecture ul.info .rate .progress {
  background-color: #F0F0F0;
}

.lesson-panel {
  /*overflow: hidden;*/
}

.lesson-panel .cpanel {
  margin-left: 265px;
  font-size: 12px;
}

.lesson-panel .lpanel {
  float: left;
  width: 250px;
  position: -webkit-sticky;
  position: sticky;
  top: 60px;
}

.index.box {
  min-height: 250px;
  width: 250px;
}

.lesson-panel .lpanel .index.box .title {
  margin: 5px 0px 10px;
  font-size: 15px;
  font-weight: 600;
  position: relative;
  border-bottom: 1px dashed #eee;
  padding-bottom: 10px;
}

.lesson-panel .lpanel .index.box .title > a {
  position: absolute;
  top: -5px;
  right: 0px;
  padding: 4px 5px;
}

.lesson-panel .lpanel .index.box .list {
  list-style: none;
  margin: 0px;
  padding: 0px;
  font-size: 12px;
}

.lesson-panel .lpanel .index.box .list > li {
  padding: 5px;
  line-height: 20px;
  cursor: pointer;
}

.lesson-panel .lpanel .index.box .list > li:hover {
  background-color: #eee;
}

.lesson-panel .lpanel .index.box .list > li > span {
  display: inline-block;
  width: 15px;
}

.lesson-panel .intro {
  display: inline-block;
  width: 100%;
  padding: 0px 10px;
}

.lesson-panel .intro .video {
  position: relative;
}

.lesson-panel .item > span[data-role="remove"] {
  position: absolute;
  top: -5px;
  left: -5px;
  cursor: pointer;
  z-index: 1;
  color: #fff;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.9);
}

.lesson-panel .item > span[data-role="remove"]:hover {
  color: #fcded5;
}

.lesson-panel .intro .video video {
  width: 100%;
}

.video.new {
  height: 150px;
  border: 1px dashed #ddd;
  position: relative;
  cursor: pointer;
}

.video.new > i {
  position: absolute;
  top: 50%;
  left: 50%;
  color: #ccc;
  transform: translate(-50%, -50%);
}

.video.new .toolbar {
  position: absolute;
  top: 80%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(0, 0, 0, 0.6);
  width: 110px;
}

.video.new .toolbar > a {
  display: inline-block;
  text-align: center;
  padding: 5px 10px;
  color: #eee;
}

.video.new .toolbar > a:hover {
  color: #fff;
}

.lesson-panel .intro .desc {
  border: 1px dashed #eee;
  min-height: 150px;
  padding: 5px;
  line-height: 17px;
  cursor: pointer;
}

.lesson-panel .intro .desc:hover {
  border-color: #ddd;
}

.lesson-panel .books {
  padding: 5px 10px;
  overflow-y: hidden;
  overflow-x: auto;
  white-space: nowrap;
}

.lesson-panel .books .book {
  display: inline-block;
  width: 110px;
  cursor: pointer;
  padding: 0px;
  margin: 0px 15px 0px 0px;
}

.lesson-panel .books .book .cover {
  width: 100%;
  float: none;
}

.lesson-panel .books .book .title {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  padding: 2px 5px;
  position: absolute;
  bottom: 0px;
  width: 100%;
}

.lesson-panel .books .new {
  display: inline-block;
  width: 110px;
  height: 150px;
  border: 1px dashed #ccc;
  color: #f69a9a;
  position: relative;
  cursor: pointer;
  vertical-align: top;
  margin: 0px 15px 0px 0px;
}

.lesson-panel .books .new:hover {
  border-color: #e75e5e;
  color: #e75e5e;
}

.lesson-panel .books .new > i {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.widget.lessonbx .widget-header > h2.title  {
  margin: 5px 0px;
  font-size: 14px;
  font-weight: 600;
  line-height: 25px;
}

.widget.lessonbx .widget-header > h2.title > .no {
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  margin-right: 5px;
  display: inline-block;
  width: 20px;
  height: 20px;
  text-align: center;
  background-color: #ccc;
  color: #fff;
  line-height: 20px;
}

.lesson-panel .smry {
  font-size: 13px;
  padding: 5px;
  background-color: #F0F0F0;
}

.lesson-panel .ratebx {
  padding: 30px 10px 10px 20px;
}

.lesson-panel .ratebx .indicator {
  background-color: #d9564c;
}

.lesson-panel .ratebx .indicator:before {
  border-color: #d9564c transparent transparent transparent; 
}

.lesson-panel .ratebx .progress {
  background-color: #f0f0f0;
  height: 20px;
}

.lesson-panel .ratebx .progress .status {
  position: absolute;
  right: 20px;
  line-height: 20px;
  font-weight: 600;
  color: #777;
}

.lesson-panel .ratebx > .desc {
  margin-top: 5px;
}

.lesson-panel .newbox {
  min-height: 50px;
  cursor: pointer;
  background-color: #F5F5F5;
}

.lesson-panel .newbox:hover {
  border-color: #f56b6b;
  background-color: #fcf3cb;
  color: #000;
}

.widget .widget-header {
  border-bottom: 1px solid #eee;
  position: relative;
  padding: 0px;
}

.widget .widget-header.p5 {
  padding: 5px;
}

.widget .widget-header .input-xs {
  padding: 3px 10px;
  font-size: 12px;
}

.widget.lessonbx .widget-header .control {
  position: absolute;
  top: 0px;
  right: 5px;
}

.widget.lessonbx .widget-header .control > .btn {
  background-color: transparent;
  padding: 1px 7px;
}

.widget.lessonbx > .widget-body > .desc {
  padding: 5px;
}

.widget.lessonbx .list {
}

.widget.lessonbx .list .lesson {
  position: relative;
  padding: 10px 0px;
  overflow: hidden;
}

.widget.lessonbx .list .lesson.new {
  display: inline-block;
}

.widget.lessonbx .list .lesson > .status {
  width: 50px;
  height: 50px;
  margin: 0px 20px;
  float: left;
  position: relative;
  z-index: 1;
}

.widget.lessonbx .list .lesson > .status > .circle {
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  width: 100%;
  height: 100%;
  border: 2px solid #ccc;
  background-color: #f0f0f0;
  text-align: center;
  line-height: 55px;
  position: relative;
  color: #ccc;
  cursor: pointer;
}

.widget.lessonbx .list .lesson.clinic > .status .circle {
  background-color: #fff;
}

.widget.lessonbx .list .lesson.new > .status .circle {
  background-color: #fff;
  border-color: #f69a9a;
  color: #f69a9a;
}

.widget.lessonbx .list .lesson.new > .status .circle,
.widget.lessonbx .list .lesson.new > .status:before,
.widget.lessonbx .list .lesson.clinic > .status .circle,
.widget.lessonbx .list .lesson.clinic > .status:before,
.widget.lessonbx .list .lesson.clinic > .status:after {
  border-style: dotted;
}

.widget.lessonbx .list .lesson > .option {
  position: absolute;
  top: 0px;
  right: 0px;
  display: none;
  height: 100%;
  font-size: 0px;
}

.widget.lessonbx .list .lesson > .option > a {
  height: 100%;
  display: inline-block;
  text-align: center;
  padding: 17px 15px;
  color: #fff;
  text-decoration: none;
  font-size: 12px;
}

.widget.lessonbx .list .lesson > .option > a:first-child {
  background-color: #f8bb61;
}

.widget.lessonbx .list .lesson > .option > a:last-child {
  background-color: #f86b6b;
}

.widget.lessonbx .list .lesson > .option > a > span {
  display: table-cell;
  padding: 2px 0px;
}

.widget.lessonbx .list .lesson > .option > .btn {
  background-color: transparent;
}

.widget.lessonbx .list .lesson > .option > .btn > i {
  cursor: pointer;
  font-size: 15px;
  color: #333;
}

.widget.lessonbx .list .lesson:not(.new):hover {
  background-color: #F0F0F0;
}

body.touchoff .widget.lessonbx .list .lesson:hover > .option {
  display: initial;
}

.widget.lessonbx .list .lesson:hover > .status .circle {
  color: #333;
}

.widget.lessonbx .list .lesson.new:hover > .status .circle {
  background-color: #fcf3cb;
  border-color: #e75e5e;
  color: #e75e5e;
}

.widget.lessonbx .list .lesson > .status:before {
  content: "";
  display: block;
  position: absolute;
  top: -15px;
  left: 50%;
  border: 0px solid #ccc;
  border-width: 0 0 0 2px;
  width: 1px;
  /*height: 17px;*/
  height: 100%;
}

.widget.lessonbx .list .lesson > .status:after {
  content: "";
  display: block;
  position: absolute;
  top: 100%;
  left: 50%;
  border: 0px solid #ccc;
  border-width: 0 0 0 2px;
  width: 1px;
  /*height: 16px;*/
  height: 100%;
}

.widget.lessonbx .list .lesson.completed > .status .circle {
  border: 2px solid #54a2e3;
  background-color: #82bff2;
  color: #F9F9F9;
  left: 1px;
}

.widget.lessonbx .list .lesson.completed > .status:before,
.widget.lessonbx .list .lesson.completed > .status:after {
  border: 1px solid #54a2e3;
}

.widget.lessonbx .list .lesson:first-child > .status:before {
  display: none;
}

.widget.lessonbx .list .lesson:last-child > .status:after {
  display: none;
}

.widget.lessonbx .list .lesson > .info {
  position: relative;
}

.widget.lessonbx .list .lesson > .info > .title {
  font-size: 14px;
  margin: 0px;
  padding: 10px 0px 5px;
  cursor: pointer;
}

.widget.lessonbx .list .lesson > .info > .title > .option {
}

.widget.lessonbx .list .lesson > .info > .prop {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.widget.lessonbx .list .lesson > .info > .prop > span {
  display: inline-block;
  margin-right: 3px;
  padding: 0px 5px;
  background-color: #baaeae;
  color: #fff;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  font-size: 11px;
}

.widget.lessonbx .list .lesson > .info > .popover {
  display: initial;
  top: 5px;
  left: 80px;
  font-size: 12px;
}

.panel-report .widget .ratebx {
  margin: 30px 20px 20px 30px;
}

.panel-report .widget .ratebx .desc {
  margin-top: 10px;
}

.panel-report .ratebx .indicator {
  background-color: #d9564c;
}

.panel-report .ratebx .indicator:before {
  border-color: #d9564c transparent transparent transparent; 
}

.panel-report .ratebx .progress {
  background-color: #f0f0f0;
  height: 20px;
  position: relative;
}

.panel-report .ratebx .progress .status {
  position: absolute;
  right: 20px;
  line-height: 20px;
  font-weight: 600;
  color: #777;
}

.panel-report .widget .index {
  margin-left: 0px;
  margin-right: 0px;
}

.panel-report .widget .index .progress {
  margin-top: 10px;
  height: 20px;
}

.panel-report .widget .index .progress .sr-only {
  position: static;
}

.panel-report .widget .list {
  margin: 0 10px;
}

.panel-report .widget .list .index .no {
  padding: 0 10px;
}

.panel-report .widget .lessons .lesson {
  margin: 0px;
}

body .panel-report .widget .list .lessons .lesson:hover > .option,
.panel-report .widget .lessons .lesson > .option {
  display: none;
}

.panel-report .widget .list .idx {
  margin-bottom: 0px;
  border-bottom: 2px solid #ccc;
  padding: 5px 0px;
  line-height: 40px;
}

.panel-report .widget .list .idx .title {
  font-weight: 600;
}

.panel-report .widget .list .sidx .no,
.panel-report .widget .list .idx .no {
  padding: 0px;
  margin-right: 5px;
}

.panel-report .widget .list .sidx {
  border-bottom: 1px solid #eee;
}

.panel-report .widget .list .sidx > div {
  line-height: 40px;
}

.panel-report .widget .list .sidx .progress {
  margin-top: 13px;
  background-color: #eee;
}

.toc {
  line-height: 25px;
}

.toc .wrapidx.expand .idxes {
  display: block;
}

.toc .wrapidx.expand .midx i.fa-angle-down:before {
  content: '\f106';
}

.toc .midx {
  padding: 5px;
  border-bottom: 1px solid #eee;
  font-size: 14px;
  margin-bottom: 10px;
  position: relative;
  background-color: #F5F5F5;
  cursor: pointer;
}

.toc .title {
  margin: 0px;
  line-height: 25px;
  font-weight: normal;
}

.toc .midx .no {
}

.toc .midx .fa-angle-down {
  position: absolute;
  top: 0px;
  right: 10px;
  line-height: 40px;
}

.toc .idxes {
  margin-bottom: 10px;
  display: none;
}

.toc .idxes .idx {
  margin-top: 5px;
  padding-left: 20px;
  font-size: 13px;
  position: relative;
}

.toc .idxes .idx:hover {
}

.toc .idxes .idx > .no {
}

.toc .idxes .idx > .page {
  position: absolute;
  top: 0px;
  right: 10px;
}

.toc .idxes .idx .seces {
  padding-top: 5px;
}

.toc .idxes .idx .seces > .sec {
  display: inline-block;
  position: relative;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  padding: 1px 10px;
  cursor: pointer;
  background-color: #ccc;
  color: #fff;
  margin-right: 5px;
}

.toc .idxes .idx .seces > .sec.sel,
.toc .idxes .idx .seces > .sec:hover {
  background-color: #d75d43;
}

#popup-link .preview {
  min-height: 200px;
}

#popup-link .preview .load {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#popup-desc #descedit {
  overflow: auto;
  height: 300px;
  border: 1px solid #ddd;
  padding: 10px;
}

#popup-desc .btn-toolbar .btn-group {
  margin-bottom: 5px;
}

/************ note **************************/

.note-content {
}

.note-content .note-panel {
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
  border-radius: 0;
  border: none;
}

.note-content .note-panel .panel-heading {
  background-color: #1d2939;
  color: #FFF;
  padding: 10px;
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
  border-radius: 0;
  border: 1px solid #1d2939;
}

.note-content .note-panel .panel-heading:after {
  clear: both;
  display: block;
  content: '';
}

.note-content .note-panel .panel-heading .subject {
  font-weight: bold;
  font-size: 14px;
}

.note-content .note-panel .panel-heading .more {
  float: right;
}

.note-content .note-panel .panel-body {
  background-color: #FFF;
  border:1px solid #e3e6f3;
  padding: 5px 0px;
  overflow-x: auto;
  overflow-y: hidden;
}

.note-content .note-panel .lstItems {
  margin: 0px;
  white-space: nowrap;
}

.blkcate .md-title {
  padding: 5px 0;
  position: relative;
  cursor: pointer;
}

.tgExpand.off i.fa-chevron-down::before {
  content: '\f077';
}

.blkcate .md-title > span {
  display: inline-block;
  color: #FFF;
  font-weight: bold;
  background-color: #1d2939;
  padding: 5px 10px;
  position: absolute;
}

.blkcate .md-title.off > span {
  background-color: #68717e;
}

.blkcate .md-title > hr {
  border-top: 1px dashed #8c8b8b;
  border-bottom: 1px dashed #EEE;
  margin: 12px 0;
}

.mod_note .overpanel .pages {
  margin-top: 60px;
}

/*
.note-content .notes {
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0px 5px;
  white-space: nowrap;
}

.note-content .note {
  display: inline-block;
  margin: 5px;
  width: 140px;
  height: 200px;
  border: 1px solid #EEE;
  -moz-box-shadow: 3px 3px 0 rgba(12,12,12,0.05);
  -webkit-box-shadow: 3px 3px 0 rgba(12,12,12,0.05);
  box-shadow: 3px 3px 0 rgba(12,12,12,0.05);
}

.note-content .note .cover {
  position: relative;
  height: 150px; 
}

.note-content .note .cover img {
  width: 100%;
  height: 100%;
}

.note-content .note .cover span {
  position: absolute;
  bottom: 3px;
  right: 3px;
  opacity: 0.7;
  color: #FFF;
  background-color: #C00000;
  font-size: 11px;
  padding: 0px 5px;
  height: 17px;
  line-height: 17px;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}

.note-content .note .title h5 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: bold;
  font-size: 12px;
  margin: 5px 0;
}

.note-content .note .info {
  font-size: 12px;
  position: relative;
}

.note-content .note .body {
  padding: 5px;
}

.note-content .note .info .updated {
  position: absolute;
  right: 0px;
}
*/


/*************** select-menu *******************/
.select-menu {
  position: fixed;
  bottom: 0px;
  width: 100%;
  background-color: #000;
  text-align: center;
  opacity: 0.7;
  z-index: 103;
  color: #aaa;
  overflow: hidden;
  display: none;
}

.select-menu button {
  background-color: transparent;
  border: none;
  height: 40px;
  padding: 5px 15px;
  color: #aaa;
}

.select-menu button:hover {
  color: #FFF;
}

.select-menu button i {
  font-size: 19px;
}

.select-menu .close {
  float: right;
  font-weight: normal;
  opacity: initial;
  text-shadow: initial;
}

.select-menu span.message {
  position: absolute;
  top: 12px;
  left: 10px;
}


/*
.testpanel > .carousel {
  height: 100%;
}

.papers {
  height: 100%;
}

.papers .paper {
  height: 100%;
}

.papers .paper img {
  height: 100%;
}

.papers .owl-wrapper-outer {
  height: 100%;
}

.papers .owl-wrapper-outer .owl-wrapper {
  height: 100%;
}

.papers .owl-wrapper-outer .owl-wrapper .owl-item {
  height: 100%;
}
*/


.papers {
  overflow: hidden;
  position: relative;
  height: 100%;
}

.papers .wrap_papers {
  float: left;
  display: inline;
  height: 100%;
  padding: 0;
  margin: 0;
  width: 3510px;
  white-space: nowrap;

  transition-property: transform;
  transition-duration: 0.5s;
  transition-timing-function: ease-out;

  transform: translate(0, 0);
}

.papers .wrap_papers .paper {
  white-space: nowrap;
  float: left;
  padding: 0;
  margin: 0;
  height: 100%;
  transform: translate(0, 0);
}

.testpanel .pages {
  position: absolute;
  left: 0px;
  bottom: 0px;
  width: 100%;
}

.testpanel .pages .ui-slider-horizontal {
  margin: 15px;
  height: 3px;
}

.testpanel .pages .ui-slider .ui-slider-handle {
  top: -0.6em;
}

/*************** omr *******************/
.omr {
  display: none;
  background-color: #fff;
  width: 270px;
  height: 480px;
  position: fixed;
  top: 70px;
  padding: 40px 0px;
  border: 1px solid #ccc;
  -moz-box-shadow: 3px 3px 0 rgba(12,12,12,0.05);
  -webkit-box-shadow: 3px 3px 0 rgba(12,12,12,0.05);
  box-shadow: 3px 3px 0 rgba(12,12,12,0.05);
}

body .omron .omr {
  display: block;
}

.omr .wrap-omr{
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}

.omr .head {
  position: absolute;
  width: 100%;
  top: 0px;
  background-color: #000;
  opacity: 0.8;
  color: #fff;
  cursor: move;
}

.omr .head h2 {
  font-size: 15px;
  font-weight: bold;
  line-height: 40px;
  margin: 0px;
  text-align: center;
}

.omr .head .btn-close {
  position: absolute;
  top: 0px;
  right: 8px;
  font-size: 30px;
  line-height: 35px;
  color: #eee;
}

.omr form {
  height: 100%;
}

.omr .cmd {
  position: absolute;
  width: 100%;
  text-align: center;
  bottom: 0px;
  line-height: 40px;
}

.omr .cmd .btn {
  margin-bottom: 5px;
  width: 90%;
}

.omr label.no {
  position: relative;
  top: 0px;
  left: 0px;
  width: 40px;
  text-align: center;
  font-size: 15px;
  font-weight: bold;
  height: 100%;
  line-height: 3em;
  margin: 0px;
  padding: 0px;
  vertical-align: middle;
}

.omr:not(.dap) .ox_x label.no::before,
.omr:not(.dap) label.ox_x::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 25%;
  width: 50%;
  height: 2px;
  background: red;
  transform: rotate(45deg) translateY(-50%);
  z-index: 1;
}

.omr:not(.dap) .ox_x label.no::after,
.omr:not(.dap) label.ox_x::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 25%;
  width: 50%;
  height: 2px;
  background: red;
  transform: rotate(-45deg) translateY(-50%);
  z-index: 1;
}

.omr:not(.dap) .ox_o label.no::after,
.omr:not(.dap) label.ox_o:after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 25px;
  height: 25px;
  border: 2px solid red;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  /*margin: -14.5px 0px 0px -12.5px;*/
  transform: translate(-50%, -50%);
  z-index: 1;
}

.omr span.sel {
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  line-height: 35px;
  color: #999;
  width: 35px;
  height: 35px;
  border: 1px solid #ccc;
  background-color: #fff;
  font-size: 15px;
  font-weight: bold;
  margin-left: 3px;
  display: inline-block;
  cursor: pointer;
}


.omr input {
  display: inline-block;
  padding: 7px 10px;
  vertical-align: middle;
}

.omr .row input[type=text] {
  width: 185px;
  margin-left: 5px;
}

.omr input[type=radio] {
  width: 20px;
}

.omr.dap input[type=radio] {
  margin: 0px;
}

.omr.dap div.row > span.fa-stack {
  padding: 0px;
  font-size: 15px;
  color: #ddd;
}

.omr.dap div.row:not(.disabled) > span.fa-stack {
  cursor: pointer;
}

.omr.dap div.row > span.fa-stack.ox_o.chk,
.omr.dap div.row:not(.disabled) > span.fa-stack.ox_o:hover {
  color: #4c8dce;
}

.omr.dap div.row > span.fa-stack.ox_x.chk,
.omr.dap div.row:not(.disabled) > span.fa-stack.ox_x:hover {
  color: #da4343;
}

.omr.dap .fa-stack-1x {
  color: #fff;
  font-size: 20px;
}

.omr input[type=text] {
}

.omr.dap .frmOMR input[type=text] {
  display: none;
  margin-left: 10px;
  width: 50px;
}

.omr.dap .frmOMR input[type=text].desc {
  display: inline-block;
}

.omr.dap .frmOMR .row button {
  display: none;
}

.omr input[type=file] {
  border: none;
  padding: 0px;
  font-size: 13px;
}

.table-omr span.sel,
.pages span.sel {
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  border: 1px solid #ccc;
  background-color: #fff;
  display: inline-block;
  text-align: center;
  margin-left: 3px;
  cursor: pointer;
  vertical-align: middle;
}

.table-omr span.sel {
  line-height: 25px;
  color: #999;
  width: 25px;
  height: 25px;
}

.table-omr span.sel.chk,
.omr span.sel.chk {
  background-color: #303030 !important; 
  color: #fff !important;
  border: 1px solid #303030 !important;
}

.omr div.row {
  text-align: left;
  padding: 5px;
  position: relative;
  white-space: nowrap;
  margin: 0px;
}

.omr.dap div.row {
  font-size: 13px;
}

.omr.dap div.row > span {
  padding: 10px 0px 0px;
  display: inline-block;
  vertical-align: top;
}

.omr div.row:nth-child(even) {
  background-color: #F5F5F5;
}

.omr div.row:after {
  clear: both;
  display: block;
  content: '';
}

.pages .omr {
  background-color: #fff;
}

.mode-mobile .omr div.head {
}

.mode-mobile .omr div.cmd {
  position: fixed;
  bottom: 10px;
  right: 15px;
}

.mode-mobile .omr div.cmd .btn-save {
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  display: inline-block;
  line-height: 40px;
  width: 40px;
  height: 40px;
  font-size: 18px;
  text-align: center;
  cursor: pointer;
  padding: 0px;
  -moz-box-shadow: 3px 0 5px rgba(12,12,12,0.5);
  -webkit-box-shadow: 3px 0 5px rgba(12,12,12,0.5);
  box-shadow: 2px 2px 5px rgba(12,12,12,0.5);
}

.mode-mobile .omr div.cmd .btn-save > span {
  display: none;
}

.mode-mobile .omr span.sel {
  line-height: 35px;
  color: #999;
  width: 35px;
  height: 35px;
  font-size: 18px;
  font-weight: bold;
  margin-left: 3px;
  display: inline-block;
  vertical-align: middle;
}

/*********** paper, book common ******************/
.pages .page .item .item-prop .btn-group {
  margin: 0px;
}

.pages > .score {
  position: absolute;
  z-index: 1;
  font-size: 50px;
  right: 30px;
  top: 40px;
  font-weight: bold;
  color: #f30808;
  border-bottom: 5px solid #ccc;
  width: 80px;
  text-align: center;
  padding: 10px;
}
.mode-mobile .pages > .score {
  display: none;
}

.pages > .score .name {
  margin-top: 20px;
  display: inline-block;
  text-align: center;
  font-size: 15px;
  color: #fff;
  padding: 2px 5px;
  background-color: #333;
}

#popup-tpl .desc {
  font-size: 12px;
  margin-bottom: 5px;
}

#popup-section .bxTpl,
#popup-tpl .bxTpl {
  padding-top: 5px;
}

.subtitle .btn {
  position: absolute;
  top: -6px;
  right: 0px;
}

.wraptplpreview {
  position: relative;
}

.wraptplpreview > .btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  background-color: transparent;
  border: none;
  opacity: 0.5;
}

.wraptplpreview > .btn-left {
  left: 0px;
}

.wraptplpreview > .btn-right {
  right: 0px;
}

.modal .extinfo {
}

.modal .extinfo .btn-toggle {
  color: #333;
  cursor: pointer;
  border-bottom: 1px dashed #ccc;
  padding: 5px 10px 10px;
}

.modal .extinfo .btn-toggle:hover {
  color: #333;
}

.modal .extinfo.expand .btn-toggle > i:before {
  content: '\f0d8';
}

.modal .extinfo.expand > .hide {
  display: block !important;
}

.bxTplPreview {
  overflow: hidden;
  min-height: initial;
}

.bxTplPreview .wrap {
  background-color: #fff;
}

/*
.bxTplPreview .item {
  font-size: 12px;
  position: relative;
  min-height: 300px;
}
*/

.bxTplPreview .item .fa-paperclip {
  display: none;
}

.bxTplPreview .item.active .fa-paperclip {
  display: inline-block;
}

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

.bxTplPreview .item.active > i {
  color: #428bca;
  position: absolute;
  top: 0px;
  left: 10px;
  font-size: 35px;
}

.bxTplPreview .wrap .item .cover {
  margin: 10px;
}

.bxTplPreview .wrap .item .cover {
  float: left;
  width: 280px;
  height: 300px;
  background-color: #EFEFEF;
  padding: 5px;
  text-align: center;
  cursor: pointer;
}

.bxTplPreview .item .icover {
  background-color: #F5F5F5;
  min-height: 300px;
  text-align: center;
  padding: 10px;
}

.bxTplPreview .item .icover img {
  width: 100%;
}

.bxTplPreview .item .cover img {
  height: 100%;
}

.bxTplPreview .wrap .item .info {
  margin: 10px 10px 10px 300px;
}

.bxTplPreview .item .desc {
  margin-top: 10px;
  padding-top: 10px;
}

.bxTplPreview .item .info > .thumb {
  margin: 10px 0px;
}

.bxTplPreview .item .info > .thumb > img {
  display: inline-block;
  height: 70px;
  border: 1px solid #eee;
  padding: 2px;
  cursor: pointer;
}

.bxTplPreview .item .info > .thumb > img:hover,
.bxTplPreview .item .info > .thumb > img.active {
  border: 1px solid #f3ac90;
}

.bxTplPreview h1.title {
  font-size: 17px;
  font-weight: 700;
  margin: 5px 0px 10px;
  padding: 5px 0px;
  border-bottom: 1px dashed #ddd;
  position: relative;
}

.bxTplPreview h1.title > time {
  position: absolute;
  right: 0px;
  font-size: 12px;
  font-weight: normal;
  line-height: 25px;
}

.bxTplPreview .imgs {
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  max-height: 400px;
}

.bxTplPreview .imgs > img {
  width: 50%;
  display: inline-block;
  margin-bottom: 10px;
  -moz-box-shadow: 2px 2px 5px rgba(12,12,12,0.5);
  -webkit-box-shadow: 2px 2px 5px rgba(12,12,12,0.5);
  box-shadow: 2px 2px 5px rgba(12,12,12,0.5);
}

.touch-slide .wrap {
  height: 100%;
  padding: 0;
  margin: 0;
  white-space: nowrap;

  /*
  transition-property: transform;
  transition-duration: 0.5s;
  transition-timing-function: ease-out;
  transform: translate(0, 0);
  */
}

.touch-slide .wrap .touch-item {
  white-space: nowrap;
  display: inline-block;
  padding: 5px;
  margin: 0px;
  height: 100%;
  transform: translate(0, 0);
  vertical-align: top;
}

.touch-slide .wrap .touch-item.avi {
  background-color: rgba(0, 0, 0, 0.8);
}

.touch-slide .wrap .touch-item video {
  max-width: 100%;
  position: absolute;
  left: 0px;
  top: 50%;
  transform: translateY(-50%);
}

/*********** library ***********************/

.mod_library .breadcrumb {
  line-height: 30px;
  position: relative;
}

.mod_library .breadcrumb > li + li::before {
  content: '\f105';
  font-family: FontAwesome;
}

.mod_library .breadcrumb > li.active span {
  font-weight: bold;
  color: #555;
}

.mod_library .breadcrumb .btn-sort {
  position: absolute;
  top: 10px;
  right: 10px;
}

.preview-pages {
  cursor: pointer;
}

body .preview-pages .page {
  text-align: center;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0px;
}

.epaper .pages .preview-pages .page.nopaper {
  height: 1000px;
  cursor: initial;
}

.preview-pages .page.nopaper .alert {
  color: #ccc;
  font-size: 17px;
  position: relative;
  top: 40%;
}

.preview-pages.touch-slide .page.nopaper .alert {
  font-size: 15px;
}

.preview-pages .page.nopaper .alert .btn-upload {
  margin-top: 10px;
  padding: 10px;
  background-color: #F9F9F9;
  color: #777;
  border: 1px dashed #ddd;
  cursor: pointer;
}

.preview-pages .wrap .page > img {
  display: inline-block !important;
}

.overpanel .preview-pages .page > img {
  display: none;
  max-width: 100%;
  max-height: 100%;
  background-color: #fff;
  position: relative;
  transform: translateY(-50%);
  top: 50%;
}

.overpanel .preview-pages {
  display: block !important;
  height: 100%;
  overflow: hidden;
}

form .items {
  list-style: none;
  margin: 0px;
  padding: 0px;
}

form .items > li.box {
  position: relative;
  padding: 0px;
  margin-bottom: 10px;
  min-height: initial;
  background-color: transparent;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  font-size: 13px;
  border: none;
}

form .items > li.box > .item {
  height: 70px;
  padding: 5px 5px 5px 45px;
  background-color: #fff;
}

form .items > li.box > .item:not(:first-child) {
  border-top: 1px dashed #1D2939;
}

form .items > li.box .base-prop {
  position: absolute;
  background-color: #fff;
  z-index: 1;
}

form .items > li.box .item.expand .base-prop {
  z-index: 3;
}

form .items > li.box .ext-prop {
  position: absolute;
  background-color: #fff;
  display: none;
  padding-right: 10px;
}

form .items > li.box .ctrlbar {
  position: absolute;
  top: 0px;
  right: 0px;
  width: 5px;
  color: #fff;
  height: 70px;
  line-height: 70px;
  background-color: #ccc;
  cursor: pointer;
  z-index: 10;
}

form .items > li.box .item.expand .ctrlbar {
  left: 0px;
}

form .items > li.box .item:hover {
}

form .items > li.box .item:hover .ctrlbar {
  width: 10px;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.3);
}

form .items > li.box .item:hover .ctrlbar:after {
  content: '\f100';
  font-family: FontAwesome;
}

form .items > li.box .item.expand:hover .ctrlbar:after {
  content: '\f101';
}

form .items > li.box .dropzone {
  text-align: center;
}

form .items > li.box .dropzone.active {
  background-color: rgba(255, 255, 255, 0.5);
}

form .items > li.box .dropzone.active::before {
  content: '+';
}

form .items > li.box .dropzone.hover {
  background-color: #c9302c;
}

form .items > li.newbox {
  padding: 0px;
  cursor: pointer;
  border: none;
  text-align: center;
  margin: 0px;
  min-height: 70px;
}


form .items > li.newbox a.btn {
  color: #fff;
  width: 80px;
  height: 80px;
  line-height: 60px;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  display: inline-block;
  -moz-box-shadow: 3px 0 5px rgba(12,12,12,0.5) !important;
  -webkit-box-shadow: 3px 0 5px rgba(12,12,12,0.5) !important;
  box-shadow: 2px 2px 5px rgba(12,12,12,0.5) !important;
}

form .items > li.newbox a.btn:hover {
  color: #000;
}

form .summary {
  margin-bottom: 10px;
  padding: 8px;
  background-color: rgba(255, 255, 255, 0.2);
}

form .items .desc {
  font-size: 12px;
  padding: 5px 0px;
  color: #ccc;
}

form .items > li .field {
  margin-bottom: 5px;
}

form .items > li label {
  margin-bottom: 0px;
  display: inline-block;
  margin-right: 5px;
  background-color: #eee;
  text-align: center;
  padding: 5px;
  vertical-align: top;
}

form .items > li span {
  opacity: initial;
}

form .items > li span.no {
  color: #000;
  width: 40px;
  height: 100%;
  cursor: move;
  text-align: center;
  padding: 10px 5px;
  font-size: 20px;
  font-weight: bold;
  position: absolute;
  top: 0px;
  left: 0px;
}

form .items > li .title {
  line-height: 13px;
  font-size: 13px;
  margin: 5px 0px;
}

form .items > li span.level {
  display: inline-block;
  color: #ccc;
}

form .items > li span.level > i {
  font-size: 14px;
  line-height: 14px;
  vertical-align: middle;
  cursor: pointer;
}

form .items > li .ex {
  margin-bottom: 5px;
  white-space: nowrap;
}

form .items > li select {
  display: inline-block;
  width: inherit;
  padding: 3px 2px;
  width: 80px;
  vertical-align: top;
}

form .items > li .hide-control {
  display: none;
}

form .items > li .ex input {
  height: 2.4em;
}

form .items > li .ex select {
  height: 2.4em;
}

form .items > li .ex > span {
  line-height: 1.9em;
  color: #999;
  width: 2em;
  height: 2em;
  font-size: 13px;
  font-weight: bold;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  border: 1px solid #ccc;
  background-color: #fff;
  display: inline-block;
  text-align: center;
  cursor: pointer;
  vertical-align: top;
}

form .items > li .ex > span.chk {
  background-color: #17A08C;
  color: #fff;
  border-color: #17A08C;
}

form .items > li input {
  padding: 3px 5px;
  display: inline-block;
  vertical-align: middle;
  height: 2.4em;
}

form .items > li .input-group {
}

form .items > li .input-group input {
  line-height: 1.7em;
}

form .items > li .input-group-btn .btn {
  padding: 3px 10px;
  line-height: 1.7em;
  height: 2.4em;
}

form .items > li .btn-remove {
  position: absolute;
  bottom: 0px;
  left: 15px;
  border: none;
  padding: 0px;
  font-size: 14px;
  color: #777;
}

form .items > li .btn-remove:hover {
  color: #337ab7;
}

.overpanel .content .imgs {
  position: relative;
}

.overpanel .content .imgs.wrapimgs {
  padding: 5px;
  background-color: #fff;
  display: inline-block;
}

.overpanel .content video {
  max-width: 90%;
  max-height: 100%;
}

.overpanel .content .imgs > img {
  background-color: #fff;
  display: inline-block;
  max-width: 90%;
  max-height: 90%;
}

.overpanel .content .imgs.wrapimgs > img {
  width: auto;
  display: block;
  max-width: 100%;
}

.overpanel .content .imgs > img:not(:first-child) {
  margin-top: 10px;
}

.overpanel .content .imgs > .sol {
  margin-top: 10px;
  border-top: 1px dashed #999;
}

.overpanel .msgbox {
  text-align: center;
  color: #c0ba90;
}

.overpanel .msgbox p {
  font-size: 13px;
  line-height: 17px;
  text-align: left;
  margin-top: 20px;
}

/*********** admin_code ***********************/

.mod_admin .path {
  line-height: 30px;
  margin-bottom: 10px;
  position: relative;
}

.mod_admin .path .label {
  position: absolute;
  display: inline-block;
  left: 10px;
  line-height: 32px;
  padding: 8px 0px;
  color: #999;
  font-size: 14px;
}

.mod_admin .breadcrumb {
  margin-bottom: 0px;
}

.mod_admin .breadcrumb > li + li::before {
  content: '\f054';
  font-family: FontAwesome;
}

.mod_admin .item-list .panel {
}

.codepanel .boxes {
  font-size: 0px;
}

.codepanel .box {
  min-height: 80px;
  margin: 8px 0px;
  font-size: 12px;
}

.codepanel .boxes .box {
  position: relative;
}

.codepanel .boxes .box h4 {
  margin: 0px 0px 5px;
  font-size: 15px;
}

.codepanel .boxes .box .checkbox {
  position: absolute;
  top: 5px;
  display: none;
}

.codepanel .boxes .box.sel {
  background-color: rgb(255, 247, 244);
  border-color: rgb(252, 195, 161);
}

.codepanel .boxes .box:hover {
  border-color: rgb(252, 195, 161);
}

.codepanel .boxes .box.sel .checkbox,
.codepanel .boxes .box:hover .checkbox {
  display: initial;
}

.codepanel .boxes .box .prop {
  padding-left: 20px;
}

.codepanel .boxes .box .option {
  position: absolute;
  top: 5px;
  right: 10px;
}

/*********** admin_ipool ***********************/

.ipoolpanel #fldbox {
  height: 100%;
  overflow: hidden;
}
.ipoolpanel .node {
  cursor: pointer;
}

.ipoolpanel .node circle {
  fill: #fff;
  stroke: steelblue;
  stroke-width: 1.5px;
}

.ipoolpanel .node text {
  font: 10px sans-serif;
}

.ipoolpanel .link {
  fill: none;
  stroke: #ccc;
  stroke-width: 1.5px;
}

.ipoolpanel .board {
  background-color:#fff;
}

.ipoolpanel .templink {
  fill: none;
  stroke: red;
  stroke-width: 1.5px;
}

.ipoolpanel .ghostCircle.show{
  display:block;
}

.ipoolpanel .ghostCircle, .activeDrag .ghostCircle{
  display: none;
}

.d3-context-menu {
  position: absolute;
  display: none;
  background-color: #f2f2f2;
  border-radius: 4px;

  font-family: Arial, sans-serif;
  font-size: 14px;
  min-width: 150px;
  border: 1px solid #d4d4d4;

  z-index:1200;
}

.d3-context-menu ul {
  list-style-type: none;
  margin: 4px 0px;
  padding: 0px;
  cursor: default;
}

.d3-context-menu ul li {
  padding: 4px 16px;
  font-size: 12px;
  cursor: pointer;
}

.d3-context-menu ul li.toggle {
  display: none;
}

.d3-context-menu.on ul li.toggle {
  display: block;
}

.d3-context-menu ul li:hover {
  background-color: #4677f8;
  color: #fefefe;
}

/*********** setting ***********************/


.mod_setting .list-group .list-group-item::after {
  content: '\f054';
  font-family: FontAwesome;
  position: absolute;
  right: 10px;
}

.mod_setting .list-group a > i {
  width: 25px;
  text-align: center;
}

.content-header {
  border-bottom: 1px solid #eee;
  margin-bottom: 10px;
}

.mod_setting .content-body {
}

.mod_setting .content-body .form-group {
  margin-right: 0px;
  margin-left: 0px;
}

.mod_setting .content-body .form-group .notification {
  font-size: 13px;
  color: #8899A6;
  margin-top: 10px;
}

/*********** admin ***********************/

.mod_admin .content-body {
  margin: 0px;
  padding: 0px;
  list-style: none;
}

.mod_admin .content-body > li {
  display: inline-block;
  text-align: center;
}

.mod_admin .content-body > li > div {
  display: inline-block;
  width: 120px;
  margin: 10px;
  overflow: hidden;
  position: relative;
}

.mod_admin .content-body > li > div > a {
  display: block;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
  background: rgba(255, 255, 255, 0.4) none repeat scroll 0% 0%;
  opacity: 0.5;
}

.mod_admin .content-body > li > div > a:hover {
  text-decoration: none;
  opacity: 0;
}

.mod_admin .content-body > li > div > span.thumb {
  display: block;
  line-height: 95px;
  height: 95px;
  font-size: 40px;
  text-align: center;
  background-color: #f5f5f5;
  border: 1px solid #eee;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

.mod_admin .content-body > li > div > h5 {
  text-align: center;
  margin: 10px 0px 0px;
}

/************* help **********************/

nav .breadcrumb {
  background-color: #F5F5F5;
  padding: 5px 10px;
  margin-bottom: 5px;
  text-align: left;
  line-height: 35px;
}

.mod_help .contentpanel {
  position: relative;
}

.mod_help .contentpanel .header {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100px;
  background: url(/skins/default/images/photos/bg_book2.png) left center no-repeat;
  background-size: cover;
  border-bottom: 1px solid #eee;
  text-align: center;
}

.mod_help .contentpanel .header > .searchbox {
  margin-top: 30px;
  display: inline-block;
  width: 50%;
}

.mod_help .contentpanel .header > .searchbox .form-control {
}

.mod_help .contentpanel .header > .searchbox .button {
}

.mod_help .contentpanel .header > .searchbox > .search-terms {
  white-space: nowrap;
}

.mod_help .contentpanel .header > .searchbox > .search-terms a {
  font-size: 11px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  margin: 5px;
}

.mod_help .contentpanel .header > .searchbox > .search-terms a:hover {
  text-decoration: none;
}

.mod_help .contentpanel .container {
  margin-top: 100px;
}

.mod_help .contentpanel .container > h1 {
  border-bottom: 2px solid #333;
  font-size: 25px;
  line-height: 50px;
  margin: 0px 0px 25px;
}

.mod_help .contentpanel .container > .menu {
}

.mod_help .contentpanel .container > .menu > div > div {
  border: 1px solid #d6dde1;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  padding: 10px;
  height: 150px;
  text-align: center;
  cursor: pointer;
  margin-bottom: 15px;
}

.mod_help .contentpanel .container > .menu > div > div:hover {
  background-color: #F5F5F5;
  color: #000;
}

.mod_help .contentpanel .container > .menu > div > div > i {
  font-size: 40px;
  margin-top: 10px;
  line-height: 40px;
  color: #1e2630;
}

.mod_help .contentpanel .container > .menu > div > div > h5 {
  font-size: 17px;
  margin: 0px;
  padding: 10px;
  color: #333;
}

.container .sidebar {
  padding-top: 10px;
  padding-bottom: 15px;
}

.container .sidebar > .title {
  margin: 0px;
  color: #333;
  line-height: 35px;
}

.container .sidebar > ul {
  list-style: none;
  margin: 0px;
  padding: 0px;
  line-height: 40px;
}

.container .sidebar > ul > li {
  cursor: pointer;
  padding: 0px 10px;
  position: relative;
}

.container .sidebar > ul > li:hover {
  color: #333;
  background-color: #f5f5f5;
}

.container .sidebar > ul > li.active {
}

.container .sidebar > ul > li.active > span {
  color: #000;
  font-weight: 500;
}

.container .sidebar > ul > li > span.badge {
  color: #fff;
  background-color: #D9534F;
  font-size: 10px;
  margin-bottom: 2px;
}

.container .sidebar > ul.menu > li > .mark {
  display: none;
  position: absolute;
  right: 5px;
  padding: 0px;
  line-height: 40px;
  background-color: transparent;
}

.container .sidebar > ul.menu > li.active > .mark {
  display: inline-block;
  color: #1479ea;
}

.container .taskbar {
  background-color: transparent;
  border-bottom: 2px solid #333;
}

.container .taskbar .title {
  font-size: 17px;
  font-weight: 600;
  color: #333;
  margin: 0px;
  line-height: 35px;
}

.container .taskbar .ddlcate .dropdown-goggle {
  padding: 0px;
  line-height: 35px;
}

.container .list > ul {
  list-style: none;
  padding: 0px;
  margin: 0px;
}

.container .list > ul > li {
  position: relative;
  line-height: 22px;
  padding: 10px 5px;
  cursor: pointer;
}

.container .list > ul > li:not(:first-child) {
  border-top: 1px solid #ddd;
}

.container .list > ul > li.sel,
.container .list > ul > li:hover {
  background-color: #f5f5f5;
}

.container .list > ul > li > input.checkbox {
  display: none;
  position: absolute;
  top: 5px;
  left: 8px;
  z-index: 2;
}

.container .list > ul > li.sel > input.checkbox,
.container .list > ul > li:hover > input.checkbox {
  display: inline-block;
}

.container .list > ul > li > .pic {
  -weibkit-border-radius: 50%;
  border-radius: 50%;
  border: 1px solid #aaa;
  padding: 2px;
  width: 50px;
  float: left;
  margin-right: 10px;
}

.container .list > ul > li > .info {
  position: relative;
  margin-top: 3px;
}

.container .list > ul > li > .info > .name {
}

.container .list > ul > li > .info > .date {
  position: absolute;
  right: 0px;
  font-size: 11px;
}

.container .list > ul > li > .option {
  position: absolute;
  top: 0px;
  right: 0px;
  display: none;
  height: 100%;
  font-size: 0px;
  overflow: hidden;
}

body.touchoff .container .list > ul > li:hover > .option {
  display: inline-block;
}

.container .list > ul > li > .option > a {
  height: 100%;
  display: inline-block;
  text-align: center;
  padding: 0px 10px;
  line-height: 70px;
  color: #fff;
  text-decoration: none;
  font-size: 12px;
  background-color: #f86b6b;
}

.container .list > ul > li.message {
  font-weight: 500;
  color: #333;
}

.container .list > ul > li.message.read {
  font-weight: normal; 
  color: #777;
}

.container .list > ul > li > .smry {
  margin: 0px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12px;
}

.container .list > ul > li.faq > .title {
  line-height: 40px;
  position: relative;
  font-size: 15px;
}

.container .list > ul > li.faq > .title > i.expand {
  position: absolute;
  line-height: 40px;
  right: 10px;
  font-size: 25px;
}


.modal .modal-header .message-info {
}

.modal .modal-header .message-info .pic {
  width: 50px;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  float: left;
  margin-right: 10px;
}

.modal .modal-header .message-info .name {
  padding-top: 7px;
}

.modal .modal-header .message-info .name > span {
  font-weight: 600;
  color: #333;
}

.modal .modal-header .message-info .date {
  font-size: 12px;
}

/*
.mod_help .contentpanel .body ul.index {
  border: 1px solid #DDD;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  margin-bottom: 10px;
}

.mod_help .contentpanel .body ul > li {
  line-height: 35px;
  position: relative;
}

.mod_help .contentpanel .body ul > li > a {
  display: block;
  padding: 2px 15px;
  color: #555;
}

.mod_help .contentpanel .body ul > li > a.page1:after {
  content: '\f054';
  position: absolute;
  right: 15px;
  font-family: FontAwesome;
}

.mod_help .contentpanel .body ul > li > a.active:hover,
.mod_help .contentpanel .body ul > li > a.active {
  color: #fff;
  background-color: #337AB7;
  z-index: 2;
  margin-left: -1px;
  margin-right: -1px;
  margin-top: -1px;
}

.mod_help .contentpanel .body ul.index > li:first-child > a.active {
  -moz-border-top-left-radius: 5px;
  -moz-border-top-right-radius: 5px;
  -webkit-border-top-left-radius: 5px;
  -webkit-border-top-right-radius: 5px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

.mod_help .contentpanel .body ul.index > li:last-child > ul.sindex > li:last-child > a.active {
  -moz-border-bottom-left-radius: 5px;
  -moz-border-bottom-right-radius: 5px;
  -webkit-border-bottom-left-radius: 5px;
  -webkit-border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}

.mod_help .contentpanel .body ul > li > a:focus, 
.mod_help .contentpanel .body ul > li > a:hover {
  text-decoration: none;
}

.mod_help .contentpanel .body ul > li > a:hover {
  background-color: #F5F5F5;
}

.mod_help .contentpanel .body ul > li > a > i {
  width: 20px;
  text-align: center;
}

.mod_help .contentpanel .body ul.index > li > a {
  position: relative;
}

.mod_help .contentpanel .body ul.index > li > a.section {
  border-top: 1px solid #ddd;
}

.mod_help .contentpanel .body ul.index > li > a.section:after {
  content: '\f067';
  position: absolute;
  right: 15px;
  font-family: FontAwesome;
}

.mod_help .contentpanel .body ul.index > li > a.section.expand:after {
  content: '\f068';
}

.mod_help .contentpanel .body ul.index {
}

.mod_help .contentpanel .body ul.sindex {
  display: none;
}

.mod_help .contentpanel .body ul.sindex > li > a {
  padding-left: 40px;
}

.mod_help .contentpanel .content .panel {
  background-color: transparent;
  -moz-border-radius: 0px;
  -webkit-border-radius: 0px;
  border-radius: 0px;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.mod_help .contentpanel .content .panel .panel-title {
  margin: 10px 0px;
}
*/


/************* common **********************/
.item-list ul.item {
  list-style: none;
  margin: 0px;
  padding: 0px;
  position: relative;
}

.item-list ul.item:after {
  clear: both;
  display: block;
  content: '';
}

.item-list ul.item > li {
}

.item-list ul.item > li.symbol {
  float: left;
  cursor: pointer;
}

.item-list ul.item > li.prop {
  margin-left: 75px;
  margin-right: 20px;
}

.item-list ul.item > li.prop > h4 {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin: 0px;
  padding-top: 5px;
}

.item-list ul.item > li.prop small {
  margin-right: 5px;
}

.item-list ul.item > li.option {
  position: absolute;
  right: 5px;
  top: 10px;
  z-index: 2;
}

.item-list ul.item > li.option .btn {
  padding: 0px;
  background: none;
  border: none;
  line-height: 1px;
}

/*********** library *****************/

.lib-content .loading {
  color: rgba(0, 0, 0, 0.3);
  padding: 10px 0;
  text-align: center;
}

.lib-content .lblpages {
  text-align: center;
  position: relative;
  border-bottom: 1px dashed #ccc;
  clear: both;
  margin-bottom: 20px;
}

.lib-content .lblpages span {
  display: inline-block;
  padding: 2px 10px;
  background-color: #333;
  color: #fff;
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translate(-50%, 0);
}

.lib-content section.panel:hover {
}

.lib-content section.panel:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.lib-content section.panel:hover .checkbox {
  display: initial;
}

.lib-content section.panel .checkbox {
  display: none;
  position: absolute;
  top: 5px;
  left: 8px;
  z-index: 2;
}

.lib-content ul.item {
  padding: 5px;
}

.lib-content ul.item > li {
}
  
.lib-content ul.item > li.header {
  margin-bottom: 5px;
}

.lib-content ul.item > li.header .code {
  display: inline-block;
  vertical-align: middle;
  padding: 2px;
  min-width: 60px;
  line-height: 15px;
  text-align: center;
  font-weight: bold;
  color: #fff;
}

.lib-content ul.item > li.header a {
  display: inline-block;
  line-height: 15px;
  vertical-align: bottom;
  color: #555;
}

.lib-content ul.item > li.symbol {
  float: none;
  width: auto;
  height: 105px; 
  padding: 0px;
  margin-right: 0px;
  overflow: hidden;
}

.lib-content ul.item > li.symbol:hover img {
  max-height: 100%;
}

.lib-content ul.item > li.symbol img {
  display: inline-block;
  max-width:100%;
  height: auto;
}

.lib-content .epaper ul.item > li.symbol img {
  background-color: #fff;
}

.lib-content ul.item > li.symbol .ico-type {
  font-size: 50px;
  line-height: 55px;
  vertical-align: bottom;
}

.lib-content .program ul.item > li.symbol .ico-type {
  color: rgb(0, 136, 122); 
}

.lib-content .cube ul.item > li.symbol .ico-type {
  color: #d9534f;
}

.lib-content ul.item > li.symbol .ion-ios-folder {
  color: #428bca;
}

.lib-content ul.item > li.prop {
  margin-left: 0px;
  margin-right: 0px;
  font-size: 11px;
  position: relative;
  white-space: nowrap;
}

.lib-content ul.item > li.prop > .info {
  position: absolute;
  top: -30px;
  right: 5px;
  display: inline-block;
  padding: 2px 10px;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
}

.lib-content ul.item:hover > li.option {
  display: initial;
}

.lib-content ul.item > li.option {
  display: none;
}

.lib-content ul.item > li.option .btn {
  width: 50px;
  height: 30px;
  padding: 5px 10px;
  text-align:right;
  color: #FFF;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.lstPerms {
  padding: 10px 0px 5px;
}

.lstPerms .header {
  background-color: #3b4760;
  color: #fff;
  margin-left: 0px;
  margin-right: 0px;
  padding: 5px 0px;
}

.lstPerms .body {
  height: 200px;
  overflow-y: auto;
}

.lstPerms .body .row {
  margin-left: 0px;
  margin-right: 0px;
  padding: 5px 0px;
  border-bottom: 1px solid #eee;
}

.lstPerms .body .row .target i {
  width: 20px;
  text-align: center;
}

/*********** library *****************/


/************ tree menu **************/
.tree,
.tree ul {
  margin:0 0 0 1em; /* indentation */
  padding:0;
  list-style:none;
  color:#369;
  position:relative;
}

.tree ul {margin-left:.5em} /* (indentation/2) */

.tree:before,
.tree ul:before {
  content:"";
  display:block;
  width:0;
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  border-left:1px solid;
}

.tree > li {
}

.tree > li > div {
  background-color: #1D2939;
  color: #fff;
}

.tree li {
  margin:0;
  padding:0 1em; /* indentation + .5em */
  line-height:2em; /* default list item's `line-height` */
  font-weight:bold;
  position:relative;
}

.tree li:before {
  content:"";
  display:block;
  width:10px; /* same with indentation */
  height:0;
  border-top:1px solid;
  margin-top:-1px; /* border top width */
  position:absolute;
  top:1em; /* (line-height/2) */
  left:0;
}

.tree li:last-child:before {
  background:white; /* same with body background */
  height:auto;
  top:1em; /* (line-height/2) */
  bottom:0;
}

/************ fieldbox ****************/
.fldbox {
  border: 1px solid #eee;
}

.fldbox .node {
  cursor: pointer;
}

.fldbox .node circle-blue {
  fill: #fff;
  stroke: steelblue;
  stroke-width: 1.5px;
}

.fldbox .node circle {
  fill: #FFA07A;
  stroke: #f00;
  stroke-width: 1px;
}

.fldbox .node text {
  font-size: 12px;
  font-weight: bold;
  font-family: "Apple SD 산돌고딕 Neo", "Apple SD Gothic Neo", 나눔고딕, NanumGothic, "맑은 고딕", "Malgun Gothic";
}

.fldbox .link {
  fill: none;
  stroke: #ccc;
  stroke-width: 1.5px;
}


/************ user profile ***********/

.bgHeader {
  background: url(/skins/default/images/menubak.jpg) left center no-repeat;
  background-size: cover;
  height: 200px;
  width: 100%;
  position: absolute;
  left: 0px;
  top: 0px;
}

.bgHeader > div {
  height: 100%;
  background:rgba(0, 0, 0, 0) -webkit-linear-gradient(rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.75) 100%) repeat scroll 0 0;
  background:rgba(0, 0, 0, 0) -o-linear-gradient(rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.75) 100%) repeat scroll 0 0;
  background:rgba(0, 0, 0, 0) -moz-linear-gradient(rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.75) 100%) repeat scroll 0 0;
  background:rgba(0, 0, 0, 0) linear-gradient(rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.75) 100%) repeat scroll 0 0;
}

.panel.question .content {
  cursor: pointer;
}

.contentpanel .content {
  max-width: 1000px;
  margin: 0 auto;
  position: relative;
}

.contentpanel .wrap800 {
  max-width: 800px;
  margin: 0 auto;
  position: relative;
}

.contentpanel .wrap1000 {
  max-width: 1000px;
  margin: 0 auto;
  position: relative;
}

.contentpanel .wrap800 .warning {
  margin-top: 100px;
  text-align: center;
  color: #aaa;
}

.contentpanel .wrap800 .warning > i {
  font-size: 50px;
}

.contentpanel .wrap800 .warning > .desc {
  font-size: 30px;
  line-height: 50px;
}

.wrapsch {
  text-align: right;
}

.wrapsch > .input-group {
  width: 150px;
  display: inline-table;
}

.wraplst table > thead > tr > th {
  text-align: center;
}

.wraplst table > tbody > tr > td {
  cursor: pointer;
}

/*
.lecHeader img.logo {
  width: 150px;
  height: 150px;
  margin: 0px;
  background-color: #FFF;
  position: absolute;
  left: 10px;
  bottom: -30px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  border: 3px solid #FFF;
}

.lecHeader h2.title  {
  color: #FFF;
  font-weight: 500;
  position: absolute;
  left: 180px;
  bottom: 5px;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}
*/

.contentheader {
  height: 190px;
  position: relative;
}

.contentheader .img-profile {
  position: absolute; 
  left: 20px;
  bottom: -50px;
  max-width: 150px;
  padding: 5px;
  background-color: rgba(255, 255, 255, 0.5);
}

.contentheader .title {
  position: absolute;
  left: 180px;
  bottom: 10px;
  color: #fff;
}

.contentheader .profile-name {
  margin-top: 0px;
  margin-bottom: 0px;
  font-size: 28px;
  line-height: 35px;
}

.contentheader .profile-name > i {
  color: #9FFF00;
}

.contentheader .title .alias {
  font-size: 14px;
}

.contentheader .summary {
  position: absolute;
  right: 0px;
  bottom: 5px;
  color: #fff;
  padding: 5px 20px;
  /*background-color: rgba(0, 0, 0, 0.15);*/
}

.contentheader .summary > li {
  width: 80px;
  text-align: center;
  cursor: pointer;
}

.contentheader .summary > li h2 {
  margin: 5px 0;
}

.content-left .info {
  margin-top: 60px;
  margin-bottom: 10px;
  font-size: 13px;
}

.content-left .info i {
  width: 20px;
  text-align: center;
}

.content-left .btn-reqbuddy {
  width: 100%;
  margin: 10px 0;
  font-weight: bold;
}

.content-left .info div {
  line-height: 25px;
}

.content-left .mpanel {
  margin: 5px 0px;
}

.content-left .mpanel .md-title > i {
  color: #777;
}

.content-left .mpanel .mpanel-body {
  background-color: #f0f0f0;
  min-height: 200px;
}

/************ file upload ************/
.fileUpload {
  position: relative;
  overflow: hidden;
  margin-bottom: 10px;
}

.fileUpload input#upload {
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
  padding: 0;
  font-size: 20px;
  cursor: pointer;
  opacity: 0;
  filter: alpha(opacity=0);
}

.cropContainer {
  min-height: 100px;
  font-size: 0px;
  line-height: 0;
  position: relative;
  -moz-user-select: none;
  direction: ltr !important;
  background-color: #F5F5F5;
}

.jcrop-holder {
  margin: 0 auto;
}

.jcrop-keymgr {
  opacity: 0;
}

/************ overlay ****************/
.overlay {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 10000;
  background: #000;
  opacity: 0;
  display: none;
  -webkit-transition: opacity 0.5s, visibility 0s 0.5s;
  transition: opacity 0.5s, visibility 0s 0.5s;
}

.mloading {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 10000;
  background: rgba(0,0,0,0.1);
  -webkit-transition: opacity 0.5s, visibility 0s 0.5s;
  transition: opacity 0.5s, visibility 0s 0.5s;
}

.mloading .infobx {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  font-size: 12px;
}

.mloading .infobx.white {
  background-color: rgba(255, 255, 255, 0.5);
}

.loading {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 10000;
  background: rgba(0,0,0,0.5);
  -webkit-transition: opacity 0.5s, visibility 0s 0.5s;
  transition: opacity 0.5s, visibility 0s 0.5s;
}

.loading .infobx {
  width: 250px;
  padding: 10px;
  background-color: rgba(255, 255, 255, 0.8);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  font-size: 12px;
}

.loading .infobx.circle {
  width: 260px;
  background-color: #fff;
}

.loading .infobx .desc {
  margin: 5px 0px 0px 0px;
  font-size: 11px;
  text-align: justify;
}

.loading .infobx .progress-bar span {
  display: none;
}

.dropdown-menu {
  font-size: 12px;
}

.modal-footer .dropdown-menu > li:hover {
  background-color: #EFEFEF;
}

/* Effects */
.open .overlay {
  opacity: 1;
  display: initial;
  -webkit-transition: opacity 0.5s;
  transition: opacity 0.5s;
}

/* Overlay closing cross */
.overlay .closex {
  position: absolute;
  right: 10px;
  top: 10px;
  padding: 0;
  font-size: 30px;
  background: transparent;
  border: none;
  color: #fff;
  opacity: 0.5;
  z-index: 10001;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}

.overlay.itemview .closex{
  width: 50px;
  height: 50px;
}

.overlay.itemview .closex:hover {
  opacity: 1;
}

.overlay.itemview .closex::before {
  content: '';
  position: absolute;
  left: 0%;
  width: 100%;
  height: 2px;
  background: #fff;
  transform: rotate(45deg);
  z-index: 1;
}

.overlay.itemview .closex::after {
  content: '';
  position: absolute;
  left: 0%;
  width: 100%;
  height: 2px;
  background: #fff;
  transform: rotate(-45deg);
  z-index: 1;
}

.overlay.itemview:hover > a.navi {
  display: inline-block;
}

.overlay.itemview > a.navi {
  position: fixed;
  top: 50%;
  opacity: 0.5;
  transform: translateY(-50%);
  color: #777;
  font-size: 30px;
  text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.8);
  display: none;
}

.overlay.itemview > .btn-add {
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  background-color: #F0AD4E;
  border-color: #EEA236;
  border-radius: 50%;
  display: inline-block;
  line-height: 50px;
  width: 50px;
  height: 50px;
  color: #fff;
  font-weight: normal;
  font-size: 20px;
  text-align: center;
  cursor: pointer;
  padding: 0px;
  -moz-box-shadow: 3px 0 5px rgba(12,12,12,0.5);
  -webkit-box-shadow: 3px 0 5px rgba(12,12,12,0.5);
  box-shadow: 2px 2px 5px rgba(12,12,12,0.5);
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 10;
}

/*
.overlay.itemview > .btn-add{
  width: 40px;
  height: 50px;
  position: absolute;
  right: 75px;
  top: 10px;
  background: transparent;
  border: none;
  color: #fff;
  opacity: 0.5;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}

.overlay.itemview > .btn-add:hover {
  opacity: 1;
}

.overlay.itemview > .btn-add::before {
  content: '';
  position: absolute;
  left: 0%;
  width: 100%;
  height: 2px;
  background: #fff;
  z-index: 1;
}

.overlay.itemview > .btn-add::after {
  content: '';
  position: absolute;
  left: 0%;
  width: 100%;
  height: 2px;
  background: #fff;
  transform: rotate(-90deg);
  z-index: 1;
}
*/

.overlay.itemview > a.navi:hover {
  color: #fff;
}

.overlay.itemview > a.btnPrev {
  left: 5%;
}

.overlay.itemview > a.btnNext {
  right: 5%;
}

.overlay .mnuback.title {
  position: absolute;
  top: 10px;
  left: 5px;
  font-size: 17px;
  color: #ccc;
  z-index: 1;
  text-decoration: none;
}

.mod_paper .overlay .closex {
  top: 13px;
}

.overlay .body {
  position: relative;
  height: 100%;
  width: 100%;
  /*
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  */
  white-space: nowrap;
  text-align: center;
}

body .overlay .body.autoscroll {
  overflow-x: hidden;
  overflow-y: auto;
}

.overlay .body .imgs {
  background-color: #fff;
  display: inline-block;
  margin: 10px;
  padding: 20px;
  vertical-align: middle;
  text-align: justify;
  max-width: 90%;
}

.overlay .body .imgs img {
  max-width: 100%;
  height: auto;
}

.overlay .body::before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

.overlay .body .wrapzoom {
  height: 100%;
}

.overlay .body .wrapzoom:before {
  content: "";
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

.overlay .body .wrapzoom img {
  max-width: 100%;
  max-height: 100%;
}

.overlay .body .imgs > div:not(:first-child) {
  margin-top: 10px;
}

/***********/


.overpanel:hover .cmdbar {
  opacity: 1;
}

.overpanel .cmdbar {
  position: fixed;
  background-color: rgba(0, 0, 0, 0.7);
  left: 0px;
  bottom: 0px;
  color: #B2B2B2;
  font-size: 12px;
  position: absolute;
  opacity: 0;
  height: 30px;
  line-height: 30px;
  width: 100%;
  color: #fff;
  padding-left: 350px;
  margin-left: -350px;
}

.overpanel .cmdbar a {
  color: #fff;
  margin: 0 5px;
}

.overpanel .cmdbar > li {
  padding: 0 5px;
}

.overpanel .cmdbar .title {
  font-weight: 700;
}

.overpanel .overright .property > .media {
  padding: 5px;
  margin: 0px;
}

.overpanel .overright .property > .media .img-circle {
  width: 50px;
}

.overpanel .overright .property > .media strong {
  display: block;
  padding: 4px 0;
  font-size: 15px;
}

.overpanel .overright .property > .media {
  position: relative;
  overflow: visible;
}

.overpanel .overright .property > .media a.text-muted {
  color: #999;
}

.overpanel .overright .property > .media .option {
  position: absolute;
  top: -5px;
  right: 0px;
}

.overpanel .overright .property > .media .option .btn {
  padding: 0 5px;
  background: none;
  border: none;
  line-height: 1px;
}

.overpanel .overright .wrapinfo .media {
  padding: 5px;
}

.overpanel .overright .wrapinfo .media .img-circle {
  width: 35px;
}

.overpanel .overright .prop {
  font-size: 12px;
  min-height: 50px;
  padding: 5px;
  margin: 0px;
  background-color: rgba(255, 255, 255, 0.1);
}

.overpanel .overright .prop label {
  color: #aaa;
  width: 50px;
}

.sidepanel .nav {
  box-shadow: 0px 2px 0px rgba(255, 255, 255, 0.1);
  margin-bottom: 10px;
}

.sidepanel .nav > li {
}

.sidepanel .nav > li > a {
  padding: 5px 15px;
  background-color: transparent;
  font-size: 13px;
  font-weight: normal;
  color: #ccc;
}

.sidepanel .nav > li > a:hover {
  color: #eee;
  box-shadow: 0px 2px 0px #eee;
}

.sidepanel .nav > li.active > a {
  font-weight: bold;
  background-color: transparent;
  color: #fff;
  box-shadow: 0px 2px 0px #428BCA;
}

.sidepanel .tab-pane {
  padding: 5px;
  margin-bottom: 5px;
}

.sidepanel .tab-pane.extract {
  margin-bottom: 50px;
}

.leftpanel .sidepanel .tab-pane {
  padding: 0px;
}

.overpanel .overright .postbx {
  margin: 0px;
}

.overpanel .overright .postbx .panel-footer {
  padding: 5px;
  border: none;
}

.overpanel #comments .filter {
  padding: 0 5px;
}

.overpanel #comments a.text-muted {
  color: #fff;
}

.overpanel #comments a.text-danger {
  color: #c29c84;
}

.overpanel #comments .filter > li {
  line-height: 30px;
  font-size: 12px;
}

.overpanel #comments .panel-comments {
  margin-bottom: 0px;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  background-color: rgba(255, 255, 255, 0.1);
}

.overpanel #history {
  background-color: rgba(255, 255, 255, 0.1);
}

.overpanel #report {
  background-color: rgba(255, 255, 255, 0.1);
}

.overpanel #report .summary {
  white-space: nowrap;
}

.overpanel #report .summary .box {
  display: inline-block;
  width: 48%;
  margin-left: 5px;
  min-height: initial;
  text-align: center;
  color: #fff;
  background-color: transparent;
  border: none;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.overpanel #report .summary .box h3 {
  margin: 10px 0px 0px;
  text-align: center;
}

.overpanel #report .chart .qtchart {
  margin: 0 5px;
}

.overpanel #report h5.title {
  font-size: 12px;
}

/************ actionpanel ****************/
.actionpanel {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  display: none;
  background-color: #e4e7ea;
  opacity: 0;
  -webkit-transition: opacity 0.5s, visibility 0s 0.5s;
  transition: opacity 0.5s, visibility 0s 0.5s;
  z-index: 101;
}

.action > .actionpanel {
  display: block;
  opacity: 1;
  -webkit-transition: opacity 0.5s;
  transition: opacity 0.5s;
}

.actionpanel .headerbar .header-left {
  max-width: 70%;
}

.actionpanel .headerbar .header-left a.page-title {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  width: 100%;
  margin-left: 0px;
}

.actionpanel .headerbar .header-left a.page-title:hover,
.actionpanel .headerbar .header-left a.page-title:focus {
  background-color: transparent;
}

.actionpanel .headerbar {
  background-color: #2A2A2A;
}

.actionpanel .headerbar .headermenu .btn-default {
  background-color: transparent !important;
}

.actionpanel .overbody {
  padding: 60px 10px 10px;
  margin: 0px;
  height: 100%;
}

.actionpanel .overbody > .content {
  height: 100%;
  background-color: #fff;
}

.actionpanel .headerbar .title::before {
  content: '통합분석';
}

.actionpanel.applicant .headerbar .title::before {
  content: '응시자리스트';
}

.actionpanel .headerbar .btn-report,
.actionpanel.applicant .headerbar .btn-applicant {
  display: none;
}

.actionpanel.applicant .headerbar .btn-report {
  display: inline-block; 
}

/************ oversection ****************/
.oversection {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  display: none;
  opacity: 0;
  -webkit-transition: opacity 0.5s, visibility 0s 0.5s;
  transition: opacity 0.5s, visibility 0s 0.5s;
}

.over > .sections > .oversection:last-child {
  display: block;
  opacity: 1;
  -webkit-transition: opacity 0.5s;
  transition: opacity 0.5s;
  z-index: 102;
}

.oversection .headerbar {
  padding: 0px 5px;
}

.oversection .headerbar .btn {
  border: none;
}

.oversection .overbody {
  padding-top: 60px;
}

.oversection .overbody > .contentpanel {
  background-color: #FFF;
  padding: 10px;
  margin: 0px 10px 10px 10px;
  position: relative;
  height: 100%;
}

.oversection .overright {
  background-color: #3b414a;
  display: none;
  width: 320px;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 102;
  color: #FFF;
  padding: 5px;
  -moz-box-shadow: -3px 0 5px rgba(12,12,12,0.05);
  -webkit-box-shadow: -3px 0 5px rgba(12,12,12,0.05);
  box-shadow: -3px 0 5px rgba(0,0,0,0.5);
  overflow-x: hidden;
}

/************ overpanel ****************/
.overpanel {
  /*
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  overflow: auto;
  display: none;
  opacity: 0;
  -webkit-transition: opacity 0.5s, visibility 0s 0.5s;
  transition: opacity 0.5s, visibility 0s 0.5s;
  -webkit-overflow-scrolling: touch;
  */
  height: 100%;
  background-color: rgba(0,0,0,0.85);
  text-align: center;
}

.overpanel.reportview {
  background-color: transparent;
}

.overpanel.center::before {
  display: inline-block;
  vertical-align: middle;
  content: " ";
  height: 100%;
  margin-right: -4px;
}

.over > .panels > .overpanel:last-child {
  display: block;
  opacity: 1;
  -webkit-transition: opacity 0.5s;
  transition: opacity 0.5s;
}

.overright .closex {
  position: absolute;
  right: 10px;
  top: 13px;
  padding: 0;
  font-size: 30px;
  background: transparent;
  border: none;
  color: #fff;
  opacity: 0.5;
  z-index: 1;
}

.overpanel:hover > a.navi {
  display: inline-block;
}

.overpanel > a.navi {
  position: fixed;
  top: 50%;
  opacity: 0.5;
  transform: translateY(-50%);
  text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.8);
  color: #777;
  font-size: 30px;
  display: none;
}

.overpanel > a.navi:hover {
  color: #fff;
}

.overpanel > a.btnPrev {
  left: 5%;
}

.overpanel > a.btnNext {
  right: 5%;
}

.overpanel .headerbar .header-left {
  max-width: 65%;
  position: absolute;
}

.overpanel .headerbar .header-left a.page-title {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  width: 100%;
  margin-left: 0px;
}

.overpanel .headerbar .header-left a.page-title:hover,
.overpanel .headerbar .header-left a.page-title:focus {
  background-color: transparent;
}

.overpanel .headerbar {
  background-color: #202020;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  opacity: 0.8;
  white-space: nowrap;
}

.overpanel .headerbar .headermenu {
  /*display: none*/;
}

.mod_paper .overpanel .headerbar .headermenu {
  display: initial;
}

.overpanel .headerbar .headermenu .btn-default {
  background-color: transparent !important;
  border: none;
}

.overpanel .overbody {
  padding: 50px 0px 0px;
  margin: 0px auto;
  vertical-align: middle;
  display: inline-block;
  text-align: left;
}

.overpanel .overright {
  /*background-color: #1d2939;*/
  background-color: #3b414a;
  display: none;
  width: 320px;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 102;
  color: #FFF;
  padding: 5px;
  -moz-box-shadow: -3px 0 5px rgba(12,12,12,0.05);
  -webkit-box-shadow: -3px 0 5px rgba(12,12,12,0.05);
  box-shadow: -3px 0 5px rgba(0,0,0,0.5);
  overflow-x: hidden;
}

.ibg {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 101;
  background: rgba(0,0,0,0.5);
  display: none;
}

body > .bg {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 101;
  background: rgba(0,0,0,0.5);
}

body > .postbx {
  position: fixed;
  min-width: 300px;
  max-width: 320px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 102;
}

.oversection .overright > div,
.overpanel .overright > div {
  display: none;
}

.panel-expand-right .overright {
  height: 100%;
  display: block;
  overflow-y: auto;
  position: fixed;
  text-align: left;
}

.bgon > .ibg, 
.mnu-expand > .ibg, 
.mnu-expand-right > .ibg,
.panel-expand-right > .ibg {
  display: block;
}

.nobg .ibg {
  display: none;
}

.panel-expand-right .overright div.active {
  display: block;
}

.overpanel .viewport {
  text-align: center;
}

.overpanel .content {
  margin: 0px 10px 10px 10px;
  text-align: center;
}

.overpanel .overbody[type='paper'] .content {
  text-align: left;
}

.sidepanel form .input-sm {
  line-height: 19px;
}

.sidepanel form .btn-sm {
  padding: 6px 10px;
}

form .form-header {
  border-bottom: 1px solid #777;
  margin-bottom: 10px;
}

form .form-footer {
  border-top: 1px solid #777;
  margin-top: 10px;
  padding: 10px 0;
  text-align: center;
}

.sidepanel .form-header .subject {
  margin: 5px 0;
}

.sidepanel form .form-group {
  margin-left: 0px;
  margin-right: 0px;
  color: #555;
  font-size: 12px;
}

.sidepanel form.frmReport .form-group {
  font-size: 13px;
}

.sidepanel form.frmReport .form-group .control-label {
  font-size: 14px;
}

.sidepanel form.frmReport .form-body h5 {
  font-size: 13px;
}

.sidepanel form.frmReport .form-blk {
  margin: 0px 5px;
  font-size: 12px;
  color: #eee;
}

.sidepanel form.frmReport .form-blk > li {
  line-height: 25px;
}

.sidepanel form.frmReport .form-blk .desc {
  font-size: 11px;
  color: #cedaff;
  line-height: normal;
}

.sidepanel form.frmReport .form-group{
  color: #eee;
  font-size: 12px;
}

.sidepanel form .control-label {
  color: #ccc;
  font-size: 12px;
}

.sidepanel form .form-control {
  font-size: 12px;
}

.input-group-btn .btnddl.btn-sm {
  padding: 6px 5px;
}

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

.sidepanel form .checkbox-inline, 
.sidepanel form .radio-inline {
  /*padding-top: 0px;*/
  line-height: 25px;
  color: #fff;
}

.overpanel .modalbg {
  z-index: 103;
}

.modalbg .progress {
  width: 150px;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.ibg.on {
  display: inline-block;
}

.ibg .msgbx {
  width: 200px;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 5px 10px;
  background-color: rgba(255, 255, 255, 0.8);
}

.ibg .msgbx .msg {
  padding-bottom: 5px;
  font-size: 12px;
}

.ibg .msgbx .progress {
  background-color: #ccc;
}

.frmFile .uploadbox {
  margin-left: -5px;
  margin-right: -5px;
}

.col-xs-3.control-label {
  /*padding-top: 9px;*/
}

.modal .form-group .checkbox-inline {
  padding-top: 9px;
}

/************ test ****************/

.sidepanel .infobx {
  background-color: rgba(255, 255, 255, 0.1);
  padding: 5px;
  /*padding: 5px 40px 5px 5px;*/
  margin-bottom: 5px;
  position: relative;
}

.sidepanel .infobx .btn-group {
  width: 100%;
  margin-bottom: 0px;
}

.sidepanel .infobx .btn-group .btn,
.sidepanel .infobx .btn-group .btn-test {
  width: 100%;
  text-align: left;
  font-size: 13px;
  border-radius: unset;
  color: #333;
  position: relative;
  background-color: #eee;
}

.sidepanel .infobx .btn-group .btn > i,
.sidepanel .infobx .btn-group .btn-test > i {
  position: absolute;
  top: 10px;
  right: 10px;
}

.sidepanel .infobx .btn-group .dropdown-menu {
  width: 100%;
  color: #333;
}

.sidepanel .infobx .btn-group .dropdown-menu > li {
  padding: 5px;
  position: relative;
  cursor: pointer;
}

.sidepanel .infobx .btn-group .dropdown-menu > li:hover {
  background-color: #EFEFEF;
}

.sidepanel .infobx .btn-group .dropdown-menu > li .badge {
  position: absolute;
  right: 5px;
}

.sidepanel .infobx .btn-season-add {
  position: absolute;
  right: 5px;
}

.sidepanel .infobx .prop {
  font-size: 12px;
  padding: 5px;
}

.sidepanel .cmds {
  margin: 0px 0px 10px;
  padding: 5px 0px;
  background-color: #343E4D;
}

.sidepanel .cmds > div {
  padding-left: 5px;
  padding-right: 5px;
}

.sidepanel .extract .cmds .tcnt {
  line-height: 35px;
}

.sidepanel .smry {
  margin: 5px;
  font-size: 13px;
  line-height: 20px;
}

.sidepanel .smry b {
  color: #febf6d;
  padding: 3px;
}

.cubeview .sidepanel .books .smry {
  background-color: rgba(255, 255, 255, 0.1);
  margin: 0px;
  padding: 5px;
}

.sidepanel .profile {
  color: #ccc;
  white-space: nowrap;
}

.sidepanel .profile > input[type="checkbox"] {
  display: none;
  position: absolute;
  top: -5px;
  left: 5px;
}

.sidepanel .profile .cover,
.sidepanel .profile .thumb {
  float: left;
  cursor: pointer;
}

.sidepanel .profile .cover {
  width: 30px;
  margin-right: 10px;
}

.sidepanel .profile .thumb.fa-file-text {
  line-height: 40px;
  text-align: center;
  font-size: 30px;
  color: #fff;
}

.sidepanel .profile .title,
.sidepanel .profile .name {
  color: #fff;
  font-size: 13px;
  font-weight: normal;
}

.sidepanel .profile .info {
  padding-top: 5px;
  font-size: 11px;
}

.sidepanel .profile .info .desc {
  margin-right: 5px;
}

.sidepanel.wide .profile .info .desc {
  display: none;
}

.sidepanel .wshow {
  display: none;
}

.sidepanel.wide .wshow {
  display: initial;
}

.qnos .no {
  width: 20px;
  height: 20px;
  display: inline-block;
  overflow: hidden;
  line-height: 20px;
  text-align: center;
  -webkit-border-radius: 5px;
  font-size: 11px;
  border: 1px solid #ddd;
  border-radius: 5px;
  background-color: #fff;
  color: #000;
  margin-bottom: 5px;
  cursor: pointer;
}

.qnos .no:hover {
  background-color: #eee;
  border: 1px solid #000;
}

.qnos .no.o {
  background-color: #337fd5;
  color: #fff;
  border-color: #337fd5;
}

.qnos .no.x {
  background-color: #d53833;
  color: #fff;
  border-color: #d53833;
}


.sidepanel .wraplist {
  margin: 5px 0px;
  font-size: 12px;
}

.sidepanel .wraplist .row {
  position: relative;
  padding: 10px 0px;
  border-bottom: 1px solid #ccc;
  margin: 0px;
}

.cubeview .sidepanel .wraplist .books > .row:first-child {
  border-top: 2px solid #ccc;
}

.sidepanel .wraplist .row.clinic {
  border-bottom: 1px dashed #ccc;
  margin: 0px;
}

.sidepanel .wraplist .row.clinic.type8363 .fa-file-text {
  color: #fff;
}

.sidepanel .wraplist .row.clinic.type8363 .info .title::before {
  content: "[유사]";
}

.sidepanel .wraplist .row.clinic.type8364 .fa-file-text {
  color: #fff870; /*fff870*/
}

.sidepanel .wraplist .row.clinic.type8364 .info .title::before {
  content: "[취약]";
}

.sidepanel .wraplist .row.header {
  background-color: rgba(255, 255, 255, 0.1);
  font-size: 11px;
}

.sidepanel .wraplist > .row {
  cursor: pointer;
}

.sidepanel .wraplist .row.header .col-xs-8 {
  padding-right: 10px;
}

.sidepanel .wraplist .row .col-xs-8 {
  padding-right: 2px;
}

.sidepanel .wraplist .row .col-xs-2 {
  text-align: center;
  padding-left: 2px;
  padding-right: 2px;
}

.sidepanel .wraplist .row .rate {
  color: #fff;
}

.sidepanel .wraplist .row span.rate,
.sidepanel .wraplist .row .rate > span {
  font-size: 17px;
  font-weight: 700;
  line-height: 35px;
}

.sidepanel .wraplist .btn-target {
  color: #fff;
  text-decoration: none;
}

.sidepanel .wraplist .users {
  display: none;
}

.sidepanel .wraplist .users .row.test {
  background-color: #1b1d24;
}

.sidepanel .wraplist .users.group {
  background-color: rgba(0, 0, 0, 0.3);
}

.sidepanel .wraplist .users.list,
.sidepanel .wraplist .users.expand {
  display: inherit;
}

.sidepanel .wraplist .score {
  color: #f0e9dc;
  font-size: 20px;
  line-height: 40px;
}

.sidepanel .wraplist span.clinic {
  color: #f0e9dc;
  font-size: 20px;
  line-height: 40px;
}

.sidepanel .wraplist span.clinic.on {
  cursor: pointer;
}

.sidepanel .wraplist .smsok {
  color: #8be456;
}

.sidepanel .wraplist .option {
  position: absolute;
  top: 0px;
  right: 0px;
  height: 100%;
  font-size: 0px;
  display: none;
}

.sidepanel .wraplist .optionbar {
  position: absolute;
  top: 0px;
  right: 0px;
  height: 100%;
  width: 10px;
  background-color: rgba(255, 255, 255, 0.2);
  font-size: 10px;
  display: none;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.sidepanel .wraplist .row.open .option {
  display: inline-block;
}

.sidepanel .wraplist .row.open .optionbar {
  display: none;
}

.sidepanel .wraplist .row:hover .optionbar {
  display: flex;
}

.sidepanel .wraplist > .row.sel {
  background-color: #405671;
}

.sidepanel .wraplist > .row .ico-expand {
  width: 15px;
  text-align: center;
  position: absolute;
  left: 0px;
  line-height: 1.2em;
}

.sidepanel .wraplist .users .row.sel {
  background-color: #36485c;
}

.sidepanel .wraplist > .row.expand .ico-expand::before {
  content: '\f0d7';
}

.sidepanel .wraplist .row.sel .profile > input[type="checkbox"] {
  display: initial;
}

.sidepanel .wraplist .row:hover .profile > input[type="checkbox"] {
  display: initial;
}

.sidepanel .wraplist .option > a {
  height: 100%;
  width: 50px;
  display: inline-block;
  text-align: center;
  color: #fff;
  text-decoration: none;
  font-size: 12px;
  position: relative;
}

.sidepanel .wraplist .option > a::before {
  content: " ";
  display: inline-block;
  height: 100%;
  width: 1%;
  vertical-align: middle;
}

.sidepanel .wraplist .option > a:first-child {
  background-color: #f8bb61;
}

.sidepanel .wraplist .option > a:last-child {
  background-color: #f86b6b;
}

.sidepanel .wraplist .option > a i {
  margin-right: 3px;
}

.sidepanel .search .wrapbody {
  padding: 5px;
}

.sidepanel .search .frmSearch .btn-search {
  margin-top: 0px;
}

.sidepanel .search .results {
  padding-top: 5px;
}

.sidepanel .search .results .smry {
  margin: 5px 0px;
  font-size: 12px;
  color: #eee;
}

.sidepanel .search .results h5 {
}

.sidepanel .search .results .buddy .info .prop > a.name {
  color: #fff;
}

.sidepanel .search .results .buddy:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.sidepanel .search .results .buddy .btn-reqbuddy {
  margin-top: 14px;
}

.sidepanel .search .resrc {
  margin-left: 0px;
  margin-right: 0px;
  padding: 5px 0px;
  cursor: pointer;
}

.sidepanel .search .resrc:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.sidepanel .search .resrc .thumb {
  position: absolute;
  top: 3px;
}

.sidepanel .search .resrc .info {
  margin-left: 35px;
  font-size: 12px;
}

.sidepanel .search .resrc .info .title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidepanel .search .resrc .info .title a {
  color: #f9f9da;
  text-decoration: none;
}

.sidepanel .search .resrc .info > .date {
  font-size: 11px;
}

.sidepanel .search .resrc .btn {
  margin-top: 3px;
  padding: 2px 10px;
  font-size: 12px;
}

/**************************** acitivy *********************/

#home_activity .more {
  text-align: center;
  background-color: #f5f5f5;
  padding: 10px;
  border: 1px solid #eee;
  cursor: pointer;
}

#home_activity .more:hover {
  color: #000;
}

/**************************** store *********************/

.bar {
  /*background-color: rgba(0, 0, 0, 0.1);*/
  padding: 0 5px !important;
  margin-bottom: 7px !important;
  line-height: 45px;
}

.bar > li {
  float: left;
}

.bar > li .title {
  margin: 0px;
  display: inline-block;
}

.bar > li .title b {
  color: #d9534f;
}

.bar > li.filter {
  float: right;
}

.bar .btn-group {
  margin: 5px 0;
}

.bar .btn-cate {
  background: transparent;
  font-size: 16px;
  font-weight: bold;
  padding: 5px 0;
}

.mainpanel2 .listpanel {
  margin: 0px 10px 10px 10px;
}

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

.storepanel .row .col {
  margin-bottom: 15px;
}

.storepanel .item-list .item {
  cursor: pointer;
  background-color: #fff;
}

.storepanel .item-list .item:hover .cover .bg {
  display: block;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 1;
}

.storepanel .item-list .item > .cover {
  position: relative;
  height: 200px;
  overflow: hidden;
  background-color: #fcfcfc;
}

.storepanel .item-list .item > .cover .bg {
  position: absolute;
  top: 0;
  left: 0;
  display: none;
}

.storepanel .item-list .item > .cover > .thumb {
  width: 100%;
}

.storepanel .item-list .item > .cover > .img-circle {
  position: absolute;
  left: 10px;
  bottom: -30px;
}

.storepanel .item-list .item > .cover > .redbox {
  position: absolute;
  right: 0px;
  bottom: 0px;
  display: inline-block;
  width: 50px;
  height: 20px;
  line-height: 20px;
  background-color: rgba(255, 0, 0, 0.8);
  font-size: 12px;
  font-weight: bold;
  text-align: center;
  color: #FFF;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}

.storepanel .item-list .item > .info {
  line-height: 20px;
}

.storepanel .hbox .item {
  overflow: hidden;
  height: 120px;
  white-space: nowrap;
}

.storepanel .hbox .item::after {
  clear: both;
  display: block;
  content: '';
}

.storepanel .hbox .item > .cover {
  float: left;
  width: 80px;
  height: 100%;
  overflow: hidden;
}

.storepanel .hbox .item > .cover > .thumb {
  width: 100%;
}

.storepanel .hbox .item > .cover > .img-circle {
  left: 2px;
  bottom: 2px;
  width: 35px;
  margin: 0px;
}

.storepanel .hbox .item > .info {
  margin: 0px 5px 5px 85px;
}

.storepanel .item-list .item > .info .rate {
  color: #F0AD4E;
}

.storepanel .item-list .item > .info .title {
  position: static;
  font-size: 14px;
  width: 100%;
  margin: 3px 0;
  color: #333;
  line-height: 17px;
  background-color: transparent;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.storepanel .item-list .item > .info .price {
  color: rgb(203, 92, 92);
  text-align: right;
}

.storepanel .items {
}

.storepanel .items > .item {
  float: left;
  width: 200px;
  margin: 0px 5px 15px;
}

.storepanel .bgheader {
}

.storepanel .content .contentheader {
}

.storepanel .content .contentheader .intro {
  padding: 0px;
  margin: 0px;
  list-style: none;
  position: relative;
  height: 100%;
}

.storepanel .content .contentheader .intro .cover {
  position: absolute;
  left: 40px;
  bottom: -50px;
  width: 150px;
  padding: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  background-color: rgba(255, 255, 255, 0.3);
}

.storepanel .content .contentheader .intro .cover > img {
  width: 100%;
  background-color: #fff;
}

.storepanel .content .contentheader .intro .prop {
  position: absolute;
  left: 205px;
  bottom: 10px;
  color: #fff;
}

.storepanel .content .contentheader .intro .prop .rate i {
  width: 14px;
}

.storepanel .content .contentheader .intro .prop .title {
  position: initial;
  color: initial;
  margin: 10px 0;
  font-weight: 700;
  color: #fff;
}

.storepanel .content .contentheader .smry {
  position: absolute;
  right: 10px;
  bottom: 10px;
  color: #fff;
}

.storepanel .content .smry li {
  width: 80px;
  text-align: center;
}

.storepanel .content .wrapcontent .smry {
  display: none;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
  padding: 10px 0;
  margin-bottom: 10px;
}

.storepanel .content .wrapcontent .smry li {
  width: 33%;
}

.storepanel .content .wrapcontent .smry h2 {
  margin: 0 0 10px;
  font-size: 20px;
}

.storepanel .content .ctrls {
  padding: 10px 0px 10px 205px; 
}

.storepanel .bxProp {
  list-style: none;
  margin: 0px;
  padding: 10px 15px;
}

.storepanel .bxProp > li {
  line-height: 28px;
  font-size: 12px;
}

.storepanel .bxProp > li > label {
  font-weight: bold;
  margin: 0px;
}

.storepanel .bxProp > li > label > i {
  width: 12px;
  text-align: center;
}

.headermenu li.search {
  position: relative;
  line-height: 50px;
  font-size: 0px;
}

.headermenu li.search.open .search-container {
  width: 300px;
  overflow: initial;
}

.headermenu li.search .search-container {
  width: 0;
  -webkit-transition: width 300ms;
  -moz-transition: width 300ms;
  -o-transition: width 300ms;
  transition: width 300ms;
  position: absolute;
  top: 50%;
  right: 30px;
  transform: translateY(-50%);
  overflow: hidden;
  z-index: 1;
}

.headermenu li.search .search-container .form-control {
  -webkit-border-top-right-radius: 0px;
  -webkit-border-bottom-right-radius: 0px;
  -moz-border-top-right-radius: 0px;
  -moz-border-bottom-right-radius: 0px;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
  padding : 0px 5px;
  height: 30px;
}

.headermenu li.search .btn {
  padding: 3px !important;
  width: 30px;
  height: 30px;
  /*line-height: 18px;*/
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  background: #1582dc;
  color: #FFF !important;
  vertical-align: top;
  margin-top: 10px;
}

.overpanel .headermenu li.search .btn {
  background: transparent;
}

.headermenu li.search.open .btn {
  background: #1377c9;
  border: 1px solid #1377c9;
  position: relative;
  z-index: 2;
}

.storepanel .tab-content.maxw {
  max-width: 1024px;
  margin: 0 auto;
}

.storepanel .table-center th,
.storepanel .table-center td {
  text-align: center;
}

.storepanel .tab-content .tab-pane > .intro {
  line-height: 1.5em;
  margin: 10px;
  font-size: 13px;
}

.storepanel .tab-content .notice {
  background-color: #f0f0f0;
  margin-bottom: 20px;
  padding: 10px 25px;
  line-height: 20px;
  font-size: 12px;
}

.storepanel .tab-content .notice > li {
  padding: 3px 0px;
}

.storepanel .tab-content .mtitle {
  font-size: 17px;
  padding: 0px 5px;
  margin: 10px 0px 5px;
}

.storepanel .tab-content .voucher-list {
  margin-left: 0px;
  margin-right: 0px;
  margin-top: 20px;
}

.storepanel .tab-content .voucher-list .voucher {
  text-align: center;
  padding: 5px 5px 15px;
  margin-bottom: 20px;
  border-top: 3px solid #333;
  background-color: #FBFBFB;
  -moz-box-shadow: 3px 3px 0 rgba(12,12,12,0.05);
  -webkit-box-shadow: 3px 3px 0 rgba(12,12,12,0.05);
  box-shadow: 3px 3px 0 rgba(12,12,12,0.05);
}

.storepanel .tab-content .voucher-list .voucher.dark-theme {
  border-color: #333;
}

.storepanel .tab-content .voucher-list .voucher.dark-theme .btn {
  background-color: #444;
  color: #fff;
}

.storepanel .tab-content .voucher-list .voucher.dark-theme .btn:hover {
  background-color: #292727;
}

.storepanel .tab-content .voucher-list .voucher.success-theme {
  border-color: #1caf9a;
}

.storepanel .tab-content .voucher-list .voucher.primary-theme {
  border-color: #428bca;
}

.storepanel .tab-content .voucher-list .voucher.danger-theme {
  border-color: #d9534f;
}

.storepanel .tab-content .voucher-list .voucher > h2 {
  margin: 0px;
  font-weight: 600;
  font-size: 17px;
  text-align: center;
  padding: 10px 5px;
  border-bottom: 1px solid #ccc;
}

.storepanel .tab-content .voucher-list .voucher .info {
  height: 150px;
  position: relative;
}

.storepanel .tab-content #institution .voucher-list .voucher .info {
  height: 200px;
}

.storepanel .tab-content .voucher-list .voucher .info .wrap {
  position: absolute;
  width: 100%;
  top: 50%;
  transform: translateY(-50%);
}

.storepanel .tab-content .voucher-list .voucher .price {
  font-size: 35px;
  font-weight: 600;
  line-height: 40px;
}

.storepanel .tab-content #institution .voucher-list .voucher .price {
  padding: 0px;
}

.storepanel .tab-content .voucher-list .voucher .price .unit {
  font-size: 13px;
  font-weight: normal;
}

.storepanel .tab-content .voucher-list .voucher .price .discount {
  line-height: 30px;
  font-size: 16px;
  color: #aaa;
  text-decoration: line-through;
}

.storepanel .tab-content .voucher-list .voucher .price .discount > span {
  color: #aaa;
}

.storepanel .tab-content .voucher-list .voucher .desc {
  line-height: 20px;
}

.storepanel .tab-content .voucher-list .voucher .btn {
  width: 90%;
  font-size: 14px;
  font-weight: 600;
}

.storepanel .buypanel .wraplst {
  padding: 10px;
}

.storepanel .buypanel .wraplst .head {
  padding: 7px 0px;
  background-color: #3E3E4A;
  text-align: center;
  color: #fff;
}

.storepanel .buypanel .wraplst .head .date {
  display: block;
}

.storepanel .buypanel .wraplst .row.order {
  border-bottom: 1px solid #e3e6f3;
  cursor: pointer;
}

.storepanel .buypanel .wraplst .row.order:hover {
  background-color: #f5f5f5;
}

.storepanel .buypanel .wraplst .row.order > div {
  min-height: 80px;
  padding: 5px;
  position: relative;
}

.storepanel .buypanel .wraplst .row.order > div > div.center {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  text-align: center;
}

.storepanel .buypanel .wraplst .orderno {
  display: block;
  margin-bottom: 5px;
}

.storepanel .buypanel .wraplst .info .orderno {
  display: inline-block;
  margin: 0px;
}

.storepanel .buypanel .wraplst .date {
  font-size: 90%;
}

.storepanel .prodinfo {
}

.storepanel .prodinfo > .thumb {
  display: inline-block;
  max-width: 50px;
  margin-right: 5px;
}

.storepanel .prodinfo > .info {
  display: inline-block;
  vertical-align: top;
}

.modal .wrapcompleted {
  padding: 10px;
}

.modal .wrapcompleted .wrap-invoice {
  padding: 10px 0px 20px;
}

.modal .wrapcompleted .bxcmd {
  padding: 10px 0px;
}

.overpanel .wrap-invoice {
  position: relative;
  width: 800px;
  min-height: 600px;
  margin: 0 auto;
  padding: 10px 20px;
  background-color: #fff;
}

.orderpanel .wrap-invoice {
  padding: 20px;
  border: 1px solid #eee;
  margin-bottom: 20px;
}

.wrap-invoice .orderinfo {
  padding-bottom: 10px;
}

.wrap-invoice .orderinfo label {
  font-weight: 500;
  margin: 15px 0px 5px;
  width: 100%;
  padding: 5px;
  border-bottom: 2px solid #555;
}

.wrap-invoice .orderinfo div {
  line-height: 20px;
}

.wrap-invoice .row > div > label + div {
  padding: 0 5px;
}

.wrap-invoice .table {
  font-size: 13px;
}

.wrap-invoice .table thead > tr > th {
  border-bottom: 2px solid #555;
}

.wrap-invoice .table tbody td.prodinfo {
}

.wrap-invoice .table tbody td.prodinfo > .thumb {
  display: inline-block;
  max-width: 50px;
  margin-right: 10px;
}

.wrap-invoice .table tbody td.prodinfo > .info {
  display: inline-block;
  vertical-align: top;
}

.wrap-invoice .bxbill {
  text-align: right;
  margin-top: 20px;
}

.wrap-invoice .bxbill .wrapbill {
  width: 200px;
  float: right;
}

.wrap-invoice .bxbill .wrapbill > div {
  line-height: 30px;
  padding: 5px 10px;
  border-bottom: 1px solid #ddd;
}

.wrap-invoice .bxbill .wrapbill > div > label {
  margin: 0px;
}

.wrap-invoice .bxbill .wrapbill > div > span {
  display: inline-block;
  width: 100px;
  margin-left: 20px;
  text-align: right;
}

.wrap-invoice .bxbill .wrapbill > div.total {
  font-size: 20px;
  font-weight: 600;
}

/****************** paper *****************/

.panel-paper .history_smry {
}

.panel-paper .history_smry > li {
  text-align: center;
  margin: 10px 15px;
}

.panel-paper .history_smry > li > h5 {
  margin: 0px;
  font-size: 13px;
}

.panel-paper .history_smry > li > div {
  font-weight: 700;
  font-size: 30px;
  line-height: 50px;
  color: #333;
}

.panel-paper .history_smry > li > div > span {
  font-weight: normal;
  font-size: 12px;
  color: #59595a;
}

.panel-paper .contentpanel .filterbx {
  background-color: #F0F0F0;
  padding: 5px 0px;
  margin: 0px;
}

.panel-paper .contentpanel .filterbx > div {
  line-height: 33px;
}

.panel-paper .contentpanel .filterbx .btn-group {
  margin: 0px;
}

.panel-paper .contentpanel ul.smry {
  padding: 5px;
}

.panel-paper .contentpanel ul.smry b {
  color: #d9534f;
}

.panel-paper .contentpanel ul.smry > li {
  line-height: 27px;
}

.panel-paper .contentpanel table thead th i {
  margin-left: 3px;
}

.panel-paper .resultpanel .historybx .box {
}

.panel-paper .resultpanel .historybx .box .md-title {
  /*background-color: #1D2939;*/
  background-color: #575D65;
  color: #FFF;
  line-height: 33px;
  padding: 0px 5px;
  position: relative;
  margin: 3px 0px;
}

.panel-paper .resultpanel .historybx .box .md-title .btn {
  position: absolute;
  right: 0px;
  top: 3px;
  color: #fff;
}

.panel-paper .resultpanel .historybx .box .item-list {
  list-style: none;
  margin: 0px;
  padding: 0px;
}

.panel-paper .resultpanel .historybx .box .item-list > li {
  line-height: 33px;
  padding: 0px 3px;
  position: relative;
  border-bottom: 1px solid #DDD;
  cursor: pointer;
}

.panel-paper .resultpanel .historybx .box .item-list > li.active:hover,
.panel-paper .resultpanel .historybx .box .item-list > li.active {
  background-color: #F0F0F0;
  font-weight: 600;
}

.panel-paper .resultpanel .historybx .box .item-list > li.active .badge {
  background-color: #428bca;
  color: #fff;
}

.panel-paper .resultpanel .historybx .box .item-list > li:hover {
  background-color: #F9F9F9;
}

.panel-paper .resultpanel .historybx .box .item-list > li > .badge {
  position: absolute;
  right: 5px;
  top: 8px;
}

.panel-paper .resultpanel .infobx {
  background-color: #f9f9f9;
  padding: 5px;
}

.panel-paper .resultpanel .infobx .btn-group {
  width: 100%;
  margin-bottom: 0px;
}

.panel-paper .resultpanel .infobx .btn-test {
  width: 100%;
  text-align: left;
  font-size: 15px;
  font-weight: 600;
  background-color: transparent;
  padding: 5px;
}

.panel-paper .resultpanel .infobx .btn-test .select {
  position: absolute;
  line-height: 18px;
  right: 5px;
}

.panel-paper .resultpanel .infobx .test-list {
  width: 100%;
}

.panel-paper .resultpanel .infobx .test-list > li {
  position: relative;
  line-height: 2em;
  padding: 0px 5px;
  cursor: pointer;
}

.panel-paper .resultpanel .infobx .test-list > li:hover {
  background-color: #F5F5F5;
}

.panel-paper .resultpanel .infobx .test-list > li > .badge {
  position: absolute;
  top: 0.3em;
  right: 5px;
}

.panel-paper .resultpanel .infobx > .prop {
  font-size: 12px;
  padding: 5px;
}

.panel-paper .resultpanel .infobx > .prop > li > span {
  display: inline-block;
  padding: 0px 5px;
  text-align: center;
}

.pages .smrybrd {
  position: fixed;
  z-index: 2;
  padding: 5px;
  border-top: 5px solid #b33b3b;
  background-color: rgba(0, 0, 0, 0.7);
  margin: 10px 0px 0px 790px;
  color: #fff;
}

.pages .smrybrd li {
  text-align:center;
  line-height: 25px;
}

.pages .smrybrd li:not(:first-child) {
  border-top: 1px solid #fff;
}

.panel-paper .chart-page#report {
  max-width: 1024px;
}

.panel-report .qno {
  font-size: 0px;
}

.panel-report .nowrap {
  white-space: nowrap;
}

.panel-report .widget-field .col-md-6 .table {
  font-size: 11px;
}

.panel-report .col-md-6 .fname {
  font-size: 11px;
}

.panel-report .qno span {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  border: 1px solid #ccc;
  background-color: #fff;
  font: 12px Arial;
  display: inline-block;
  text-align: center;
  margin: 2px;
  width: 20px;
  height: 20px;
  line-height: 20px;
}

.panel-report .qno span.x {
  background-color: #e48989;
  color: #fff;
  border: 1px solid #a84a4a;
}

.panel-report .qno span.bg-danger { 
  background-color: #e48989;
  color: #fff;
  border: 1px solid #a84a4a;
}
.panel-report .qno span.bg-warning { background-color: #f0ad4e; color: #FFF; border: 1px solid #f0ad4e; }
.panel-report .qno span.bg-primary { background-color: #428bca; color: #FFF; border: 1px solid #428bca; }
.panel-report .qno span.bg-info { background-color: #5bc0de; color: #FFF; border: 1px solid #5bc0de; }
.panel-report .qno span.bg-success { background-color: #1caf9a; color: #FFF; border: 1px solid #1caf9a; }

.panel-paper .chart-page .chart1 {
  height: 200px;
}

.panel-paper .chart-page .chart2 {
  display: inline-block;
  width: 280px;
  height: 250px;
}

.panel-paper .chart-page .chart3 {
  display: inline-block;
  width: 280px;
  height: 250px;
}

.panel-paper table > tbody > tr > td {
  vertical-align: middle;
}

.panel-paper table .btn-edit,
.panel-paper table .btn-del {
  width: 32px;
}

.mod_test .wrapcontent,
.mod_paper .wrapcontent,
.panel-report .wrapcontent {
  max-width: 980px;
  margin: 0 auto;
}

.panel-report .wrapcontent,
.panel-report .wrapcontent.v2 {
  width: 980px;
  padding: 10px;
  background-color: #fff;
}

.printpanel .panel-report .wrapcontent.v2 {
  page-break-after: always;
}

.overpanel .panel-report .wrapcontent {
  width: 1000px;
  padding: 10px;
  background-color: #fff;
  text-align: left;
  margin-top: 10px;
}

.panel-report .prttitle {
  text-align: center;
  background-color: #1D2939;
  width: 100%;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  line-height: 40px;
  margin: 0px 0px 10px;
  display: none;
}

.panel-report .nav-tabs a {
  padding: 5px 15px;
}

.panel-report .widget .widget-header > .title {
  padding: 7px 5px;
  margin: 0px;
  position: relative;
  cursor: pointer;
  line-height: 20px;
}

.panel-report .widget.off .widget-header > .title {
  background-color: #F9F9F9;
  color: #aaa;
}

.panel-report .widget .widget-header > .title > i {
  position: absolute;
  right: 10px;
}

.panel-report .widget.off .widget-header > .title > i::before {
  content: "\f077";
}

.panel-report .widget .widget-header > .filter {
  position: absolute;
  right: 5px;
  bottom: 10px;
}

.panel-report .widget.off .widget-body {
  display: none;
}


.panel-report .userinfobx {
  position: relative;
  margin-bottom: 10px;
}

.panel-report .userinfobx .thumb {
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  width: 80px;
  height: 80px;
  margin: 0 10px;
  float: left;
}

.panel-report .userinfobx .info {
  margin-left: 120px;
}

.panel-report .report_user .userinfobx {
  margin-left: 10px;
  padding: 20px 10px;
  margin-bottom: 0px;
}

.panel-report .report_user .userinfobx table tbody tr th,
.panel-report .report_user .userinfobx table tbody tr td {
  border: none;
}

.panel-report .report_user .userinfobx .info {
  margin-left: 105px;
}

.panel-report .userinfobx .score {
  position: absolute;
  top: 0px;
  right: 0px;
  padding: 10px;
  background-color: #fff;
  width: 200px;
  text-align: center;
  font-size: 50px;
  font-weight: 700;
  line-height: 50px;
  margin-left: 10px;
  color: #e67070;
}

.panel-report .userinfobx > .score span {
  border-bottom: 3px double #ccc;
}

.panel-report .userinfobx .smry {
}

.panel-report .userinfobx .smry > div {
  float: left;
  width: 50%;
  padding: 5px;
  text-align: center;
  position: relative;
}

.panel-report .userinfobx .smry > div > span {
  display: block;
  font-size: 50px;
  font-weight: 700;
  line-height: 70px;
  color: #CB5B38;
}

.panel-report .userinfobx .smry > div > label {
  display: block;
  background-color: #F5F5F5;
  padding: 5px 10px;
}

.panel-report .chart {
}

.panel-report .chart.chartScoreRange {
  height: 200px;
}

.panel-report table  {
  margin: 0px;
}

.panel-report table.tblw tbody tr td {
  padding: 8px;
}

.panel-report table.tblm tbody tr td {
  padding: 5px 8px;
}

table.table-sm tr th,
table.table-sm tr td {
  padding: 8px;
}

table.table-md tr th,
table.table-md tr td {
  padding: 5px 8px;
}

table.table-xs tr th,
table.table-xs tr td {
  padding: 3px;
}

.panel-report table.table-qt tbody tr th,
.panel-report table.table-qt tbody tr td {
  padding: 5px;
  font-size: 11px;
  text-align: center;
  line-height: 20px;
}

.panel-report table.table-qt tbody tr.qno th,
.panel-report table.table-qt tbody tr.qno td {
  font-weight: bold;
  background-color: #F5F5F5;
}

.panel-report table.table-qt tbody tr.qno td > span {
  margin: 0px;
  font-size: 11px;
}

.panel-report table.table-qt tbody tr td .weak {
  color: #e71414;
}

.panel-report .smry {
}

.panel-report .cover {
  height: 100px;
  box-shadow: 1px 1px 1px rgba(12,12,12,0.2);
}

.panel-report .smry .title {
  margin: 0px;
  font-weight: normal;
  font-size: 20px;
  color: #000;
}

.panel-report .smry .prop {
  padding: 5px 15px;
}

.panel-report .smry .info {
  font-size: 12px;
}

.panel-report .smry .info > li {
  padding: 3px;
}

.panel-report .report_user .dashboard {
  background-color: #F9F9F9;
  margin: 0px;
}

.dashboard .gauge {
  text-align: center;
  padding: 5px 0px;
  font-weight: 300;
}

.dashboard .gauge.ldr {
  border-left: 5px solid #4b5d68;
  margin: 10px -5px;
  background-color: #eee;
}

.dashboard .gauge small {
}

.dashboard .gauge .score {
  font-weight: 300;
  margin: 5px 0px;
  color: #000;
}

.dashboard .gauge .score > span {
  font-size: 12px;
}

.dashboard .gauge .score.rbox {
  line-height: 85px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

.dashboard .gauge > div.rate {
  display: inline-block;
  position: relative;
  margin: 5px;
}

.dashboard .gauge .progress-circle {
  margin: 0px;
  font-size: 17px;
}

.dashboard .gauge .progress-circle > span {
  font-size: 25px;
  line-height: inherit;
  width: 100%;
  color: #000;
}

.dashboard .gauge .progress-circle.p60 .value-bar {
  border-color: #BC4212;
}

.dashboard .gauge .progress-circle.p60 .first50-bar {
  background-color: #BC4212; 
}

.dashboard .gauge .progress-circle.p90 .value-bar {
  border-color: #53567A;
}

.dashboard .gauge .progress-circle.p90 .first50-bar {
  background-color: #53567A; 
}

.panel-report .qts .qt {
  float: left;
  width: 35px;
  text-align: center;
  font-size: 12px;
}

.panel-report .qts .header {
  float: left;
  width: 55px;
  text-align: center;
  font-weight: bold;
  font-size: 12px;
  color: #444;
}


.panel-report .qts .header > div,
.panel-report .qts .qt > div {
  padding: 5px;
  height: 30px;
}

.panel-report .qts .header > .no,
.panel-report .qts .qt > .qno {
  background-color: #F5F5F5;
  border-bottom: 1px solid #ccc;
}

.panel-report .qts .qt > .qno > span {
  margin: 0px;
  vertical-align: bottom;
  font-size: 12px;
}

.panel-report .qts .qt .weak {
  color: #a84a4a;
}

.panel-report table tbody tr td {
  vertical-align: middle;
}

.panel-report table.table-xs tbody tr td {
  padding: 2px 8px;
}

.panel-report .row.userdata {
  padding: 5px 0px 0px;
}

.panel-report .row.userdata:not(:first-child) {
  border-top: 1px solid #eee;
}

.panel-report .profile > .thumb {
}

.panel-report .profile .name {
  font-size: 12px;
  font-weight: 500;
  color: #000;
  white-space: nowrap;
}

.panel-report .profile {
  text-align: center;
}

.panel-report .profile > .info {
  display: inline-block;
  vertical-align: middle;
  padding: 5px 0px;
  font-size: 12px;
}

.panel-report .profile > .info .name {
  display: block;
}

.panel-report .userdata .rate {
  font-weight: bold;
  line-height: 45px;
  color: #000;
}

.panel-report table.tblsection td span.cell {
  display: inline-block;
  width: 10px;
  height: 20px;
  border: 1px solid #eee;
  cursor: pointer;
}

.panel-report table.tblsection td span.rate {
  font-size: 20px;
  font-weight: 600;
  color: #000;
}

.panel-report table.tblcutline thead tr th,
.panel-report table.tblcutline tbody tr td {
  padding: 5px;
}

.panel-report table.tblcutline thead tr th.header {
  background-color: #FFF;
}

.panel-report table.tblcutline thead tr th.univ {
  background-color: #fcf8e3;
}

.panel-report table.tblcutline tbody tr td {
  vertical-align: top;
}

.panel-report table.tblcutline tbody tr td > div {
  height: 14.5em;
  overflow: hidden;
  position: relative;
}

.panel-report table.tblcutline tbody tr td > div:after {
  content: "";
  text-align: right;
  position: absolute;
  bottom: 0;
  right: 0;
  width: 30%;
  height: 3em;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%);
}

.panel-report table code {
  padding: 4px 7px;
  margin: 3px;
  display: inline-block;
}

.panel-report table span.toflow {
  white-space: nowrap;
}

.panel-report table td.univ {
  cursor: pointer;
}

.panel-report table td.univ code {
  background-color: #dff0d8;
  color: #3c763d;
}

section[type=test] .printpanel .panel-report .wrapcontent.v2 {
  width: 800px;
  padding: 30px;
}

section[type=test] .printpanel .panel-report .wrapcontent table {
  font-size: 10px;
}

section[type=test] .printpanel .panel-report .wrapcontent table.table thead > tr > th,
section[type=test] .printpanel .panel-report .wrapcontent table.table tbody > tr > th, 
section[type=test] .printpanel .panel-report .wrapcontent table.table tfoot > tr > th, 
section[type=test] .printpanel .panel-report .wrapcontent table.table thead > tr > td, 
section[type=test] .printpanel .panel-report .wrapcontent table.table tbody > tr > td, 
section[type=test] .printpanel .panel-report .wrapcontent table.table tfoot > tr > td {
  padding: 4px;
}

section[type=test] .printpanel .panel-report .wrapcontent .userinfobx .thumb {
  width: 70px;
}

section[type=test] .printpanel .panel-report .wrapcontent .userinfobx .info {
  margin-left: 100px;
}

section[type=test] .printpanel .panel-report .wrapcontent .userinfobx .score {
  width: 150px;
  line-height: 35px;
}

section[type=test] .printpanel .panel-report .wrapcontent .gtable .row {
  font-size: 10px;
  line-height: 25px;
}

section[type=test] .printpanel .panel-report .wrapcontent .widget .widget-header > .title {
  font-size: 11px;
  padding: 3px 10px;
}

section[type=test] .printpanel .panel-report .wrapcontent .qno span {
  font-size: 10px;
  width: 17px;
  height: 17px;
  line-height: 17px;
  margin: 0px 2px;
}

section[type=test] .printpanel .panel-report .wrapcontent .comment {
  min-height: 60px;
  font-size: 10px;
}

section[type=test] .printpanel .panel-report .wrapcontent .prttitle {
  font-size: 13px;
  line-height: 30px;
}


.overlay .viewcontent {
  /*
  padding-top: 40px;
  max-width: 1200px;
  margin: 0 auto;
  */
  margin: 50px 10px 10px 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.cutlinecontent td span {
  display: inline-block;
  border: 1px solid #000;
  width: 10px;
  height: 7px;
}

.cutlinecontent span.uni1 {
  background-color: red;
}

.cutlinecontent span.uni2 {
  background-color: yellow;
}

.cutlinecontent span.uni3 {
  background-color: red;
}

.cutlinecontent span.uni3::after {
  content: '';
  position: absolute;
  width: 4px;
  height: 5px;
  background-color: yellow;
}

.cutlinecontent table {
  margin-bottom: 0px;
  background-color: #fff;
  position: relative;
}

.cutlinecontent table tbody tr.header {
  background-color: #F9F1E4;
}

.cutlinecontent table tbody tr.header th,
.cutlinecontent table tbody tr.header td {
  height: 25px;
  padding: 0px;
  text-align: center;
  vertical-align: middle;
  border-color: #555;
}

.cutlinecontent table tbody tr td {
  font-size: 12px;
  padding: 0px;
  text-align: center;
  vertical-align: middle;
  height: 15px;
  line-height: 1px;
  border-color: #555;
}

.cutlinecontent table tbody tr th.mark,
.cutlinecontent table tbody tr td.mark {
  background-color: transparent;
  font-size: 0px;
}

.cutlinecontent table tbody tr td.mark.im {
  background-color: #FFCCCC;
}

.cutlinecontent table tbody tr td.mark.jm {
  background-color: #3399FF;
}

.cutlinecontent table tbody tr.devide td {
  font-size: 0px;
  height: 3px;
  background-color: #fff;
}

.cutlinecontent table tbody tr td.sel {
}

/*
.panel-paper .panel-report table span.o {
}

.panel-paper .panel-report table span.x {
  position: relative;
}

.panel-paper .panel-report table span.x:after {
  content:"";
  position:absolute;
  border-top: 4px solid red;
  width: 30px;
  transform: rotate(-45deg);
  transform-origin: 15px 27px;
  opacity: 0.3;
}
*/

.panel-report table thead tr th {
  background-color: #F5F5F5;
}

.panel-report .gtable .row  {
  font-size: 12px;
  margin: 0px 0px 3px 0px;
  line-height: 25px;
}

.panel-report .gtable .row > div {
  padding: 0 2px;
}

.panel-report .gtable .row > div > label {
  font-weight: bold;
  margin: 0px;
  background-color: #eee;
  width: 100px;
  text-align: center;
  float: left;
}

.panel-report .gtable .row > div > span {
  display: block;
  padding: 0 5px;
  text-align: center;
  width: 100%;
  border-bottom: 1px solid #eee;
}

.panel-report .gtable .chartbx {
  margin-top: 15px;
}

.panel-report .comment {
  background-color: #F9F9F9;
  padding: 10px;
  font-size: 12px;
}

.modal .frmComment .form-group {
  margin-left: 0px;
  margin-right: 0px;
}

.modal .modal-footer .cond {
  display: none;
}

.modal .frmComment .form-group .cond {
  padding: 10px 0px;
  border-bottom: 1px dashed #ccc;
}

.modal .frmComment .form-group .cond:last-child {
  border-bottom: 0px;
}

.modal .frmComment .form-group .scope {
  width: 70px;
  float: left;
  text-align: right;
}

.modal .frmComment .form-group .desc {
  margin-left: 80px;
  margin-right: 40px;
  position: relative;
}

.modal .frmComment .form-group .scope input {
  text-align: right;
}

.modal .frmComment .form-group .desc textarea {
  height: 70px;
}

.modal .frmComment .form-group .desc .ctrl {
  position: absolute;
  top: 0px;
  right: -40px;
  line-height: 70px;
}

.modal .frmComment .form-group .btn-new {
  border: 1px dashed #bd9c9c;
  margin: 10px;
  padding: 10px;
  cursor: pointer;
  background-color: #F9F9F9;
}

.modal .frmComment .form-group .btn-new:hover {
  border: 1px dashed #dd6a6a;
  background-color: #fbf1dd;
}

/****************** papers *****************/


.header-expand ul.lstPapers {
  list-style: none;
  margin: 0px;
  padding: 0px;
  display: inline-block;
  position: relative;
  white-space: nowrap;
}

.header-expand ul.lstPapers > li {
  display: inline-block;
  position: relative;
  margin-right: 10px;
}

.header-expand ul.lstPapers > li.active {
}

.header-expand ul.lstPapers > li > i {
  position: relative;
  top: -1px;
  right: 20px;
  font-size: 12px;
  color: #BBB;
  cursor: pointer;
}

.header-expand ul.lstPapers > li > a {
  background-color: #343E4D;
  font-size: 13px;
  text-align: center;
  padding-left: 10px;
  padding-right: 20px;
  color: #BBB;
  line-height: 28px;
  display: inline-block;
}

.header-expand ul.lstPapers > li > a > span {
  display: inline-block;
  width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}

.header-expand ul.lstPapers > li > a:active,
.header-expand ul.lstPapers > li > a:focus,
.header-expand ul.lstPapers > li > a:hover {
  text-decoration: none;
  color: #FFF;
}

.header-expand ul.lstPapers > li.active > i {
  color: #666;
}

.header-expand ul.lstPapers > li.active > a {
  background-color: #FFF;
  color: #666;
}

.header-expand ul.lstPapers .extmnu {
  padding: 0px;
  margin: 0px;
  top: 0.2em;
  right: 0px;
  position: absolute;
  cursor: pointer;
}

.header-expand ul.lstPapers .extmnu .btn {
  padding: 0px 5px;
  margin: 0px;
  border: none;
  background-color: transparent;
  font-size: 12px;
  height: initial;
}

.header-expand ul.lstPapers .active .extmnu .btn:hover {
  color: #333;
}

.header-expand .extmnu .btn:hover {
  color: #eee;
}

.header-option-menu {
  min-width: 130px;
}

#popup-add .modal-body {
  padding: 5px;
}

#popup-add .modal-body .nav-tabs {
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
  border-radius: 0;
  padding: 0 10px;
}

#popup-add .modal-body .nav-tabs > li {
  margin-top: 5px;
}

#popup-add .modal-footer {
  padding: 10px;
}

#popup-add .modal-body .nav-tabs > li > a {
  padding: 10px 20px;
}

#popup-add .modal-body .nav-content {
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
  border-radius: 0;
}

/************* single view ******************/

section.singleview {
}

.singleview .header {
  position: fixed;
  width: 100%;
  top: 0px;
  line-height: 60px;
  z-index: 1;
  background-color: rgba(255,255,255,.9);
  border-bottom: 1px solid #dbdbdb;
  padding: 0px 10px;
}

.singleview .header .page-title {
  color: #000;
  line-height: 60px;
  padding: 0px 5px;
  margin: 0px;
  font-size: 20px;
  font-weight: 300;
  vertical-align: top;
  display: block;
  text-align: center;
}

.singleview .header .mnuback > i {
  color: #777;
}

.singleview .header .page-title:focus,
.singleview .header .page-title:hover {
  background-color: transparent;
}

.singleview .header .logo {
  width: 100px;
  position: absolute;
  background: url(/skins/default/images/intro/20160119_056.svg) no-repeat center center;
  background-size: 100% auto; 
  height: 100%;
  margin: 0px;
}

.singleview .header .logo h5 {
  color: #333;
  margin: 0px;
  line-height: 45px;
  display: none;
  font-weight: 700;
  font-size: 20px;
}

.singleview .header .logo span {
  color: #1caf9a;
}

.singleview .mainpanel {
  margin: 0 auto;
  max-width: 800px;
  min-height: auto;
  background: #fff;
  padding: 70px 10px 0px;
}

.singleview .mainpanel pre {
  text-align: justify;
  white-space: pre-line;
  margin: 30px 0;
  color: #333;
  font-size: 12px;
  background-color: #F9F9F9;
  border: none;
  font-family: "Noto Sans KR", "Apple SD Gothic Neo", 나눔고딕, NanumGothic, "맑은 고딕", "Malgun Gothic";
}

.termspanel h5 {
  color: #333;
}

/************* Register ******************/
form .invalid {
  font-size: 12px;
  padding-top: 5px;
  color: #d26e2e;
  display: none;
}

form .invalid.chk {
  display: inline-block;
}

.body_login > section {
  height: 100%;
}

.body_login .header {
  position: fixed;
  width: 100%;
  top: 0px;
  line-height: 60px;
  z-index: 1;
  background: linear-gradient(to bottom,rgba(0,0,0,.3),rgba(109,109,109,.015));
}

.body_login .header .page-title {
  color: #fff;
  line-height: 60px;
  padding: 0px 5px;
  margin: 0px;
  font-size: 17px;
  font-weight: 100;
  vertical-align: top;
}

.body_login .header .page-title > i {
  color: #19add5;
}

.body_login .header .page-title:focus,
.body_login .header .page-title:hover {
  background-color: transparent;
}

.body_login .header .logo {
  width: 150px;
  position: absolute;
  left: 50%;
  transform: translatex(-50%);
  background: url(/skins/default/images/intro/20160119_055.svg) no-repeat center center;
  background-size: 80% auto; 
  height: 100%;
}

.body_login .header .logo h5 {
  color: #333;
  margin: 0px;
  line-height: 45px;
  display: none;
  font-weight: 700;
  font-size: 20px;
}

.body_login .header .logo span {
  color: #1caf9a;
}

.bxCSPanel {
  width: 360px;
  padding: 30px;
  margin-top: 20px;
  background-color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
}

.bxCSPanel .title {
  margin: 5px 0px 10px;
  position: relative;
  font-weight: 400;
}

.bxCSPanel .title .notice {
  position: absolute;
  bottom: 0px;
  right: 5px;
  font-size: 11px;
  font-weight: normal;
  color: #f8760b;
}

.bxCSPanel .form-group {
  margin-left: 0px;
  margin-right: 0px;
  margin-bottom: 10px;
  position: relative;
}

.bxCSPanel .devider {
  margin: 5px 0px 10px;
  border-top: 1px dashed #aaa;
}

.bxCSPanel .form-group.required .form-control {
  border: 1px solid #a6d5d4;
}

.bxCSPanel.check .form-ext {
  display: inline-block;
}

.bxCSPanel.check .msg {
  display: none;
}

.bxCSPanel .form-ext {
  display: none;
}

.bxCSPanel.step2 .form-ext {
  display: initial;
}

.bxCSPanel .alert {
  padding: 5px;
  font-size: 11px;
  margin-bottom: 10px;
}

.bxCSPanel .msg {
  text-align: center;
  font-size: 11px;
  margin: 10px 0;
}

.bxCSPanel .cmd {
  text-align: center;
}

.bxCSPanel .cmd .btn {
  width: 100%;
  margin-bottom: 15px;
}


/****************** notes ******************/
.notes .newbox {
  height: 145px;
}


/****************** ----store---- ******************/


/****************** store_pointcharge ******************/

ul.alert {
  list-style: none;
  padding: 10px;
  font-size: 12px;
}

ul.alert > li {
  padding: 5px 0px;
}

.storepanel .pointpanel h3 {
  font-size: 15px;
  font-weight: 700;
}

.pointpanel .lstProd {
  text-align: center;
}

.pointpanel .lstProd > div {
  margin: 10px 0px;
}

.pointpanel .lstProd > div > i {
}

.pointpanel .lstProd > div h5 {
  margin: 0px;
  font-weight: 700;
}

.bxBill {
  margin: 20px 0px;
  padding: 10px 0px;
  border-top: 1px solid #eee;
  margin-bottom: 0px;
}

.bxBill > .form-group {
  line-height: 30px;
}

.bxBill > .form-group > label {
}

.bxBill > .form-group > .control-label {
  line-height: initial;
}

.bxBill > .qty input {
  display: inline-block;
  text-align: right;
}

.bxBill > .devider {
  border-top: 1px dashed #eee;
  padding-top: 15px;
}

.bxBill .method > div {
  display: none;
}

.bxBill .method > div.active {
  display: block;
}

.bxBill .method .text {
  line-height: 40px;
  background-color: #eee;
  padding: 5px 10px;
}

.bxBill .notice {
  text-align: center;
  font-size: 17px;
  color: #D25454;
}

.bxBill .stab {
  display: none;
}

.bxBill .stab.active {
  display: block;
}

.storepanel .bxcmd {
  margin-top: 10px;
}

.storepanel .bxcmd .btn {
}

/****************** product ******************/

.prods .prod .price {
  padding: 10px 0;
  text-align: right;
}

.prods .prod .price > b {
  display: inline-block;
  color: red;
  font-size: 15px;
}

.prods .prod .price > b::after {
  content: '원';
  font-size: 80%;
  font-weight: normal;
  color: initial;
}

.prods .prod .btns {
  text-align: right;
}

.prods .prod .btns > a {
}

/****************** store_cart ******************/

.cartpanel .notice {
  padding: 10px;
  background-color: #f8f8f8;
  margin-bottom: 20px;
}

ul.lstProd {
  list-style: none;
  margin: 0px;
  padding: 0px;
}

ul.lstProd > li {
  position: relative;
  padding: 10px 0px;
  margin-bottom: 0px;
}

ul.lstProd > li:not(:first-child) {
  border-top: 1px solid #eee;
}

ul.lstProd > li.empty {
  text-align: center;
  padding: 50px 0px;
  font-size: 17px;
  color: #aaa;
}

ul.lstProd > li .btnDel {
  position: absolute;
  top: 20px;
  right: 10px;
}

ul.lstProd > li .btnOrder {
  position: absolute;
  right: 10px;
  bottom: 10px;
}

ul.lstProd > li > .pic {
  float: left;
  width: 80px;
  min-height: 100px;
  text-align: center;
}

ul.lstProd > li > .pic .img {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  width: 100%;
  height: 100%;
  background-color: #EFEFEF;
}

ul.lstProd > li > .pic img {
  width: 100%;
  -moz-box-shadow: 3px 3px 0 rgba(12,12,12,0.05);
  -webkit-box-shadow: 3px 3px 0 rgba(12,12,12,0.05);
  box-shadow: 3px 3px 0 rgba(12,12,12,0.05);
}

ul.lstProd > li > .pic > div.empty_book {
  height: 100px;
  border: 1px solid #eee;
  width: 100%;
  background-color: #f5f5f5;
  -moz-box-shadow: 3px 3px 0 rgba(12,12,12,0.1);
  -webkit-box-shadow: 3px 3px 0 rgba(12,12,12,0.1);
  box-shadow: 3px 3px 0 rgba(12,12,12,0.1);
  position: relative;
}

ul.lstProd > li > .pic > div.empty_book::before {
  content: '';
  position: absolute;
  width: 1px;
  left: 10px;
  background-color: #ddd;
  height: 100%;
}

ul.lstProd > li > .pic .btn-xs {
  padding: 2px 7px;
}

ul.lstProd > li > .info {
  margin-left: 100px;
}

ul.lstProd > li > .info .name {
  font-size: 17px;
  margin: 5px 0px;
}

ul.lstProd > li > .info .input-sm {
  padding: 3px 10px;
}

ul.lstProd > li > .info .amount {
  position: relative;
  line-height: 30px;
}

ul.lstProd > li > .info .desc {
  line-height: 20px;
}

ul.lstProd > li > .info .amount input {
  display: inline-block;
}

ul.lstProd > li > .info .option {
  line-height: 30px;
}

ul.lstProd > li > .info .option > span {
  padding: 2px 5px;
  background-color: #eee;
  margin-right: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

ul.lstProd > li > .info .price {
  position: absolute;
  bottom: 10px;
  right: 10px;
  line-height: 30px;
  font-weight: bold;
}

ul.lstProd > li > .ext {
  line-height: 30px;
}

.bxBill .form-group.total {
  border-top: 1px dashed #333;
  padding-top: 10px;
  font-size: 17px;
}

/*********** library imsi *****************/

.lib-content .wrapcontent {
}

.lib-content .wrapcontent .cate {
  font-size: 15px;
  border-bottom: 1px solid rgb(204, 204, 204);
  padding: 10px;
  position: relative;
}

.lib-content .wrapcontent .cate > span {
}

.lib-content .wrapcontent .cate > i {
  position: absolute;
  right: 10px;
  font-size: 20px;
}

.lib-content .wrapcontent .items {
  list-style: none;
  margin: 0px;
  padding: 0px;
}

.lib-content .wrapcontent .items > li {
  display: inline-block;
  text-align: center;
  margin: 0px 10px 10px;
  width: 100px;
}

.lib-content .wrapcontent .items > li .cover {
  background-color: #F9F9F9;
  padding: 10px;
}

.lib-content .wrapcontent .items > li .ico-type {
  font-size: 80px;
  color: #a7a7a7;
}

.lib-content .wrapcontent .items > li .ion-ios-folder {
  color: #62a3da;
}

.lib-content .wrapcontent .items > li h4 {
  font-size: 12px;
  margin: 0px;
  padding: 0 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/*********** order *****************/

#popup-order .modal-footer {
  line-height: 45px;
}

/*********** DAP *****************/
#popup-dap .userschbx {
}

#popup-dap .userschbx .btn-user-search {
  /*line-height: 1.9em;*/
}

#popup-dap .applicants {
  padding: 5px;
  background-color: #F5F5F5;
  overflow-x: auto;
  overflow-y: hidden;
  position: relative;
  white-space: nowrap;
}

#popup-dap .applicants > .user {
  text-align: center;
  display: inline-block;
  position: relative;
  cursor: pointer;
}

#popup-dap .applicants > .user.sel::before {
  content: '';
  width: 15px;
  height: 15px;
  position: absolute;
  top: 3px;
  right: 3px;
  -webkit-border-radius: 50%;
  background-color: #d9534f;
  border: 2px solid #fff;
  z-index: 1;
}

#popup-dap .applicants > .user:not(:last-child) {
  margin-right: 5px;
}

#popup-dap .applicants > .user > .thumb {
  position: relative;
  overflow: hidden;
  width: 45px;
}

#popup-dap .applicants > .user:not(.sel) > .thumb::after {
  content: '';
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}

#popup-dap .applicants > .user:hover > .thumb::after {
  background-color: rgba(0, 0, 0, 0);
}

#popup-dap .applicants > .navi {
  font-size: 30px;
  line-height: 60px;
  opacity: 0.5;
  cursor: pointer;
  display: inline-block;
  vertical-align: top;
  padding: 0px 5px;
}

#popup-dap .applicants > .navi:hover {
  opacity: 1;
}

.frmDap > .warning {
  display: block;
  text-align: center;
  margin-top: 70px;
  color: #ff5100;
}

.frmDap.multi .profile {
  display: none;
}

.frmDap .profile {
  padding: 10px 5px;
  margin: 10px 0px 0px;
  background-color: #F5F5F5;
}

.frmDap .profile .info {
  font-size: 12px;
}

.frmDap .table {
  margin-top: 10px;
  margin-bottom: 0px;
}

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

.frmDap .table tbody tr td {
  vertical-align: middle;
}

.frmDap .table tbody tr td.no {
  cursor: pointer;
}

.frmDap .input-xs {
  padding: 3px 10px;
}

.frmDap table .input-xs {
  width: 90px;
}

.frmDap table .ex {
  position: relative;
}

.frmDap table .ex .input-xs {
  width: 150px;
}

.frmDap table .ex input[type=file] {
  position: absolute;
  top: 10px;
}

.frmDap .bgdap {
  background-color: #F5F5F5;
}

#popup-dap .modal-footer .smry {
  text-align: left;
}

#popup-dap .modal-footer .smry label{
  margin-bottom: 0px;
  padding: 8px 10px;
  background-color: #1d2939;
  margin-right: 5px;
  vertical-align: bottom;
  font-size: 12px;
  color: #fff;
}

#popup-dap .modal-footer .smry span {
  font-size: 11px;
}

#popup-adap .modal-body .row:not(:last-child) {
  border-bottom: 1px solid #ddd;
}

/*********** sms ***************/

.frmSMS h2 {
  margin: 0px 0px 5px 0px;
  font-size: 16px;
  position: relative;
}

.frmSMS h2:not(:first-child) {
  margin-top: 10px;
}

.frmSMS h2 select {
  position: absolute;
  top: -2px;
  right: 0px;
  font-size: 12px;
}

.frmSMS .message textarea {
  width: 100%;
  height: 270px;
  border: 5px solid #ABBAC2;
  padding: 10px;
  background-color: #FEFEFE;
}

.frmSMS .message .desc {
  margin: 5px 5px 0px;
  text-align: right;
  font-size: 12px;
}

.frmSMS .target {
}

.frmSMS .option {
  margin: 0px 0px 5px;
  padding: 5px;
  background-color: #F9F9F9;
  font-size: 12px;
}

.frmSMS .target > li {
  position: relative;
  line-height: 25px;
  font-size: 13px;
  border-bottom: 1px dashed #ccc;
  padding: 3px 0px;
  margin: 0px 3px;
}

.frmSMS .target > li .name {
  font-weight: 600;
}

.frmSMS .target > li .desc {
  color: #999;
}

.frmSMS .target > li .btn-remove {
  position: absolute;
  right: 0px;
}

.frmSMS .option .timecond {
  margin-top: 5px;
}

.frmSMS .option .timecond .date {
  width: 70%;
  float: left;
}

.frmSMS .option .timecond .time {
  width: 25%;
  float: left;
  margin-left: 7px;
}

.frmSMS .option .timecond .time .form-control{
  padding: 5px;
}

.frmSMS .option .input-xs {
  padding: 5px 7px;
}

.frmSMS .option .timecond select.form-control {
  height: 30px;
}

/*********** new group ***************/

.frmGroup {
}

.frmGroup .targetlist {
  margin: 10px 0px;
}

.frmGroup .targetlist > label {
  margin-right: 5px;
}

/*********** group move ***************/

.frmMove {
  height: 100%;
}

.frmMove h5 {
  margin-top: 0px;
}

.frmMove .form-group,
.frmMove select {
  margin-bottom: 10px;
}

.frmMove .buddies {
  height: 80%;
  overflow-x: hiddenx;
  overflow-y: auto;
  padding: 5px;
  border: 1px dashed #ddd;
}

.frmMove .wrap {
  white-space: nowrap;
  height: 100%;
}

.frmMove .ctrlbar {
  text-align: center;
  display: inline-block;
  width: 9%;
  vertical-align: top;
  position: relative;
  top: 50%;
  transform: translateY(-30%);
}

.frmMove .src {
  display: inline-block;
  width: 45%;
  height: 100%;
  vertical-align: top;
}

.frmMove .ctrlbar > a {
  display: block;
  margin: 20px 0px;
  padding: 10px;
  background-color: #F5F5F5;
}

.frmMove .buddy > .thumb > img {
  width: 40px;
}

.frmMove .buddy > .info {
  padding-top: 5px;
}


/*********** suggestions ***************/

.users .box {
  min-height: 50px;
  position: relative;
}

.books .box {
  min-height: 70px;
  position: relative;
}

.items .item .thumb {
  float: left;
  width: 40px;
}

.items .item .pic {
  float: left;
  width: 40px;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
}

.items .item .info {
  margin-left: 45px;
}

.items .item .info > div {
  line-height: 20px;
}

.items .item .info > .name {
  font-weight: 600;
  color: #333;
}

.items .item .info > .desc {
  font-size: 11px;
  color: #777;
}

.items span[data-role="remove"] {
  margin-left: 5px;
  cursor: pointer;
  font-size: 20px;
  line-height: 1px;
  padding: 2px;
  /*vertical-align: middle;*/
  position: absolute;
  right: 5px;
  top: 10px;
}

.items .item span[data-role="remove"]:hover {
  color: #d9534f;
}

/*********** test print ***************/

body section.panel-print .wrapcontent {
  max-width: 800px;
}

/*********** Lecture ***************/

#popup-lessonedit .toolbar {
  padding: 7px;
  background-color: #f5f5f5;
  margin-bottom: 5px;
}

#popup-lessonedit .toolbar > button {
  font-size: 15px;
}

#popup-lessonedit .toolbar > button:hover {
  color: #337ab7;
}

.modal .modal-dialog .overpopup {
  background-color: #fff;
  position: absolute; 
  top: 0px; 
  left: 0px; 
  width: 100%; 
  min-height: 100%;
}

.modal .modal-dialog .overbox {
  display: none; 
  background-color: #fff;
  position: absolute; 
  top: 0px; 
  left: 0px; 
  width: 100%; 
  min-height: 100%;
  z-index: 3;
}

.modal .overbox .overback {
  cursor: pointer;
}

.modal .overbox .overback > i {
  color: #aaa;
}

.modal .overbox.over-library .optionbar {
  position: absolute;
  right: 15px;
  padding: 5px;
}

.modal .overbox.over-library .breadcrumb {
  padding: 10px 105px 10px 10px;
}

#popup-lessonedit .overbox .covers {
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
}

#popup-lessonedit .overbox .covers > .cover {
  display: inline-block;
  width: 100px;
  text-align: center;
  padding: 5px;
  cursor: pointer;
  margin-right: 5px;
}

#popup-lessonedit .overbox .covers > .cover:hover,
#popup-lessonedit .overbox .covers > .cover.sel {
  background-color: #f5f5f5;
}

#popup-lessonedit .overbox .covers > .cover > .thumb {
  height: 80px;
}

#popup-lessonedit .overbox .covers > .cover > h5 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 11px;
  margin: 5px 0px 0px 0px;
}

#popup-lessonedit .items .item {
  padding: 10px;
  border-bottom: 1px dashed #eee;
  position: relative;
}

#popup-lessonedit .items .item i.fa-check-circle {
  display: none;
}

#popup-lessonedit .items .item .src,
#popup-lessonedit .items .item .ico-type {
  width: 80px;
  line-height: 50px;
  height: 50px;
  font-size: 40px;
  float: left;
  text-align: center;
  color: #CB503B;
  background-color: #f5f5f5;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
}

#popup-lessonedit .items .item .info {
  margin-left: 90px;
}

#popup-lessonedit .items .item .info .cate {
  font-size: 12px;
}

#popup-lessonedit .items .item .info .title {
  font-size: 14px;
  font-weight: normal;
  margin: 0px;
}

#popup-lessonedit .items .item span[data-role="remove"] {
  font-size: 13px;
  top: inherit;
  bottom: 15px;
}

.overlay.itemview .body video {
  height: 90%;
  vertical-align: middle;
}

.mod_lecture .overpanel .overbody {
  padding: 60px 0px 0px;
}

.mod_lecture .overpanel .overbody .wrapvideo {
  text-align: center;
  height: 100%;
}

.mod_lecture .overpanel .overbody .wrapvideo video {
  max-width: 90%;
  height: 90%;
}

.panel .btn-group .dropdown-menu {
  width: 100%;
  color: #333;
}

.panel .btn-group .dropdown-menu > li {
  padding: 5px;
  position: relative;
  cursor: pointer;
}

.panel .btn-group .dropdown-menu > li:hover {
  background-color: #EFEFEF;
}

.panel .btn-group .dropdown-menu > li > i {
  width: 20px;
  text-align: center;
}

.modal .lib-panel .cmd-zone {
  position: absolute;
  right: 15px;
  background-color: transparent;
}

.modal .lib-panel.saveas .wrap-list {
  min-height: 300px;
}

.modal .lib-panel.saveas .frmLib {
  padding: 5px;
  background-color: #eee;
}

.modal .lib-panel.saveas .frmLib .form-group {
  margin: 0px;
}

.modal .modal-body.lib-panel .cmd-zone > div .btn {
  padding-top: 2px;
}

.modal .lib-panel .breadcrumb {
  padding: 10px 105px 10px 10px;
}

.modal .libpanel .toolbar {
  position: absolute;
  right: 15px;
  background-color: transparent;
  padding: 5px;
}

.modal .modal-body.libpanel .toolbar .filter .btn {
  padding-top: 2px;
}

.modal .libpanel .breadcrumb {
  padding: 10px 105px 10px 10px;
}

#popup-members .users {
}

#popup-members .users .user {
  text-align: center;
  display: inline-block;
  cursor: pointer;
  padding: 5px 5px 30px 5px;
  max-width: 80px;
}

#popup-members .users .user.sel .pic > .bg,
#popup-members .users .user:hover .pic > .bg {
  display: block;
}

#popup-members .users .user.sel .pic > .bg > i::before {
  content: '\f058';
}

#popup-members .users .user .pic {
  overflow: hidden;
  position: relative;
}

#popup-members .users .user .pic > img {
  width: 100%;
}

#popup-members .users .user .pic > i {
  width: 65px;
  height: 65px;
  padding: 15px 10px 0px;
  background-color: #eee;
  color: #333;
}

#popup-members .users .user .pic > .bg {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  top: 0px;
  left: 0px;
  display: none;
}

#popup-members .users .user .pic > .bg > i {
  color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#popup-members .users .user > label {
  margin-top: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  width: 100%;
  font-size: 12px;
  position: absolute;
  left: 0px;
  bottom: 0px;
}

/*********** popup bookwizard ***************/

#popup-bookwizard .status .progress {
  margin-right: 20px;
}

/*********** poppup preview ***************/

.over-preview .cmd {
  background-color: #F5F5F5;
}

.over-preview .status .progress {
  background-color: #ddd;
}

.modal .status .log {
  height: 310px;
  margin-top: 10px;
  overflow: auto;
  border: 1px solid #ddd;
  font-size: 12px;
}

.overpanel .wrapbook {
  overflow: hidden;
  z-index: 1;
}

.overpanel .wrapbook .page {
  background-color: #fff;
}

.overpanel .wrapbook .page img {
  width: 100%;
  height: 100%;
}

.overpanel .wrapbook .p15,
.overpanel .wrapbook .p10,
.overpanel .wrapbook .p5 {
  padding: 0px !important;
}

.overpanel .wrapbook .cover {
  overflow: hidden;
}

.overpanel .wrapbook .even:not(.cover)::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0px;
  right: 0px;
  z-index: 1000;
	background:-webkit-gradient(linear, left top, right top, color-stop(0.95, transparent), color-stop(1, #dadada));
	background-image:-webkit-linear-gradient(left, transparent 95%, #dadada 100%);
	background-image:-moz-linear-gradient(left, transparent 95%, #dadada 100%);
	background-image:-ms-linear-gradient(left, transparent 95%, #dadada 100%);
	background-image:-o-linear-gradient(left, transparent 95%, #dadada 100%);
	background-image:linear-gradient(left, transparent 95%, #dadada 100%);
}

.overpanel .wrapbook .odd:not(.cover)::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0px;
  right: 0px;
  z-index: 1000;
	background:-webkit-gradient(linear, right top, left top, color-stop(0.95, transparent), color-stop(1, #cacaca));
	background-image:-webkit-linear-gradient(right, transparent 95%, #cacaca 100%);
	background-image:-moz-linear-gradient(right, transparent 95%, #cacaca 100%);
	background-image:-ms-linear-gradient(right, transparent 95%, #cacaca 100%);
	background-image:-o-linear-gradient(right, transparent 95%, #cacaca 100%);
	background-image:linear-gradient(right, transparent 95%, #cacaca 100%);
}

/*********** poppup order ***************/
.frmOrder .bxSmry {
  line-height: 30px;
  font-size: 17px;
  border-bottom: 1px dashed #ccc;
}

.frmOrder .bxSmry b {
  margin-left: 10px;
}

.frmOrder .bxTotal {
  border-top: 1px dashed #777;
  font-size: 23px;
  margin-top: 20px;
  margin-bottom: 20px;
  padding: 20px 10px 5px;
}

.frmOrder .bxTotal b {
  color: #4B7DC8;
}

.frmOrder .form-group {
  margin-left: 0px;
  margin-right: 0px;
}

.frmOrder .form-group .form-inline .form-control {
  display: inline-block;
}

/*********** poppup mark ***************/

#popup-mark .frmOption .options > div {
  display: none;
}

#popup-mark .frmOption .options > div.active {
  display: block;
}

/*********** poppup saveas ***************/

#popup-saveas .modal-footer {
  background-color: #F5F5F5;
}

#popup-publish .modal-footer .form-group {
  margin-bottom: 0px;
  text-align: left;
}

#popup-publish .modal-footer .btn-save {
  padding: 25px 15px;
}

/*********** poppup zip ***************/

.zip .schbx {
  position: relative;
  padding-right: 65px;
}

.zip .schbx .btn {
  position: absolute;
  top: 0px;
  right: 0px;
}

.zip .lstaddr {
  margin-top: 10px;
  padding-top: 5px;
  border-top: 1px solid #eee;
}

.zip .lstaddr .addr {
  position: relative;
  padding: 5px;
  cursor: pointer;
  margin-bottom: 5px;
  font-size: 15px;
}

.zip .lstaddr .addr:hover {
  background-color: #eee;
}

.zip .lstaddr .addr .code {
  position: absolute;
  color: #d25353;
}

.zip .lstaddr .addr .name {
  margin-left: 50px;
}

.zip .lstaddr .addr .name .doro {
  color: #000;
}

.zip .lstaddr .addr .name .other {
  font-size: 90%;
}

.zip .lstaddr .guide {
  padding: 0px 20px;
}

.zip .lstaddr .guide .desc_tip {
  margin-bottom: 5px;
}

.zip .lstaddr .guide .txt_example {
  display: block;
  margin-bottom: 15px;
  color: #4a86b9;
}

.modal .items .item {
  position: relative;
  padding: 5px;
  cursor: pointer;
}

.modal .items .item .bg {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 1;
}

.modal .items .item:hover {
  background-color: #F5F5F5;
}

.modal .items .item.sel {
  background-color: #EFEFEF;
}

.modal .items .item.sel .bg {
  display: initial;
}

.modal .items .item .ico {
  position: absolute;
  top: 40%;
  left: 50%;
  display: none;
  color: #fff;
  z-index: 2;
  text-shadow: 1px 2px 2px rgba(0, 0, 0, 0.8);
  transform: translate(-50%, -55%);
}

.modal .items .item.sel .ico {
  display: inherit;
}

.modal .users .user .thumb {
  display: inline-block;
  width: 60px;
  height: 60px;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  float: none;
}

.books .book .cover {
  position: relative;
}

.books .book .cover {
  width: 100%;
}

.books.list .book {
  position: relative;
  padding: 5px;
  border: 1px solid #ddd;
}

.books.list .book .cover {
  width: 70px;
  height: 99px;
  float: left;
  margin-right: 5px;
}

.books .book .cover .thumb {
  width: 100%;
  -moz-box-shadow: 3px 1px 0 rgba(12,12,12,0.05);
  -webkit-box-shadow: 3px 1px 0 rgba(12,12,12,0.05);
  box-shadow: 3px 1px 0 rgba(12,12,12,0.05);
}

body .modal .books .book {
  height: 180px;
  margin: 5px auto;
  padding: 5px;
  cursor: pointer;
}

.widget .resrcs .resrc:not(.lock):hover,
.widget .books .book:not(.lock):hover {
  background-color: rgba(0, 0, 0, 0.1);
}

.sline.tile > div[class^=col] {
  display: inline-block;
  float: none;
}

.resrcs .resrc,
.books .book {
  margin: 10px auto;
  cursor: pointer;
  padding: 5px;
  position: relative;
  background-color: transparent;
}

.resrcs .resrc .bglock,
.books .book .bglock {
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  background-color: rgba(0, 0, 0, 0.1);
  text-align: center;
}

.resrcs .resrc .bglock > i,
.books .book .bglock > i {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  color: rgba(255, 255, 255, 0.8);
}

.resrcs.tile .resrc,
.books.tile .book {
  width: 90%;
  height: auto;
  border: none;
}

.resrcs .resrc .thumb {
  width: 120px;
  float: left;
  margin-right: 10px;
  position: relative;
  overflow: hidden;
  text-align: center;
  background-color: #fbfbfb;
}

.resrcs .resrc .thumb > i {
  font-size: 50px;
  line-height: 55px;
  vertical-align: bottom;
}

.resrcs .resrc .thumb > img {
  width: 100%;
  height: auto;
}

.books .book .cover {
  width: 120px;
  float: left;
  margin-right: 10px;
  box-shadow: 3px 3px 3px rgba(12,12,12,0.2);
  overflow: hidden;
}

.resrcs.list .resrc > .thumb {
  line-height: 65px;
}

.resrcs.tile .resrc > .thumb {
  float: none;
  width: 100%;
  height: 105px;
  margin: 0px;
  line-height: 80px;
}

.resrcs.tile .resrc > .thumb > img {
  max-width: 100%;
  height: auto;
}

.resrcs.tile .resrc.avi .thumb:after {
  content: '';
  display: block;
  padding-top: 57%;
}

.resrcs .resrc.avi .thumb .time {
  position: absolute;
  bottom: 2px;
  right: 2px;
  display: inline-block;
  width: 80px;
  height: 20px;
  line-height: 20px;
  background-color: rgba(0, 0, 0, 0.8);
  font-size: 12px;
  font-weight: bold;
  text-align: center;
  color: #FFF;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
  z-index: 1;
}

.books .book .badge {
  position: absolute;
  z-index: 1;
  top: 5px;
  left: 5px;
}

.books.tile .book .cover {
  float: none;
  width: 100%;
  margin: 0px;
}

.books.tile .book .cover:after {
  content: '';
  display: block;
  padding-top: 140%;
}

.books.tile .book .cover > img {
  position: absolute;
}

.resrcs .resrc .name,
.books .book .name,
.modal .items .item .name {
  display: block;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-top: 10px;
}

.modal .items .item.user .name {
  padding-top: 0px;
}

.resrcs .resrc .smry {
  font-size: 12px;
}

.books.tile .info .cate {
  display: none;
}

.resrcs .resrc .option,
.books .book .option {
  position: absolute;
  top: 0px;
  right: 5px;
}

.books .book .option.left {
  top: -3px;
  left: -3px;
  right: none;
}

.pagebar {
  margin-top: 10px;
  padding: 5px;
  background-color: #F5F5F5;
  line-height: 25px;
}

.pagebar .ddlcate {
  color: #333;
}

.pagebar .ddlcate .btn-cate {
  font-size: 16px;
  font-weight: bold;
}

/*********** common ***************/


.users.tile {
}

.users.tile .user {
  width: 70%;
  margin: 0 auto;
  text-align: center;
  position: relative;
}

.users.tile .user.master::before {
  content: '담임';
  position: absolute;
  top: 20px;
  left: -10px;
  background-color: #c94444;
  color: #fff;
  padding: 2px 5px;
  border-radius: 5px;
}

.users.tile .user .pic {
  width: 100%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
}

.users.tile .user .info {
  margin: 10px 0px;
  position: relative;
}

.users.tile .user .info .name {
  font-weight: bold;
}

.users.tile .user .info label.name {
  display: block;
}

.users.tile .user .option {
}

.users.tile .user .option .btn {
  padding: 0px;
  background: none;
  border: none;
  line-height: 1px;
  color: #333;
}

.users.tile .newbox {
  min-height: auto;
  border-radius: 50%;
  width: 70%;
  height: 100px;
  margin: 0 auto;
  box-sizing: border-box;
  padding-top: 70%;
}

.modal .bxClinic .row {
  position: relative;
  padding: 10px 0px;
  border-bottom: 1px dashed #ccc;
}

.modal .bxClinic .row:hover {
  background-color: #eee;
}

.modal .bxClinic .row:hover .profile > .thumb {
  color: #333;
}

.modal .bxClinic input[type=checkbox],
.modal .bxClinic .option,
.modal .bxClinic .optionbar {
  display: none;
}

.modal .bxClinic .profile > .thumb {
  font-size: 40px;
  line-height: 40px;
  width: 60px;
  color: #aaa;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
}

/*********** program view ****************/

.programview .wrapcontent {
  max-width: 1000px;
  position: relative;
  margin: 0 auto;
}


/*********** archive ****************/
.wraplib .breadcrumb {
  background-color: transparent;
  padding: 5px;
  margin-bottom: 5px;
}

.wraplib .breadcrumb .btn-sort {
  display: none;
}

/*********** ebook ****************/

.sidepanel .resrcs {
  position: relative;
}

.sidepanel .resrcs > .resrc {
  position: relative;
  margin: 0px;
  padding-right: 50px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  line-height: 30px;
  border-bottom: 1px solid #343e4d;
  font-size: 13px;
  cursor: pointer;
}

.sidepanel .resrcs > .resrc:hover {
  background-color: rgba(125, 125, 125, 0.2);
}

.sidepanel .resrcs > .resrc > .page {
  position: absolute;
  right: 0px;
  top: 5px;
  display: inline-block;
  padding: 1px 15px;
}

.wrapidx {
}

.wrapidx .no {
  display: inline-block;
  width: 20px;
  margin-right: 5px;
}

.wrapidx .midx {
  position: relative;
  padding: 5px;
  border-bottom: 1px solid #ddd;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}

.sidepanel .wrapidx .midx {
  border-bottom: 1px solid #343e4d;
}

.wrapidx .midx:hover {
  background-color: #f5f5f5;
}

.sidepanel .wrapidx .midx:hover {
  background-color: #343e4d;
}

.wrapidx .midx > h5 {
  font-size: 13px;
  margin: 3px 0px;
}

.wrapidx .midx > i {
  position: absolute;
  right: 5px;
  top: 10px;
}

.wrapidx .midx.expand > i::before {
  content: "\f106";
}

.wrapidx .sidxes {
  padding: 0px;
  margin: 5px 0px;
  display: none;
}

.sidepanel .wrapidx .sidxes {
  background-color: rgba(0, 0, 0, 0.2);
}

.wrapidx .sidxes.expand {
  display: block;
}

.wrapidx .sidx {
  position: relative;
  cursor: pointer;
  padding: 2px 5px 2px 20px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wrapidx .sidx:hover {
  background-color: rgba(0, 0, 0, 0.1);
}

.wrapidx .sidx.sel {
  background-color: #343e4d;
  color: #fff;
}

.wrapidx .sidx i {
  display: none;
  position: absolute;
  left: 3px;
}

.wrapidx .sidx.sel i {
  display: inline-block;
}

.sidepanel .wrapidx .sidx.sel,
.sidepanel .wrapidx .sidx:hover {
  background-color: #343e4d;
}

.wrapidx .sidx > h5 {
  font-size: 12px;
  padding: 3px 0px;
  margin: 3px 0px;
}

.sidepanel .wrapidx .sidx .no {
  background-color: #756c69;
  border-radius: 3px;
  text-align: center;
  padding: 2px;
}

.wrapidx .sidx > .page {
  position: absolute;
  right: 5px;
  top: 8px;
  font-size: 12px;
}

.wrapidx .seces {
  padding: 5px 0px 5px 20px;
}

.wrapidx .seces > span.sec {
  display: inline-block;
  padding: 5px 10px;
  background-color: #eee;
  font-size: 12px;
  margin-right: 5px;
}

.wrapidx .seces > span.sec.sel,
.wrapidx .seces > span.sec:hover {
  background-color: #555;
  color: #fff;
}

/*********** book report ****************/

.widget .dashbrd .box {
  color: #fff;
}

.widget .dashbrd .box label {
  display: block;
  color: #fff;
}

.widget .dashbrd .box i.fa-3x {
  line-height: 50px;
}

.widget .dashbrd .box b {
  font-size: 30px;
}

.widget .dashbrd .box .row {
  padding: 5px;
}

.widget table.tblgrade tbody tr td {
  padding: 8px;
}

/******* popup-option *******/

#popup-option .preview img {
  max-width: 150px;
  width: 100%;
}

/*********** book order ****************/

.wizardpanel {
  margin: 0px auto;
  padding: 10px 15px 30px;
  max-width: 800px;
  background-color: #fff;
}

.wizardpanel .title {
  padding: 10px 0px;
  border-bottom: 1px dashed #ccc;
}

.wizardpanel .title > span {
  margin-right: 5px;
}

.wizardpanel .bxTpl {
  padding: 10px;
}

.wizardpanel .bxBase {
  padding: 10px;
}

.wizardpanel .bxBase .notice {
  margin-top: -10px;
  margin-bottom: 20px;
}

.wizardpanel .bxBase .notice > span {
  color: #d22a2a;
}

.wizardpanel .bxBase .form-group.required .control-label {
  color: #d22a2a;
}

.wizardpanel .bxBase .form-group.required .control-label:before {
  content: '*';
}

.wizardpanel .bxBase .uploadbox .drop {
  margin: 0px;
  font-weight: normal;
}

.wizardpanel .bxBase .uploadbox .drop .thumb {
  width: 50px;
  height: 50px;
  display: inline-block;
}

.wizardpanel .bxBase .uploadbox .drop.has > p {
  display: none;
}

.wizardpanel .bxBase .uploadbox .drop > p {
  margin: 0px;
}

.wizardpanel .bxBase .uploadbox .drop > p > span {
  display: block;
}

.wizardpanel .bxBase .uploadbox .drop h5 {
  margin: 3px 0px;
}

.wizardpanel .bxBill {
  margin: 0px;
  padding: 10px;
  border: none;
}

/*********** cube ***************/
.wrapcube {
  position: relative;
  -webkit-overflow-scrolling: touch;
  overflow-x: auto;
}

.wrapcube table {
  margin: 0px;
}

.wrapcube .indexpanel {
  float: left;
  width: 200px;
  position: sticky;
  position: -webkit-sticky;
  left: 0;
  z-index: 2;
  background-color: #fff;
  overflow: hidden;
}

.wrapcube .indexpanel::after {
  content: '';
  position: absolute;
  width: 5px;
  height: 100%;
  bottom: 0px;
  left: 200px;
  background-color: #eee;
}

.wrapcube .indexpanel table thead tr th:first-child {
  border-bottom: 4px solid #555;
}

.wrapcube .indexpanel table tbody tr td {
  white-space: nowrap;
}

.wrapcube .sectionpanel {
  margin-left: 205px;
  padding-top: 101px;
  position: relative;
}

.wrapcube .sectionpanel table thead {
  position: absolute;
  top: 0px;
  z-index: 1;
}

.wrapcube .sectionpanel table thead tr th {
  text-align: center;
  width: 200px;
  min-width: 50px;
  border-left: 1px solid #ddd;
position: relative;
}

.wrapcube .sectionpanel table thead tr th > span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.wrapcube .sectionpanel table tbody {
  position: absolute;
}

.wrapcube .sectionpanel table tbody tr td:first-child,
.wrapcube .sectionpanel table thead tr th:first-child {
  border-left: none;
}

.wrapcube .sectionpanel table thead tr:last-child th {
  border-bottom: 4px solid #555;
}

.wrapcube .sectionpanel table tbody tr td {
  border-left: 1px solid #ddd;
  width: 200px;
  min-width: 50px;
  cursor: pointer;
  text-align: center;
}

.wrapcube .sectionpanel table tbody tr td:not(.sel):hover {
  background-color: #ddd;
}

.wrapcube .sectionpanel table tbody tr td.cell.active.hover {
  background-color: #f2b26a;
}

.wrapcube .sectionpanel table tbody tr td.sel {
  background-color: #337ab7;
  color: #fff;
}

.wrapcube .sectionpanel table tbody tr td.context {
  background-color: #ddd;
}

.wrapcube .h100 {
  height: 100px;
  vertical-align: middle;
}

.wrapcube .h60 {
  height: 60px;
  vertical-align: middle;
}

.wrapcube .h40 {
  height: 40px;
  vertical-align: middle;
}


.cubeview.mnu-expand-right .contentpanel {
  margin-right: 330px;
}

/*********** dashboard ***************/


.dashboard .smry .box {
  text-align: center;
  color: #fff;
  font-weight: normal;
}

.dashboard .smry .box.bgdark {
  background-color: #4C4743;
}

.dashboard .smry .box.bgred {
  background-color: #ED6C44;
}

.dashboard .box.tbox {
  background-color: #fff;
  border: none;
  text-align: center;
  margin-top: 30px;
}

.report .dashboard .box.tbox .score{
  font-weight: 500;
  color: #333;
}

.dashboard .box span {
  opacity: 1;
}

.dashboard .box .info {
  padding: 30px 0px 10px;
}

.dashboard .box .score {
  line-height: 40px;
  font-size: 40px;
}

.dashboard .box .title {
  font-size: 11px;
}

.dashboard .widget {
}

.dashboard .vcardbx {
  position: relative;
  text-align: center;
  height: 70px;
  margin-top: 35px;
  right: 0px;
  width: 80px;
  display: inline-block;
}

.dashboard .vcardbx .card .lbl {
  font-size: 12px;
}

.dashboard .vcardbx .card .val {
  font-size: 20px;
  font-weight: 500;
  color: #333;
  line-height: 25px;
}

.dashboard .vcardbx .card {
  position: absolute;
}

.dashboard .vcardbx .card:first-child {
}

.dashboard .vcardbx .card:first-child::after {
  content: '';
  position: absolute;
  top: 55px;
  left: 20px;
  border-top: 1px solid #eee;
  width: 40px;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  transform-origin: 0% 0%;
}

.dashboard .vcardbx .card:nth-child(2) {
  right: 0px;
  bottom: 0px;
}

.dashboard .gauge {
  text-align: center;
  font-weight: normal;
  padding: 5px 0px;
}

.report .dashboard .gauge {
  padding: 0px;
}

.dashboard .gauge .title {
  font-weight: normal;
  font-size: 12px;
  padding: 3px;
  display: block;
}

.dashboard .gauge .cmark {
  width: 85px;
  height: 85px;
  display: inline-block;
  background-color: #eee;
  border-radius: 50%;
  font-size: 25px;
  line-height: 80px;
  margin: 5px;
  color: #000;
}

.dashboard .gauge .smark {
  border-radius: 10px;
}

.dashboard .gauge .score {
  display: block;
  font-size: 30px;
  line-height: 35px;
}

.dashboard .gauge .score > i {
  font-size: 12px;
  font-style: initial;
}

.dashboard .widget .chart {
  height: 250px;
  background-color: #F9F9F9;
}

.dashboard .widget .cxheader .title {
  line-height: 36px;
}

.dashboard .widget .cxheader .filter {
  margin-top: 5px;
}

.dashboard .widget .info {
}

.dashboard .widget .info > .title {
  text-align: center;
  padding: 10px 0px;
  font-size: 12px;
  border-bottom: 1px solid #eee;
}

.dashboard .widget .card {
  text-align: center;
}

.dashboard .widget .card .lbl {
  font-size: 12px;
  display: inline-block;
  padding: 5px;
}

.dashboard .widget .card .val {
  font-size: 20px;
  line-height: 40px;
  color: #000;
}

.dashboard .buddy .info {
  margin-top: 3px;
  white-space: nowrap;
}

.dashboard .buddy .info > .name {
  display: block;
  font-weight: bold;
  padding: 2px 0px;
}

.dashboard .buddy .bxscore {
  padding: 10px 5px;
  text-align: right;
}

.dashboard .buddy .bxscore .score {
  font-size: 20px;
  color: #000;
}

.dashboard .buddy .bxscore .inc {
}

.dashboard .buddy .bxscore .inc > i.fa {
  color: #e32121;
  margin-right: 3px;
}

.dashboard .widget .h300 {
  max-height: 300px;
  overflow-y: auto;
}

.dashboard .widget .table .buddy:first-child > td {
  border-color: transparent;
}

.stackbar {
  margin: 10px 5px 5px;
}

.stackbar .blk {
  float: left;
  height: 30px;
  padding: 5px;
  font-size: 12px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
  white-space: nowrap;
}

.legend {
  font-size: 12px;
  margin-top: 10px;
}

.legend .series {
  position: relative;
  display: inline-block;
  padding-left: 18px;
}

.legend .series::before {
  content: '';
  background-color: #ccc;
  width: 10px;
  height: 10px;
  position: absolute;
  left: 5px;
  top: 5px;
}

.legend .series.warning::before {
  background-color: #f0ad4e;
}
.legend .series.success::before {
  background-color: #1caf9a;
}
.legend .series.primary::before {
  background-color: #428bca;
}
.legend .series.danger::before {
  background-color: #d9534f;
}

/*********** media print mode ***************/

@media only print {
  body {
    background-color: transparent;
  }

  .mainpanel2 {
    padding: 0px;
  }

  .mainpanel2 .headerbar {
    display: none;
  }

  .mainpanel2 .contentpanel {
    padding: 0px;
    margin: 0px;
  }

  .panel-report {
  }

  .panel-report .wrapcontent {
    width: 980px;
  }

  .panel-report .wrapcontent .prttitle {
    display: block;
  }

  .panel-report .wrapcontent .col-lg-2 {
    width: 16%;
  }

  .panel-report .wrapcontent .col-lg-3 {
    width: 25%;
  }

  .panel-report .wrapcontent .col-lg-4 {
    width: 34%;
  }

  .panel-report .wrapcontent .col-lg-6 {
    width: 50%;
  }

  .panel-report .wrapcontent .col-lg-5 {
    width: 41%;
  }

  .panel-report .wrapcontent .col-lg-8 {
    width: 66%;
  }

  .panel-report .wrapcontent .col-lg-7 {
    width: 58%;
  }

  .panel-report .wrapcontent .col-lg-9 {
    width: 75%;
  }

  .panel-report .wrapcontent .col-6 {
    width: 50%;
  }

  .panel-report .nav-tabs {
    display: none;
  }

  .page-break {
    page-break-after: always;
  }

  .page-break + .widget {
    border-top: 30px solid #fff;
  }

  .widget .widget-header > .title > i {
    display: none;
  }

  .widget.print {
    position: relative;
  }

  .widget.print > .widget-header {
    position: absolute;
    width: 100%;
  }

  .widget.print thead {
    border-top: 30px solid #fff;
  }

  table { page-break-after:auto }
  tr    { page-break-inside:avoid; page-break-after:auto }
  td    { page-break-inside:avoid; page-break-after:auto }
  thead { display:table-header-group }
  tfoot { display:table-footer-group }
}