#admin {
  position: fixed;
  z-index: 999;
  margin-left: -121px;
  transition: margin 0.5s;
}
@media (max-device-width: 380px) {
  #admin {
    display: none;
  }
}
#admin ul.admin-menu {
  position: fixed;
  z-index: 999;
  width: 170px;
  min-height: 100%;
  background-color: #435D8A;
  z-index: 999;
  padding: 10px 0 10px 0;
}
#admin ul.admin-menu li {
  border-bottom: 2px solid rgba(255, 255, 255, 0.2);
  height: 28px;
  padding: 5px 10px 5px 10px;
  font-size: 20px;
  line-height: 28px;
  font-weight: 400;
  color: #fff;
}
#admin ul.admin-menu li:hover {
  opacity: 0.8;
}
#admin ul.admin-menu li i {
  display: block;
  width: 26px;
  height: 27px;
  background-repeat: no-repeat;
  float: right;
}
#admin ul.admin-menu li.add i {
  background-image: url(/img/tools/add.png);
}
#admin ul.admin-menu li.website i {
  background-image: url(/img/tools/website.png);
}
#admin ul.admin-menu li.dashboard i {
  background-image: url(/img/tools/dashboard.png);
}
#admin ul.admin-menu li.profile i {
  background-image: url(/img/tools/account.png);
}
#admin ul.admin-menu li.articles i {
  background-image: url(/img/tools/article.png);
}
#admin ul.admin-menu li.account i {
  background-image: url(/img/tools/account.png);
}
#admin ul.admin-menu li.pages i {
  background-image: url(/img/tools/page.png);
}
#admin ul.admin-menu li.quit i {
  background-image: url(/img/tools/quit.png);
}
#admin ul.admin-menu li.media i {
  background-image: url(/img/tools/image.png);
}
#admin ul.admin-menu li a {
  color: inherit;
}
#admin .articles-search, #admin .media-search {
  height: 100%;
  position: fixed;
  top: 0px;
  z-index: 999;
  margin-left: -200px;
  width: 200px;
  height: 100%;
  background-color: #40557c;
  transition: margin 1s;
  padding: 10px;
}
#admin .articles-search .close, #admin .media-search .close {
  text-align: right;
  display: block;
  color: #fff;
}
#admin .articles-search .filters, #admin .media-search .filters {
  margin-left: 20px;
}
#admin .articles-search .results, #admin .media-search .results {
  height: 90%;
  overflow-y: auto;
  overflow-x: hidden;
}
#admin .articles-search input[type=text], #admin .media-search input[type=text] {
  border: 0;
  margin: 10px 0 0 20px;
  width: 120px;
  padding: 10px 10px 10px 30px;
  font-size: 16px;
  background-color: rgba(0, 0, 0, 0.2);
  color: #fff;
  background-image: url(/img/tools/search.png);
  background-repeat: no-repeat;
  background-position: 5px center;
}
#admin .articles-search label, #admin .media-search label {
  color: #fff;
  margin: 3px 0 10px 0;
  display: block;
}
#admin .articles-search label input, #admin .media-search label input {
  display: block;
  float: left;
  margin-right: 5px;
  margin-left: 20px;
}
#admin .articles-search.active, #admin .media-search.active {
  margin-left: 155px;
}
#admin .articles-search h1, #admin .media-search h1 {
  color: #fff;
  padding: 10px;
}
#admin .articles-search h1 a, #admin .media-search h1 a {
  color: inherit;
  cursor: pointer;
  font-weight: 400;
}
#admin .articles-search h1 a.active, #admin .media-search h1 a.active {
  font-weight: 900;
}
#admin .articles-search ul, #admin .media-search ul {
  background-color: transparent;
  margin: 0 0 0 0px;
  padding: 0;
}
#admin .articles-search li, #admin .media-search li {
  font-weight: 400;
  color: #fff;
  cursor: pointer;
  padding: 5px 0 5px 0;
  border-bottom: 2px solid rgba(255, 255, 255, 0.2);
}
#admin .articles-search li ul, #admin .media-search li ul {
  clear: both;
}
#admin .articles-search li ul li, #admin .media-search li ul li {
  padding: 2px 4px 2px 23px;
  margin-top: 5px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  border-bottom: none;
}
#admin .articles-search li ul li a, #admin .media-search li ul li a {
  font-size: 10px;
}
#admin .articles-search li p, #admin .media-search li p {
  padding: 0;
  margin: 0 0 0 5px;
  font-size: 14px;
  line-height: 15px;
  margin-left: 45px;
}
#admin .articles-search li span, #admin .media-search li span {
  display: block;
  font-size: 9px;
  line-height: 9px;
  margin-left: 45px;
}
#admin .articles-search li .thumb, #admin .media-search li .thumb {
  width: 40px;
  height: 40px;
  overflow: hidden;
  margin: 0 5px 5px 13px;
  background-size: cover;
  background-position: center center;
  float: left;
  background-color: rgba(0, 0, 0, 0.1);
}
#admin .articles-search li img, #admin .media-search li img {
  width: 40px;
  float: left;
  margin: 0;
}
#admin .articles-search li .preview, #admin .media-search li .preview {
  position: absolute;
  margin-left: 200px;
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid #40557c;
  padding: 10px;
  width: 400px;
  display: none;
  color: #000;
}
#admin .articles-search li .preview h2, #admin .media-search li .preview h2 {
  color: #000;
}
#admin .articles-search li:hover .preview, #admin .media-search li:hover .preview {
  display: block;
}
#admin .articles-search .spinner, #admin .media-search .spinner {
  position: absolute;
  width: 100px;
  height: 100px;
  right: 60px;
  top: 30px;
  color: #fff;
  z-index: 2;
  color: #fff;
  display: none;
}
#admin .articles-search .spinner p, #admin .media-search .spinner p {
  text-align: center;
  margin-top: -80px;
  font-weight: 900;
  font-size: 18px;
}
#admin .articles-search ul.mediaResultList li, #admin .media-search ul.mediaResultList li {
  clear: both;
  height: auto;
  padding: 5px 10px 5px 10px;
  width: 140px;
}
#admin .articles-search ul.mediaResultList li .media-thumb, #admin .media-search ul.mediaResultList li .media-thumb {
  width: 135px;
  height: 85px;
  overflow: hidden;
  background-color: rgba(255, 255, 255, 0.5);
}
#admin .articles-search ul.mediaResultList li img, #admin .media-search ul.mediaResultList li img {
  width: 100%;
  display: block;
  cursor: move;
}
#admin .articles-search ul.mediaResultList li p, #admin .media-search ul.mediaResultList li p {
  clear: both;
  width: 135px;
  overflow: hidden;
  font-size: 11px;
  padding: 2px 0 2px 0;
  border-top: 1px solid #fff;
  margin: 5px 0 5px 0;
  min-height: 0px;
}
#admin .articles-search ul.mediaResultList li .video, #admin .media-search ul.mediaResultList li .video {
  width: auto;
  background-size: cover;
  background-position: center center;
  max-width: 135px;
  margin-right: 5px;
  height: 85px;
}
#admin .articles-search ul.mediaResultList li a.audio, #admin .media-search ul.mediaResultList li a.audio {
  background-image: url(/images/podcast/play.png);
  background-repeat: no-repeat;
  display: block;
  background-position: center center;
  width: 135px;
  height: 85px;
  background-color: #fff;
}
#admin .articles-search ul.mediaResultList li a.document, #admin .media-search ul.mediaResultList li a.document {
  background-image: url(/images/img/pdf-icon.png);
  background-repeat: no-repeat;
  display: block;
  background-position: center center;
  width: 135px;
  height: 85px;
  background-color: #fff;
}
#admin .articles-search ul.mediaResultList a.loadmore, #admin .media-search ul.mediaResultList a.loadmore {
  color: #fff;
  font-weight: 900;
  font-size: 18px;
}
#admin .articles-search.updating ul.mediaResultList, #admin .media-search.updating ul.mediaResultList {
  opacity: 0.1;
}
#admin .articles-search.updating ul.article-results, #admin .media-search.updating ul.article-results {
  opacity: 0.1;
}
#admin .articles-search.updating .spinner, #admin .media-search.updating .spinner {
  display: block;
}
#admin.active {
  margin-left: 0;
}

.pusher {
  transition: margin 0.5s;
  height: 100%;
}
.pusher.active {
  margin-left: 160px;
}

.context-edit {
  position: absolute;
  display: none;
  padding: 2px 0 2px 6px;
  border: 1px solid #ccc;
  z-index: 999;
  background-color: #fff;
  width: 182px;
}
.context-edit ul {
  margin: 1px;
}
.context-edit ul li {
  height: 19px;
  width: 19px;
  background-repeat: no-repeat;
  display: inline-block;
  position: relative;
  z-index: 99;
  margin: 0 3px 0 0;
  cursor: pointer;
}
.context-edit ul li.move {
  background-image: url(/img/admin/move.png);
}
.context-edit ul li.template {
  background-image: url(/img/admin/template.png);
}
.context-edit ul li.grid {
  background-image: url(/img/admin/colrow.png);
}
.context-edit ul li.move {
  background-image: url(/img/admin/move.png);
}
.context-edit ul li.edit {
  background-image: url(/img/admin/edit.png);
}
.context-edit ul li.extended-edit {
  background-image: url(/img/admin/full-edit.png);
}
.context-edit ul li.delete {
  background-image: url(/img/admin/bin.png);
}
.context-edit ul li.save {
  background-image: url(/img/admin/save.png);
}
.context-edit ul li.link {
  background-image: url(/img/admin/link.png);
}
.context-edit ul li.align {
  background-image: url(/img/admin/align.png);
}
.context-edit ul li ul {
  display: none;
  margin: 20px 0 0 -15px !important;
  position: absolute;
  background-color: #fff;
  padding: 2px 2px 2px 6px;
  border: 1px solid #fff;
  min-width: 120px;
}
.context-edit ul li ul li {
  display: block;
  text-align: center;
  cursor: pointer;
  margin: 2px;
  padding: 2px;
  width: auto;
  height: auto;
}
.context-edit ul li ul li:hover {
  color: #ebebeb;
}
.context-edit ul li.active ul {
  display: block;
}

.systeMessage {
  border-radius: 15px;
  background-color: #fff;
  padding: 40px;
  width: 400px;
  margin: 20px auto;
}
.systeMessage h2, .systeMessage input, .systeMessage label, .systeMessage p {
  display: block;
  text-align: center;
  margin: 0 auto 10px auto;
}

section.article .context-edit ul {
  margin: 0 !important;
}

.backdrop-edit {
  background-color: #ccc;
  cursor: move;
}

.sub-level .move {
  position: absolute;
  opacity: 0.8;
  cursor: pointer;
  display: none;
  right: -8px;
  top: 2px;
  width: 19px;
  height: 19px;
  background-image: url(/img/admin/move.png);
  background-color: #fff;
}
.sub-level .delete {
  position: absolute;
  opacity: 0.8;
  cursor: pointer;
  display: none;
  right: -8px;
  top: 50px;
  width: 19px;
  height: 19px;
  background-image: url(/img/admin/bin.png);
  background-color: #fff;
}
.sub-level .placeholder {
  height: 70px;
  width: 100%;
  background-color: #ececec;
}
.sub-level li {
  position: relative;
}
.sub-level li:hover .move {
  display: block;
}
.sub-level li:hover .delete {
  display: block;
}

.popover {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1010;
  display: none;
  max-width: 276px;
  padding: 1px;
  text-align: left;
  white-space: normal;
  background-color: #fff;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 6px;
  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  background-clip: padding-box;
}

.btn {
  display: inline-block;
  padding: 6px 12px;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: normal;
  line-height: 1.428571429;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 4px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}

.btn-group > .btn, .btn-group-vertical > .btn {
  position: relative;
  float: left;
}

.image.uploading {
  background-size: 30px 30px !important;
  position: relative;
  background-repeat: repeat;
  -webkit-animation: barberpole 0.5s linear infinite;
  background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.1) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.1) 75%, transparent 75%, transparent) !important;
}
.image.uploading p {
  position: absolute;
  top: 50%;
  margin-top: -10px;
  width: 100%;
  text-align: center;
}
.image.uploading p span {
  display: block;
}

.review-panel p {
  font-size: 20px;
  line-height: 23px;
  padding: 0 0 10px 0;
}
.review-panel p a, .review-panel p strong {
  color: #435D8A;
  font-weight: 900;
}

.review-bar {
  bottom: 0px;
  left: 40px;
  position: fixed;
  height: 60px;
  z-index: 998;
  background-color: #435D8A;
  opacity: 0.8;
  width: 100%;
  color: #fff;
}
.review-bar p {
  padding: 18px 15px 10px 20px;
  float: left;
  font-size: 20px;
}
.review-bar select {
  float: left;
  font-size: 23px;
  margin-top: 16px;
  max-width:15%;
}
.review-bar input[type="submit"] {
  margin-top: 10px;
}

.admin-panel {
  margin: 0 0 0 50px;
}
.admin-panel .index-panel {
  padding: 50px 0;
}
.admin-panel .index-panel h1, .admin-panel .index-panel h2 {
  font-size: 40px;
  padding: 0 0 10px 0;
}
.admin-panel .index-panel p.intro {
  padding: 0 0 10px 0;
  font-size: 22px;
  line-height: 26px;
}
.admin-panel .index-panel label {
  padding: 0 0 5px 0;
}
.admin-panel .index-panel .rightCol {
  float: right;
  width: 250px;
}
.admin-panel .index-panel .leftCol {
  float: left;
  overflow: hidden;
}
.admin-panel .index-panel .big-title {
  font-size: 35px;
  width: 450px;
  line-height: 40px;
  height: auto;
  padding: 0 0 5px 5px;
}
.admin-panel .index-panel .tagSelect {
  width: 800px;
  overflow: hidden;
}
.admin-panel .index-panel .tagSelect ul {
  margin: 0;
  padding: 0;
}
.admin-panel .index-panel .tagSelect ul li {
  width: 160px;
  float: left;
  padding: 5px;
  margin: 5px;
}
.admin-panel .index-panel .tagSelect ul li input {
  float: left;
  display: none;
}
.admin-panel .index-panel .tagSelect ul li ul li {
  margin: 0 0 5px 0;
  padding: 5px;
  float: none;
  width: auto;
  background-color: #b6c1c6;
}
.admin-panel .index-panel .tagSelect ul li ul li.active {
  border: 1px solid red;
}
.admin-panel .index-panel .tagList {
  width: 800px;
  overflow: hidden;
}
.admin-panel .index-panel .tagList ul {
  margin: 0;
  padding: 0;
}
.admin-panel .index-panel .tagList ul li {
  width: auto;
  float: left;
  padding: 5px;
  margin: 5px;
  background-color: #b6c1c6;
}
.admin-panel .index-panel .tagList ul li input {
  float: left;
  display: none;
}

.dashboard .intro p {
  font-size: 20px;
  line-height: 22px;
  padding: 10px 0 10px 0;
}
.dashboard .legend p {
  width: 100px;
  float: left;
}
.dashboard .legend p span {
  display: block;
  float: left;
  width: 15px;
  height: 15px;
  margin-right: 5px;
}
.dashboard .mediaList {
  clear: both;
  overflow: hidden;
}
.dashboard .mediaList .description {
  display: none;
}
.dashboard .mediaList li {
  float: left;
  margin: 15px 15px 0 0;
  height: 120px;
  width: 120px;
}
.dashboard .mediaList li img {
  width: 120px;
}
.dashboard .mediaList li h3 {
  overflow: hidden;
}
.dashboard .mediaList li .handle {
  display: none;
}

.hint-box {
  position: fixed;
  z-index: 9999;
  top: 100px;
  left: 50%;
  margin-left: -100px;
  width: 200px;
  height: auto;
  padding: 10px;
  background-color: #fff;
  border: 5px solid #435D8A;
  border-radius: 10px;
}
.hint-box p {
  padding: 10px 10px 10px 40px;
  text-align: center;
  font-size: 20px;
  line-height: 25px;
  background-image: url(/img/admin/alert.png);
  background-repeat: no-repeat;
  background-position: left center;
}
.hint-box.tick p {
  background-image: url(/img/admin/tick.png);
}

.cropper-container {
  background-color: #fff;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  z-index: 9990;
}
.cropper-container .cropper {
  position: relative;
  width: 460px;
  height: 313px;
  border: 3px solid #ccc;
  float: left;
  margin: 10px 20px;
}
.cropper-container .crop-size {
  width: auto;
  margin: 10px 0 0 20px;
}
.cropper-container .crop-size h3 {
  background-color: #fff;
  display: inline-block;
  position: absolute;
  z-index: 99;
  padding: 5px;
  opacity: 0.7;
}
.cropper-container .cropper-preview {
  position: relative;
  border: 3px solid #ccc;
  overflow: hidden;
}
.cropper-container .crop-small {
  width: 219px;
  height: 144px;
}
.cropper-container .instructions {
  padding: 10px 0 0 0;
  width: 230px;
  float: left;
}
.cropper-container .btn {
  display: inline-block;
  padding: 6px 12px;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: normal;
  line-height: 1.428571429;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  background-image: none;
  border: 1px solid transparent;
  background-color: #435D8A;
  color: #fff;
  margin: 10px;
  border-radius: 4px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}

body, html {
  height: 100%;
}

.tagSelect {
  display: none;
  position: absolute;
  top: 30px;
  left: 50%;
  width: 700px;
  margin-left: -300px;
}
.tagSelect ul {
  overflow: hidden;
  margin: 10px 0 0 10px;
}
.tagSelect ul li {
  width: 150px;
  float: left;
  font-weight: 600;
}
.tagSelect ul li ul {
  margin: 0;
}
.tagSelect ul li ul li {
  float: left;
  font-weight: 400;
  width: auto;
}
.tagSelect ul li label {
  min-height: 15px;
  display: block;
  width: 140px;
  padding-bottom: 5px;
  border-bottom: 1px solid #c6ebfc;
}
.tagSelect ul li label input {
  float: left;
  margin: 5px;
}
.tagSelect.active {
  display: block;
}

.tagList ul {
  height: 120px;
  overflow: auto;
}

.article-editor {
  margin-left: 5px;
  height: calc(100% - 55px);
  width: calc(100% - 60px);
  position: absolute;
}

.action-bar {
  position: fixed;
  bottom: 0px;
  left: 45px;
  height: 60px;
  width: calc(100% - 45px);
  z-index: 999;
}
.action-bar .save-btn {
  float: right;
  position: relative;
  background-color: #435D8A;
  color: #fff;
  z-index: 99;
  font-size: 22px;
  margin: 0px 15px 0 0;
  padding: 3px 20px 3px 20px;
}

.meta-bar {
  position: absolute;
  background-color: #fff;
  width: 100%;
  margin-top: 50px;
  border: 3px solid #435D8A;
  transition: margin 100ms;
  z-index: 2;
}
.meta-bar.active {
  margin-top: -160px;
  height: 210px;
  z-index: 1;
}
.meta-bar .meta-row {
  width: 200px;
  margin: 5px;
  float: left;
  border-right: 1px solid #ccc;
  padding-right: 10px;
}
.meta-bar .meta-row label {
  font-weight: 600;
  margin-bottom: 5px;
}
.meta-bar .meta-row select {
  width: 180px;
}
.meta-bar .meta-row input {
  width: 160px;
}
.meta-bar .meta-row .datepicker {
  width: 230px;
}
.meta-bar .article-details {
  width: 100px;
  height: 12px;
  text-align: center;
  padding: 10px;
  color: #435D8A;
  background-color: #fff;
  border: 3px solid #435D8A;
  border-bottom: none;
  position: absolute;
  margin-top: -35px;
  right: 140px;
  border-radius: 5px;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
}

.media-row {
  position: absolute;
  background-color: #fff;
  width: 100%;
  height: 200px;
  margin-top: 50px;
  border: 3px solid #435D8A;
  z-index: 2;
  transition: margin 100ms;
}
.media-row.active {
  margin-top: -85px;
  z-index: 1;
}
.media-row .media-details {
  width: 100px;
  height: 12px;
  text-align: center;
  padding: 10px;
  color: #435D8A;
  background-color: #fff;
  border: 3px solid #435D8A;
  border-bottom: none;
  position: absolute;
  margin-top: -35px;
  right: 280px;
  border-radius: 5px;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
}
.media-row .mediaList {
  height: calc( 100% - 10px);
  margin: 5px;
  width: calc( 100% - 10px);
  overflow-y: scroll;
  background-color: #edecec;
}
.media-row .mediaList li {
  float: left;
  width: 66px;
  height: 75px;
  margin: 5px;
  padding: 5px;
  background-color: #fff;
  overflow: hidden;
}
.media-row .mediaList li h3 {
  font-weight: 200;
  font-size: 9px;
  line-height: 9px;
  background-color: rgba(255, 255, 255, 0.7);
  display: block;
  margin-top: -10px;
  height: 30px;
  position: relative;
  z-index: 99;
}
.media-row .mediaList li .image-well {
  height: 40px;
  overflow: hidden;
  cursor: -webkit-grab;
}
.media-row .mediaList li a {
  display: block;
  width: 15px;
  height: 15px;
  text-indent: -9000px;
  float: left;
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  margin-right: 8px;
}
.media-row .mediaList li a.delete {
  background-image: url(/img/admin/small-delete.png);
}
.media-row .mediaList li a.edit {
  background-image: url(/img/admin/small-edit.png);
}
.media-row .mediaList li .handle {
  width: 15px;
  height: 15px;
  float: left;
  text-indent: -9000px;
  overflow: hidden;
  background-image: url(/img/admin/move-small.png);
}

.edit-column {
  width: calc(50% - 20px);
  padding: 10px;
  float: left;
  height: calc(100% - 20px);
  transition: bottom 0.5s;
}
.edit-column .title {
  padding: 5px;
  height: auto;
  margin-bottom: 5px;
  font-size: 28px;
  display: block;
  float: none;
  width: calc(100% - 10px);
  border: none;
  border-radius: 0;
  border-bottom: 2px solid #435D8A;
}
.edit-column .edit-row, .edit-column .cke_reset, .edit-column iframe, .edit-column .cke_contents, .edit-column textarea, .edit-column .cke_inner {
  height: 100%;
}
.edit-column .edit-row iframe, .edit-column .cke_reset iframe, .edit-column iframe iframe, .edit-column .cke_contents iframe, .edit-column textarea iframe, .edit-column .cke_inner iframe {
  height: 100%;
}

.media-editor {
  margin-left: 50px;
}
.media-editor .settings {
  width: 250px;
  float: left;
}
.media-editor .settings .row {
  padding: 20px;
}
.media-editor .media {
  float: left;
  width: calc(100% - 520px);
  margin-left: 80px;
  margin-top: 10px;
}
.media-editor .media .imageEdit {
  float: left;
}
.media-editor .media .preview-image {
  margin-left: 10px;
}
.media-editor .media .crop-now {
  display: block;
  padding: 20px;
  float: left;
  width: 90px;
  margin: 20px;
  background-color: #d0cbcb;
  text-align: center;
  border-radius: 10px;
}

@-webkit-keyframes barberpole {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 60px 30px;
  }
}