* {
    font-size: 13px;
}
*:not(.fa):not(.glyphicon) {
    font-family: "Segoe UI", Helvetica, sans-serif;
}
html[data-font="helvetica"] *:not(.fa):not(.glyphicon) {
    font-family: Helvetica;
}
html[data-font="segoe-ui"] *:not(.fa):not(.glyphicon) {
    font-family: "Segoe UI";
}
html[data-font="sans-serif"] *:not(.fa):not(.glyphicon) {
    font-family: sans-serif;
}
html[data-font="tahoma"] *:not(.fa):not(.glyphicon) {
    font-family: tahoma;
}
html[data-font="time-new-roman"] *:not(.fa):not(.glyphicon) {
    font-family: "Time New Roman";
}
html[data-size="xs"] * {
    font-size: 8px;
}
html[data-size="sm"] * {
    font-size: 13px;
}
html[data-size="md"] * {
    font-size: 16px;
}
html[data-size="lg"] * {
    font-size: 24px;
}
.ket-qua-thi,
.ket-qua-thi + span {
    text-transform: uppercase;
}
.report-msg {
    color: #504b44;
    text-shadow: 1px 3px 1px #C7CCD0;
    font-size: 30px !important;
    font-weight: bold;
    text-align: center;
    text-transform: uppercase;
}
.system-logo {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    max-height: 50px;
    max-width: 160px;
}
body {
    background: #e8ebf1;
}
.navbar-toggle {
    border-radius: 0;
}
.table > tbody > tr > td,
.table > tbody > tr > th,
.table > tfoot > tr > td,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > thead > tr > th {
    padding: 8px;
    line-height: 1.42857143;
    vertical-align: middle;
    border: 1px solid #ddd;
}
.navbar.navbar-fixed-top {
    background-color: #504b44;
    background-image: none;
    box-shadow: none;
}
.navbar-default .navbar-nav > li > a {
    color: #fff;
    text-transform: uppercase;
}
.viettel-logo {
    margin-top: -5px;
 height: 43px;
    display: inline-block !important;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .open > a {
    background-image: none;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:focus,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > li > a:focus,
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:focus,
.navbar-default .navbar-nav > .open > a:hover {
    color: #fff;
    background-color: #ffc20e;
}
.togmb {
    margin-right: 15px;
}
.system-require-header {
    padding-bottom: 10px;
}
.menuct {} .navbar-brand,
.navbar-nav > li > a {
    text-shadow: none;
}
.navbar-brand {
    width: 220px;
    position: relative;
}
.navbar .label-username {
    text-transform: initial;
}
.navbar .user-avatar {
    display: -webkit-inline-box;
    width: 35px;
    border-radius: 50%;
    border: 2px solid #FFF;
    border-width: 2px !important;
}
.navbar .user-login-info {
    padding: 11px 7px 7px 15px !important;
}
.navbar .mail-icon {
    padding: 15px 7px 9px 7px !important;
}
.navbar .mail-icon .glyphicon {
    font-size: 20px;
}
.navbar .label-username {
    text-transform: initial;
    max-width: 150px;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: -5px;
}
.sidebar.sidebar-right {
    right: 0;
    left: initial;
}
#dnn_contentPane.DNNEmptyPane {
    display: none;
}
#dnn_contentPane {
    min-height: 50%;
    background-color: #FFF;
    border: 1px solid #CCC;
}
a {
    color: #333;
    text-decoration: none;
}
a:hover {
    color: #ffc20e;
    text-decoration: none;
}
.padding-5 {
    padding: 5px !important;
}
.block-title .fa {
    color: #ffc20e;
    margin-right: 10px;
}
.block-title span {
    color: #ffc20e;
    font-weight: bold;
}
.block-title {
    margin-bottom: 15px;
}
table.course-table {
    border-collapse: collapse;
    width: 100%;
    border: 1px solid #CCC;
}
table.course-table td {
    padding: 10px 15px;
}
table.course-table tr.table-header {
    background: #fafafa;
    text-align: center;
    font-weight: bold;
    color: #000;
}
table.course-table td a {
    color: #000;
}
table.course-table tr:not(.table-header):hover {
    background: #E8EBF2;
}
.progress {
    border-radius: 0;
    box-shadow: none;
    background-image: none;
    background: #CFCFCF;
    height: 15px;
    margin-bottom: 0;
}
.progress-bar {
    line-height: 16px;
}
.btn-primary {
    background: #504b44;
    color: #fff !important;
    border: 0;
}
.btn-primary:focus,
.btn-primary:hover {
    background-color: #ffc20e;
}
.btn-default {
    color: #333;
    background: #E6E6E6;
    border-color: #ADADAD;
}
.btn-disable {
    pointer-events: none;
    background: #E6E6E6;
    color: #333;
    border-color: #ADADAD;
}
.alert-password {
    display: none;
}
.row-item:nth-child(2) {
    margin-left: 30px;
}
.block-row .row-item {
    display: inline-block;
}
.block-row .row-item .fa {
    color: #0A89AD;
    margin-right: 5px;
}
.hotboy-tab .tab-item {
    display: inline-block;
    height: 30px;
    font-weight: bold;
    padding: 0 30px;
    line-height: 30px;
    position: relative;
    cursor: pointer;
}
.hotboy-tab .tab-item.tab-active {
    background: #D58432;
    color: #FFF;
}
.hotboy-tab .tab-item.tab-active:after {
    position: absolute;
    width: 5px;
    height: 5px;
    bottom: 8px;
    margin: auto;
    left: 0;
    right: 0;
    font-family: 'Glyphicons Halflings';
    content: "\e252";
    color: #D58432;
    font-size: 10px;
}
.block-content .tab-content {
    visibility: hidden;
    position: absolute;
    top: -999;
}
.block-content .tab-content.tab-active {
    position: relative;
    visibility: visible;
    top: 0;
}
.test-soft-item {
    display: inline-block;
    margin: 30px;
    text-align: center;
    font-weight: bold;
    color: #000;
    text-decoration: none !important;
    cursor: pointer;
}
.test-soft-name {
    margin-top: 15px;
}
.test-soft-label {
    font-weight: bold;
}
.vsContainerLeft > table:first-of-type {
    margin: 15px;
}
.vsContainerLeft {
    height: 100%;
}
.page-content {
    height: 100%;
}
.left-menu-exam {
    padding: 15px;
}
.Question * {
    font-weight: normal;
}
.Question .Content input + label {
    margin-left: 5px;
}
.Question .Content .question {
    border-bottom: 1px dashed #504b44;
    margin-bottom: 15px;
}
.Question .Header > span > span {
    font-weight: bold;
}
.list-question-items > tbody > tr {
    border-bottom: 1px solid #504b44;
}
#Exam_Question .Question .Content {
    border: none;
}
#Exam_Pagging {
    display: none;
}
.mm,
.ss {
    font-size: 13px;
    color: #000;
    display: inline-block;
    margin: 5px 30px;
}
.hr {
    display: block;
    width: 100%;
    height: 1px;
    background-color: #CCC;
}
#list-question-shortcut {
    margin: 15px 0;
    height: calc(100% - 200px);
}
.scrollable .overview {
    width: 100%;
}
.block-question-shortcut {
    display: inline-block;
    background-color: #888;
    margin: 5px;
    width: calc(100% / 6 - 10px);
    height: 30px;
    color: #FFF;
    font-size: 14px;
    text-align: center;
    line-height: 30px;
    cursor: pointer;
}
.answered {
    background: #028C87;
}
.marked {
    background: #E18C35;
}
.defaulted {
    background: #888;
}
div#shortcut-description {
    margin: 15px 0;
}
div#shortcut-description > .des-item > div {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    display: inline-block;
    margin-bottom: -7px;
}
div#shortcut-description > .des-item {
    display: inline-block;
    margin: 0 5px 15px 0;
}
.test-cmd {
    margin: auto;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 5px 15px;
}
.scrollable .scroll-bar.vertical .thumb {
    margin-left: 10px;
}
.exam-time {
    text-align: center;
    margin-bottom: 15px;
}
.exam-time span:not(.haicham) {
    background: #504b44;
    color: #fff;
    margin: 1px;
    width: 30px;
    display: inline-block;
    font-size: 36px;
    line-height: 40px;
    height: 40px;
    padding: 0 5px;
}
.exam-time span.haicham {
    font-size: 36px;
    line-height: 40px;
    height: 40px;
    padding: 0 1px;
    margin: 1px;
    width: 10px;
    display: inline-block;
}
.exam-time span.alert.haicham {
    color: #ffc20e;
}
.exam-time span.alert:not(.haicham) {
    -webkit-animation: nhapnhay 0.5s infinite;
    -moz-animation: nhapnhay 0.5s infinite;
    -o-animation: nhapnhay 0.5s infinite;
    animation: nhapnhay 0.5s infinite;
}
.modal.center-vertical {
    text-align: center;
    padding: 0!important;
}
.modal.center-vertical:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    margin-right: -4px;
}
.modal.center-vertical .modal-dialog {
    display: inline-block;
    text-align: left;
    vertical-align: middle;
}
.modal.h40vh .modal-body {
    min-height: 30vh;
    line-height: 10vh;
}
.modal.large-text .modal-body,
.modal.large-text .modal-body * {
    font-size: 20px !important;
    text-align: center;
}
.goodluck {
    font-weight: bold;
}
@-webkit-keyframes nhapnhay {
    0% {
        background: #fafafa;
    }
    100% {
        background: #ffc20e;
        color: #504b44;
    }
}
@-moz-keyframes nhapnhay {
    0% {
        background: #fafafa;
    }
    100% {
        background: #ffc20e;
        color: #504b44;
    }
}
@-o-keyframes nhapnhay {
    0% {
        background: #fafafa;
    }
    100% {
        background: #ffc20e;
        color: #504b44;
    }
}
@keyframes nhapnhay {
    0% {
        background: #fafafa;
    }
    100% {
        background: #ffc20e;
        color: #504b44;
    }
}
/*** COLOR ***/

.blue-1 {
    color: #ffc20e;
}
.blue-2 {
    color: #ffc20e;
}
.blue-3 {
    color: #ffc20e;
}
.red {
    color: #fc5044;
}
.orange {
    color: #e28e36;
}
.green {
    color: #078b01;
}
/*** BACKGROUND ***/

.bgblue-1 {
    background: #ffc20e;
}
.bgblue-2 {
    background: #ffc20e;
}
.bgblue-3 {
    background: #ffc20e;
}
.bgred {
    background: #fc5044;
}
.bgorange {
    background: #e28e36;
}
.bggreen {
    background: #d6f3f1;
}
a.bgblue-1:hover {
    background: #504b44;
}
/*** FONT ***/

.f1d0 {
    font-size: 1em;
}
.f1d1 {
    font-size: 1.1em;
}
.f1d2 {
    font-size: 1.2em;
}
.f1d3 {
    font-size: 1.3em;
}
.f1d4 {
    font-size: 1.4em;
}
.f1d5 {
    font-size: 1.5em;
}
.f1d6 {
    font-size: 1.6em;
}
.f1d7 {
    font-size: 1.7em;
}
.f1d8 {
    font-size: 1.8em;
}
.f1d9 {
    font-size: 1.9em;
}
/**** PARAGRAP ****/

.h10px {
    height: 10px;
}
.no-padding {
    padding: 0;
}
.no-padding-left {
    padding-left: 0;
}
.no-padding-right {
    padding-right: 0;
}
.p-h-10 {
    padding: 0 10px;
}
.p-t-10 {
    padding-top: 10px;
}
.m-b-0 {
    margin-bottom: 0px !important;
}
.m-b-10 {
    margin-bottom: 10px !important;
}
.m-b-15 {
    margin-bottom: 15px !important;
}
.italic {
	font-style:italic;
}
.floatleft{
	float:left !important;
}
/**** HEADER ****/

.tnheader .navbar-default .navbar-toggle {
    border: 0;
}
.tnheader .navbar-toggle {
    background-color: transparent;
    border: 0;
    border-radius: 0;
    float: left;
    margin: 8px 0;
    padding: 5px;
    position: relative;
}
.tnheader .navbar-default .navbar-toggle:focus,
.navbar-default .navbar-toggle:hover {
    background: none;
}
.tnheader .navbar-toggle .icon-bars {
    border-radius: 50%;
    display: block;
    height: 5px;
    width: 5px;
}
.navbar-default .menuct {
    margin-top: 10px;
}
.navbar-default .navbar-toggle .icon-bar {
    background: #fff;
    height: 3px;
}
.navbar-toggle .icon-bar + .icon-bar {
    margin-top: 6px;
}
.navbar-default .navbar-toggle .icon-bars {
    background: #fff;
}
.navbar-toggle .icon-bars + .icon-bars {
    margin-top: 4px;
}
.navbar-default .navbar-toggle:focus,
.navbar-default .navbar-toggle:hover {
    background-color: transparent;
}
/******************* / MEDIA QUERY / **********************/
/****************** Created by: HUNGPV ********************/
/*** LARGE DESKTOP ****/

@media (min-width: 1200px) {
    #dnn_contentPane {
        padding: 15px;
    }
	.new-style .row {
		margin-left: -15px;
		margin-right: -15px;
	}	
	.new-style .page-box {
		margin-left: -15px;
		margin-right: -15px;
	}
	/* .new-style .lastest-note { */
		/* margin-right: 30px; */
	/* } */
	.new-style .owl-carousel .item {
		margin: 0 5px;
	}
	#dnnBodyContent {
        padding: 30px;
    }
    .tn-userprofile .usernotify,
    .tn-userprofile .userinfo {
        padding: 15px;
    }
    .tn-login {
        padding: 50px 15px;
    }
    .tn-login .form-login {
        background: #fff;
        border: 1px solid #d5d5d5;
        padding: 30px;
        margin: 30px;
    }
    .hotboy-tab {
        background-color: #E8EBF2;
        padding: 0px 15px;
        width: calc(100% + 30px);
        margin: 15px -15px;
    }
}
/*** DESKTOP ****/

@media (max-width: 1200px) {
    #dnn_contentPane {
        padding: 15px;
    }
    #dnnBodyContent {
        padding: 30px;
    }
    .tn-userprofile .usernotify,
    .tn-userprofile .userinfo {
        padding: 15px;
	}
.new-style .page-box {
		margin-left: -5px;
		margin-right: -5px;
	}
	.new-style .report-box .box-name{
		height:55px;
	}
	.mysilide{
		margin-left: -10px;
		margin-right: -10px;
	}
    .tn-login {
        padding: 50px 15px;
    }
    .tn-login .form-login {
        background: #fff;
        border: 1px solid #d5d5d5;
        padding: 30px;
        margin: 30px;
    }
    .hotboy-tab {
        background-color: #E8EBF2;
        padding: 0px 15px;
        width: calc(100% + 30px);
        margin: 15px -15px;
    }
}
/*** TABLET ****/

@media (max-width: 992px) {
    #dnn_contentPane {
        padding: 5px;
    }
	.new-style .page-box {
		margin-left: -5px;
		margin-right: -5px;
	}
	.new-style .report-box .box-name{
		height:55px;
	}
	.new-style .owl-carousel .item {
		margin: 0px;
	}
	.mysilide{
		margin-left: -10px;
		margin-right: -10px;


	}#dnnBodyContent {
        padding: 5px;
    }
    .col-lg-1,
    .col-lg-10,
    .col-lg-11,
    .col-lg-12,
    .col-lg-2,
    .col-lg-3,
    .col-lg-4,
    .col-lg-5,
    .col-lg-6,
    .col-lg-7,
    .col-lg-8,
    .col-lg-9,
    .col-md-1,
    .col-md-10,
    .col-md-11,
    .col-md-12,
    .col-md-2,
    .col-md-3,
    .col-md-4,
    .col-md-5,
    .col-md-6,
    .col-md-7,
    .col-md-8,
    .col-md-9,
    .col-sm-1,
    .col-sm-10,
    .col-sm-11,
    .col-sm-12,
    .col-sm-2,
    .col-sm-3,
    .col-sm-4,
    .col-sm-5,
    .col-sm-6,
    .col-sm-7,
    .col-sm-8,
    .col-sm-9,
    .col-xs-1,
    .col-xs-10,
    .col-xs-11,
    .col-xs-12,
    .col-xs-2,
    .col-xs-3,
    .col-xs-4,
    .col-xs-5,
    .col-xs-6,
    .col-xs-7,
    .col-xs-8,
    .col-xs-9 {
        min-height: 1px;
        padding-left: 5px;
        padding-right: 5px;
        position: relative;
    }
    .tn-userprofile .usernotify,
    .tn-userprofile .userinfo {
        padding: 5px;
    }
    .tn-login {
        padding: 20px 0px;
    }
    .tn-login .form-login {
        background: #fff;
        border: 1px solid #d5d5d5;
        padding: 5px;
        margin: 0px;
    }
    .hotboy-tab {
        background-color: #E8EBF2;
        padding: 0px 15px;
        width: calc(100% + 10px);
        margin: 15px -5px;
    }
}
/*** MOBILE ****/

@media (max-width: 676px) {
    #dnn_contentPane {
        padding: 5px;
    }
.new-style .page-box {
		margin-left: -5px;
		margin-right: -5px;
	} 
	.new-style .owl-carousel .item {
		margin: 0px;
	}
	.mysilide{
		margin-left: -10px;
		margin-right: -10px;
	}
	#dnnBodyContent {
        padding: 5px;
    }
    .col-lg-1,
    .col-lg-10,
    .col-lg-11,
    .col-lg-12,
    .col-lg-2,
    .col-lg-3,
    .col-lg-4,
    .col-lg-5,
    .col-lg-6,
    .col-lg-7,
    .col-lg-8,
    .col-lg-9,
    .col-md-1,
    .col-md-10,
    .col-md-11,
    .col-md-12,
    .col-md-2,
    .col-md-3,
    .col-md-4,
    .col-md-5,
    .col-md-6,
    .col-md-7,
    .col-md-8,
    .col-md-9,
    .col-sm-1,
    .col-sm-10,
    .col-sm-11,
    .col-sm-12,
    .col-sm-2,
    .col-sm-3,
    .col-sm-4,
    .col-sm-5,
    .col-sm-6,
    .col-sm-7,
    .col-sm-8,
    .col-sm-9,
    .col-xs-1,
    .col-xs-10,
    .col-xs-11,
    .col-xs-12,
    .col-xs-2,
    .col-xs-3,
    .col-xs-4,
    .col-xs-5,
    .col-xs-6,
    .col-xs-7,
    .col-xs-8,
    .col-xs-9 {
        min-height: 1px;
        padding-left: 5px;
        padding-right: 5px;
        position: relative;
    }
    .tn-userprofile .usernotify,
    .tn-userprofile .userinfo {
        padding: 5px;
    }
    .tn-login {
        padding: 20px 0px;
    }
    .tn-login .form-login {
        background: #fff;
        border: 1px solid #d5d5d5;
        padding: 10px;
        margin: 0px;
    }
    .hotboy-tab {
        background-color: #E8EBF2;
        padding: 0px 15px;
        width: calc(100% + 10px);
        margin: 15px -5px;
    }
}
@media (min-width: 768px) and (max-width: 802px) {
    .nav>li>a {
        padding: 15px 10px;
    }
	.new-style .page-box {
		margin-left: -5px;
		margin-right: -5px;
	} 
	.new-style .owl-carousel .item {
		margin: 0px;
	}
	.mysilide{
		margin-left: -10px;
		margin-right: -10px;
	}
}
.flyer-header {
    padding: 5px 75px 5px 10px;
    font-weight: bold;
    color: #504b44;
    position: relative;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
.flyer-header .flyer-command {
    position: absolute;
    right: 0;
    top: 0;
    color: #3E3E3E;
}
.flyer-header .fa {
    cursor: pointer;
    display: inline-block;
    border: 1px solid #ccc;
    height: 27px;
    width: 35px;
    line-height: 27px;
    text-align: center;
    border-top: 0;
    border-right: 0;
    border-bottom: 0;
}
.flyer-header .fa:hover {
    background: #ddd;
}
.flyer-content iframe {
    width: 100%;
    height: calc(100vh - 30px);
}
.flyer-header img {
    margin-top: -5px;
    margin-right: 10px;
}
.main-content-player {
    position: relative;
    height: calc(100% - 50px);
    background-color: white;
}
.htmIFrame {
    height: calc(100vh - 90px) !important;
    width: 100% !important;
}
.player_full {
    cursor: pointer;
}
.fullscreen .block-title {
    padding: 0 20px 6px !important;
}
.fullscreen .htmIFrame {
    height: calc(100vh - 25px) !important;
    width: 100% !important;
}
/* override css by vucuongkg 7/10/2015 fix some UI error*/

.RadTreeView_Simple,
.RadTreeView_Simple a.rtIn,
.RadTreeView_Simple .rtEdit .rtIn input {
    color: #000;
    font: 13px/18px "Segoe UI", Helvetica, Arial, sans-serif;
}
.navbar-collapse {
    max-height: calc(100% - 65px) !important;
}
.glyphicon.glyphicon-th.navbar-toggle {
    border: 1px solid #fff;
    color: #fff;
    font-size: 22px;
    height: 41px;
    width: 44px;
    line-height: 35px;
    padding: 0px 0px 0 2px;
}
@media (max-width: 500px) {
    .main {
        padding: 10px 0;
    }
	.new-style .owl-carousel .item {
		margin: 0px;
	}
	.navbar-brand{
	   padding: 15px 5px;
	}
}
@media (max-width: 767px) {
    .sidebar {
        display: block;
        position: fixed;
        top: 54px;
        right: -250px;
        z-index: 100;
        background-color: #fff;
        width: 250px;
        height: 100%;
        transition: right 0.5s ease;
        overflow: auto;
        max-height: 100vh;
    }
	.new-style .owl-carousel .item {
		margin: 0px;
	}
    .sidebar.shaw {
        right: 0;
        display: block;
    }
}
.ModuleTitle_SubMenu {
    z-index: 999;
    border: 1px solid #ccc;
    background: #fff
}
img {
    max-width: 100%;
}
.css-treeview li a,
.css-treeview li span {
    margin-left: 5px;
    color: #000;
    display: inline-block;
    text-indent: 0;
    width: calc(100% - 10px);
}
.css-treeview label,
.css-treeview a,
.css-treeview label::before {
    vertical-align: top;
}
.css-treeview label::before {
    margin: 5px 3px 0 -10px;
    display: inline-block;
}
.css-treeview li.has-child label,
.css-treeview li.no-child {
    width: 100%;
}
.android-webkit .css-treeview li a,
.android-webkit .css-treeview li span {
    width: 95%;
}
.android-webkit .css-treeview input ~ ul {
    display: none
}
.android-webkit .css-treeview input:checked:not(:disabled) ~ ul {
    display: block
}
.android-webkit .flyer-content iframe {
    height: 95%
}
.android-webkit .main-content-player {
    height: 90%
}
.safari-webkit {
    -webkit-overflow-scrolling: touch;
    -webkit-touch-callout: none;
}
@media (width: 768px) {
    .main {
        margin-left: 33%;
        width: 67%;
    }
}
#dnn_Header_pnNotLogin.navbar-right .dropdown-menu>li>a {
    padding: 3px 5px;
}
.icon-setting-control {
    position: fixed;
    border: 1px solid #272523;
    border-right: none;
    width: 30px;
    height: 30px;
    background-color: #504b44;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    z-index: 999;
    top: 55px;
    right: 0;
    color: #fff;
    line-height: 30px;
    text-align: center;
    cursor: pointer;
    transition: ease-in-out right 0.5s;
}
.icon-setting-control.control-showed {
    right: 250px;
}
.ControlPanel {
    top: 50px;
    right: -252px;
    position: fixed;
    z-index: 999;
    padding: 15px;
    width: 250px;
    height: 390px;
    border: 1px solid #272523;
    border-right: none;
    border-top: none;
    transition: ease-in-out right 0.5s;
    background: #fff;
}
.icon-setting-control.control-showed + .ControlPanel {
    right: -0px;
}
.ui-checkbox label {
    display: inline-block;
    cursor: pointer;
    position: relative;
    padding-left: 25px;
    margin-right: 15px;
    line-height: 21px;
}
.ui-checkbox input[type=radio],
.ui-checkbox input[type=checkbox] {
    display: none;
}
.ui-checkbox input[type=radio]:disabled + label,
.ui-checkbox input[type=checkbox]:disabled + label {
    pointer-events: none;
}
.ui-checkbox input[type=radio]:checked + label:before,
.ui-checkbox input[type=checkbox]:checked + label:before {
    color: #fff;
    text-align: center;
    font: normal normal normal 15px FontAwesome;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    content: "\f00c";
    line-height: 14px;
    display: block;
    background-color: #504b44;
}
.ui-checkbox label:before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 10px;
    position: absolute;
    left: 0;
    top: 1px;
    bottom: 1px;
    background-color: #ffffff;
    border: 1px solid #213d79;
}
.btn-white {
    color: #fff !important;
}
.btn-custom-block {
    display: block;
    margin-bottom: 5px;
}
.frm-home {
	background: #f2f7f8;
    min-height: calc(100vh - 51px);
}
.frm-home .home {
	margin-top: 15px;
}
.frm-home #dnn_contentPane {
	padding: 0;
	border: 0;
}
.frm-home .sidebar {
	background: #fff;
	border-right: 1px solid #ccc;
}
.frm-home .sidebar.sidebar-right {
	background: #fff;
	border-left: 1px solid #ccc;
	z-index: 998;
}
.frm-home .panel-warning>.panel-heading {
    color: #504b44;
    font-weight: bold;
    background-color: #ffc20e;
    border-color: #ffc20e;
}
.frm-home .panel {
	border: none;
}
.frm-home .block-list-item > div {
    padding: 15px;
    border-bottom: 1px solid #ccc;
}
.frm-home .page-default .panel-body {
	padding: 0;
	max-height: 150px;
    overflow-y: auto;
}
.frm-home .thumbnail {
    margin-bottom: 20px;
    padding: 0px;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
	border-bottom: 1px solid #ccc;
	border-top: 0;
	border-left: 0;
	border-right: 0;
}
.frm-home .item.list-group-item {
    float: none;
    width: 100%;
    background-color: #fff;
    margin-bottom: 10px;
	border: 0;
	padding: 0px;
}
.frm-home .item.list-group-item .list-group-image {
    margin-right: 10px;
}
.frm-home .item.list-group-item .thumbnail {
    margin-bottom: 0px;
}
.frm-home .item.list-group-item .caption {
    padding: 9px 9px 0px 9px;
}
.frm-home .item.list-group-item:before,
.frm-home .item.list-group-item:after {
    display: table;
    content: " ";
}
.frm-home .item.list-group-item img {
    float: left;
}
.frm-home .item.list-group-item:after {
    clear: both;
}
.frm-home .list-group-item-text {
    margin: 0 0 11px;
}
.frm-home .stamp {
    position: absolute;
    top: 30px;
    left: 5px;
    background: #d61212;
    color: #fff;
    padding: 5px 15px;
}
.frm-home .thumbnail {
	position: relative;
}
.frm-home .search-form {
	padding-top: 15px;
	border: 1px solid #eee;
}
.frm-home .carousel-control {
	background: none;
}
.frm-home .user-note {
    background: url(../images/yellow-notebook-paper_thumb.jpg) no-repeat;
    width: 100%;
    height: 205px;
    background-position: -85px -78px;
    line-height: 29px;
    padding: 5px;
}
.frm-home .input-date-picker {
    border: 1px solid #ccc;
    background: #e6e6e6;
}
.frm-home .btn-default {
    color: #333;
    background-color: #fff;
    border-color: #ccc;
}
.frm-home .item.list-group-item {
    border: solid #ddd !important;
    border-width: 0px 0px 1px 0px !important;
    padding-bottom: 15px;
}
.frm-home .thumbnail {
    border: none;
}
.sidebar.sidebar-right {
    right: 0;
    left: initial;
}
/******* BOOTSTRAP LIST GRID *******/

.bootstrap-list-grid .row-eq-height + .row-eq-height {
    margin-top: 15px;
}
.bootstrap-list-grid .thumbnail {
    padding: 0 0 30px 0;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    height: 100%;
    position: relative;
}
.bootstrap-list-grid .item.list-group-item {
    float: none;
    width: 100%;
    background-color: #fff;
    margin-bottom: 10px;
}
.bootstrap-list-grid .list-group-image {
    height: 250px;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    margin-bottom: 20px;
}
.bootstrap-list-grid .list-group-image .btn {
    position: absolute;
    bottom: 0;
    right: 0;
    /* left: 0; */
    margin: auto;
    width: 90px;
    box-shadow: 0 1px 5px #000;
    border: 1px solid #ffc20e !important;
}
.bootstrap-list-grid .list-group-image .btn-warning {
	position: absolute;
    right: 0px;
	background-color:#ffc20e;
    border: 1px solid #ffc20e !important;
	box-shadow:none;
}
.bootstrap-list-grid .list-group-image .btn:hover {
    background-color: #f9b212;
    border-color: #e9cc82 !important;
}
.bootstrap-list-grid .item:hover .thumbnail {
    box-shadow: 0px 3px 6px #b1b1b1;
}
.bootstrap-list-grid .item.list-group-item .thumbnail {
    margin-bottom: 0px;
    padding: 0 100px 0 0;
}
.bootstrap-list-grid .item.list-group-item .caption {
    padding: 9px 9px 0px 9px;
    margin-bottom: 0;
}
.bootstrap-list-grid .item.list-group-item {
    background: none;
    border: none;
}
.bootstrap-list-grid .item.list-group-item:before,
.bootstrap-list-grid .item.list-group-item:after {
    display: table;
    content: " ";
}
.bootstrap-list-grid .item.list-group-item img {
    float: left;
}
.bootstrap-list-grid .item.list-group-item:after {
    clear: both;
}
.bootstrap-list-grid .list-group-item-text {
    margin: 0 5px;
}
.bootstrap-list-grid .list-group-item-text > .textgreyX {
    margin-top: 5px;
}
.bootstrap-list-grid .list-title .fa, .bootstrap-list-grid .list-title span {
    font-size: 16px;
    font-weight: bold;
    color: #0467aa;
    margin-top: 5px;
}
.bootstrap-list-grid .list-title {
    display: inline-block;
    margin: 0 5px 5px;
}
.bootstrap-list-grid .list-title + .btn-group .btn {
    border: 1px solid #ccc !important;
    background: #fff !important;
}
.bootstrap-list-grid .row {
    margin: 0 -5px;
}
.bootstrap-list-grid .list-group-footer {
    position: absolute;
    bottom: 10px;
    left: 0;
    right: 0;
}
.bootstrap-list-grid .list-group-item-heading > a {
    color: #0467aa !important;
    font-weight: bold;
    padding: 5px 0;
    word-break: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 50px;
    line-height: 20px;
}
.bootstrap-list-grid .list-group-item .list-group-item-heading > a {
    height: auto;
    -webkit-box-orient: unset;
    -webkit-line-clamp: unset;
}
.bootstrap-list-grid .learning-time {
    border: 1px solid #eee;
    padding: 20px;
}
.bootstrap-list-grid .learning-time .start-date {
    border-right: 1px solid #f5c14a;
}
.bootstrap-list-grid .list-group-footer {
    font-size: 16px;
    margin-top: 15px;
}
.bootstrap-list-grid .list-group-footer .fa {
    font-size: 16px;
    color: #3d7ac1;
}
.row-eq-height {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}
.bootstrap-list-grid .thumbnail .caption {
    padding: 5px 15px;
    color: #333;
}
.list-group-item .list-group-footer {
    left: 385px;
    top: 55px;
    width: 300px;
    text-align: left;
}
.bootstrap-list-grid .textgreyX img {
    float: none !important;
}
.bootstrap-list-grid .list-group-item .list-group-item-text > .textgreyX {
    display: inline-block;
    margin-right: 15px;
}
.bootstrap-list-grid .item.list-group-item .list-group-item-heading {
    position: absolute;
    top: 0;
    left: 385px;
}
.bootstrap-list-grid .item.list-group-item .list-group-image {
    margin-right: 10px;
    width: 200px;
    height: 130px;
    margin-bottom: 0;
}
.bootstrap-list-grid .item.list-group-item .learning-progress {
    position: absolute;
    top: 40px;
    left: 385px;
    margin: 0;
    width: 300px;
}
.bootstrap-list-grid .item.list-group-item .learning-time {
    position: absolute;
    top: 0;
    left: 220px;
    padding: 10px 5px;
    margin: 10px;
}
.bootstrap-list-grid .item.list-group-item .learning-time .start-date, .bootstrap-list-grid .item.list-group-item .learning-time .end-date {
    width: 100%;
    float: none;
}
.bootstrap-list-grid .item.list-group-item .learning-time .start-date {
    border-bottom: 1px solid #f5c14a;
    border-right: none;
    padding-bottom: 15px;
    margin-bottom: 15px;
}
.bootstrap-list-grid .item.list-group-item .list-group-image .btn {
    left: 385px;
}
.item.item-card .icaption {
    font-weight: 500;
    line-height: 18px;
    padding-top: 10px;
    height: 50px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
.item.item-card .date-end {
    color: #ffc20e;
    display: inline-block;
    padding: 5px 10px;
}

.textgreyX {
    color: #818181;
}
.learning-progress {
    margin: 0 15px;
}
.learning-progress .progress {
    border-radius: 10px !important;
    height: 17px;
}
.learning-progress .progress-bar {
    background-color: #ffcd58;
    border-radius: 10px !important; 
}
.learning-progress .progress-label {
    color: #000;
}
.bootstrap-list-grid .list-group-item .progress-x.row .textgreyX {
    width: 110px;
    margin-left: -15px;
}
.bootstrap-list-grid .list-group-item .progress-x.row .width-custom {
    width: 200px !important;
}
.bootstrap-list-grid .thumbnail {
    margin-bottom: 0;
}
.well {
    background: #fff;
    margin: 10px 0 5px;
}
/*
 * Placeholder dashboard ideas
 */

.placeholders { margin-bottom: 30px; text-align: center; }
    .placeholders h4 { margin-bottom: 0; }
.placeholder { margin-bottom: 20px; }
    .placeholder img { display: inline-block; border-radius: 50%; }

 .icon-setting-control.control-showed + .ControlPanel {
    right: -0px;
}
.ControlPanel {
    top: 45px;
    right: -252px;
    position: fixed;
    z-index: 999;
    padding: 15px;
    width: 250px;
    height: 420px;
    border: 1px solid #213d79;
    border-right: none;
    border-top: none;
    transition: ease-in-out right 0.5s;
    background: #fff;
}

    .ControlPanel.visibility { z-index: 1031; visibility: visible; top: 0; }
.modal-content { border-radius: 0; }
    .modal-content button.close { width: 30px; height: 30px; opacity: 1; outline: 0; margin-right: -8px; margin-top: -8px; }
    .alert button.close, .modal-content button.close { display: none; }
        .modal-content button.close span { font-size: 28px; color: #040404; height: 30px; display: block; line-height: 25px; }
    .modal-content .modal-header, .modal-content .modal-body, .modal-content .modal-footer { padding: 10px; }
        .modal-content .modal-footer .btn { color: #333 !important; background: #E6E6E6; border-color: #ADADAD; }
            .modal-content .modal-footer .btn:hover { background: #CACACA; }
* { border-radius: 0 !important; }

.icon-setting-control {
    position: fixed;
    border: 1px solid #213d79;
    border-right: none;
    width: 30px;
    height: 30px;
    background-color: #3b5998;
    border-top-left-radius: 5px!important;
    border-bottom-left-radius: 5px!important;
    z-index: 999;
    top: 90px;
    right: 0;
    color: #fff;
    line-height: 30px;
    text-align: center;
    cursor: pointer;
    transition: ease-in-out right 0.5s;
}
.icon-setting-control.control-showed {
    right: 250px;
}

.myRow{
	width: 100%;
    min-height: 48px;
    cursor: pointer;
    -webkit-transition: background 150ms, padding 200ms;
    transition: background 150ms, padding 200ms;
    background: #fff;
    border: 1px solid #ddd;
    box-sizing: border-box;
    margin: 8px 0;
    font-size: 13px;
    padding: 12px 5px;
    border-left: solid #D58431 3px;
}
.myRow .chk {
	margin-top: 10px;
}
.myRow >.info {
	padding-right: 0; 
	float:right;
	width: calc(100% - 30px);
	margin-top: 5px;
}
.myRow >.info >.date { 
	font-style:italic;
}

.user-text{
	font-style:italic; 
	margin-top:5px; 	
	line-height: 28px;
}
.user-text > b{ 
	font-size:10px!important;
}

.textSearchMail{
	float:left;
	width: calc(100% - 80px);
}
@media (max-width: 1024px) {
    .textgreyX {
        margin: 0 15px 0 0;
    }	 
}
@media (max-width: 565px) {
    .bootstrap-list-grid .list-group-item .list-group-item-text > .textgreyX {
        display: block;
        margin: 0;
    }
    .bootstrap-list-grid .item.list-group-item .thumbnail {
        padding: 0 0 30px 0;
    }
    .bootstrap-list-grid .progress-x.row .width-custom {
        margin: 5px 15px;
    } 
}
@media (max-width: 992px) {
    .bootstrap-list-grid .progress-x.row .width-custom {
        margin: 5px 15px;
        width: 200px
    }
    .bootstrap-list-grid .list-group-item .progress-x.row .width-custom {
        margin-left: 0px;
        margin-top: 5px;
    }
}
@media (max-width: 1233px) and (min-width: 992px) {
    .hidden-custom {
        display: none;
    }
    .bootstrap-list-grid .list-group-item .progress-x.row .width-custom {
        margin-left: -15px;
        margin-top: 5px;
    }
}

.header-left > li > a > i{
	font-size:17px;
}
.header-left > li > a > .label {
    top: 1px;
    right: 14px;
    border-radius: 50% !important;
    background: #e47676;
	font-size: 9px;
	position: absolute;
}
.header-left > li.notifications > ul{
	width:300px;
}
.header-left > li.notifications > ul > .header{
	padding: 7px 10px;
    border-bottom: 1px solid #f4f4f4;
    color: #444444;
    font-size: 14px;
}
.header-left > li.notifications > ul > .footer > a{
	 text-align:center;
}

/* NEW STYLE 2017/05/28 */
.new-style {
    background: #f2f7f8;
}
.new-style .sidebar {
    padding: 5px;
}
.new-style .sidebar .nav-sidebar {
    margin: 0;
}
.new-style .btn-info {
    background: #54bee1;
}
.nav-header {
    color: #628ed4;
    font-size: 20px !important;
    margin-bottom: 20px;
}
.new-style .sidebar .nav > li > a {
    background: #fbfcfd;
    margin: 3px 0;
    padding: 15px;
    border-left: 5px solid #bdcfda;
}

.new-style .sidebar .nav > li > a:hover, .new-style .sidebar .nav > li.active > a {
    background: #504b44;
    color: #ffc20e;
    border-left: 5px solid #ffc20e;
}

.new-style .bg-gradient-1 {
    background: #008ee1;
    background: -moz-linear-gradient(left, #008ee1 0%, #00a8d9 100%);
    background: -webkit-linear-gradient(left, #008ee1 0%,#00a8d9 100%);
    background: linear-gradient(to right, #008ee1 0%,#00a8d9 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#008ee1', endColorstr='#00a8d9',GradientType=1 );
}

.new-style .bg-gradient-2 {
    background: #604bdf;
    background: -moz-linear-gradient(left, #604bdf 0%, #7460ee 100%);
    background: -webkit-linear-gradient(left, #604bdf 0%,#7460ee 100%);
    background: linear-gradient(to right, #604bdf 0%,#7460ee 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#604bdf', endColorstr='#7460ee',GradientType=1 );
}

.new-style .bg-gradient-3 {
    background: #35bd45;
    background: -moz-linear-gradient(left, #35bd45 0%, #55ce63 100%);
    background: -webkit-linear-gradient(left, #35bd45 0%,#55ce63 100%);
    background: linear-gradient(to right, #35bd45 0%,#55ce63 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#35bd45', endColorstr='#55ce63',GradientType=1 );
}

.new-style .bg-gradient-4 {
    background: #f3ab18;
    background: -moz-linear-gradient(left, #f3ab18 0%, #ffbc34 100%);
    background: -webkit-linear-gradient(left, #f3ab18 0%,#ffbc34 100%);
    background: linear-gradient(to right, #f3ab18 0%,#ffbc34 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f3ab18', endColorstr='#ffbc34',GradientType=1 );
}
.new-style .bg-gradient-1 > ul, .new-style .bg-gradient-1 > ul >li
,.new-style .bg-gradient-2 > ul, .new-style .bg-gradient-2 > ul >li
,.new-style .bg-gradient-3 > ul, .new-style .bg-gradient-3 > ul >li
,.new-style .bg-gradient-4 > ul, .new-style .bg-gradient-4 > ul >li  {
	padding:0px;
	margin:0px;
}
.new-style .bg-gradient-1 > ul >li, .new-style .bg-gradient-2 > ul >li
, .new-style .bg-gradient-3 > ul >li, .new-style .bg-gradient-4 > ul >li {
	display:list-item;
	float:left;
	list-style:none;
	width: 50%;
}
.new-style .bg-gradient-1 > ul >li:last-child{
	border-left:1px solid #5DB1D5;
}
.new-style .bg-gradient-2 > ul >li:last-child{
	border-left:1px solid #9A8CE9;
}
.new-style .bg-gradient-3 > ul >li:last-child{
	border-left:1px solid #7FD089;
}
.new-style .bg-gradient-4 > ul >li:last-child{
	border-left:1px solid #FFC969;
}
.new-style .bg-gradient-1 .box-name { 
	background: rgba(1,118,188,1);
	background: -moz-linear-gradient(left, rgba(1,118,188,1) 0%, rgba(0,145,190,1) 100%);
	background: -webkit-gradient(left top, right top, color-stop(0%, rgba(1,118,188,1)), color-stop(100%, rgba(0,145,190,1)));
	background: -webkit-linear-gradient(left, rgba(1,118,188,1) 0%, rgba(0,145,190,1) 100%);
	background: -o-linear-gradient(left, rgba(1,118,188,1) 0%, rgba(0,145,190,1) 100%);
	background: -ms-linear-gradient(left, rgba(1,118,188,1) 0%, rgba(0,145,190,1) 100%);
	background: linear-gradient(to right, rgba(1,118,188,1) 0%, rgba(0,145,190,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0176bc', endColorstr='#0091be', GradientType=1 );    
}
.new-style .bg-gradient-2 .box-name {  
	background: rgba(83,60,212,1);
	background: -moz-linear-gradient(left, rgba(83,60,212,1) 0%, rgba(111,89,232,1) 100%);
	background: -webkit-gradient(left top, right top, color-stop(0%, rgba(83,60,212,1)), color-stop(100%, rgba(111,89,232,1)));
	background: -webkit-linear-gradient(left, rgba(83,60,212,1) 0%, rgba(111,89,232,1) 100%);
	background: -o-linear-gradient(left, rgba(83,60,212,1) 0%, rgba(111,89,232,1) 100%);
	background: -ms-linear-gradient(left, rgba(83,60,212,1) 0%, rgba(111,89,232,1) 100%);
	background: linear-gradient(to right, rgba(83,60,212,1) 0%, rgba(111,89,232,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#533cd4', endColorstr='#6f59e8', GradientType=1 );	
}
.new-style .bg-gradient-3 .box-name { 
	background: rgba(33,164,48,1);
	background: -moz-linear-gradient(left, rgba(33,164,48,1) 0%, rgba(79,194,93,1) 100%);
	background: -webkit-gradient(left top, right top, color-stop(0%, rgba(33,164,48,1)), color-stop(100%, rgba(79,194,93,1)));
	background: -webkit-linear-gradient(left, rgba(33,164,48,1) 0%, rgba(79,194,93,1) 100%);
	background: -o-linear-gradient(left, rgba(33,164,48,1) 0%, rgba(79,194,93,1) 100%);
	background: -ms-linear-gradient(left, rgba(33,164,48,1) 0%, rgba(79,194,93,1) 100%);
	background: linear-gradient(to right, rgba(33,164,48,1) 0%, rgba(79,194,93,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#21a430', endColorstr='#4fc25d', GradientType=1 ); 
}
.new-style .bg-gradient-4 .box-name { 
	background: rgba(255,156,1,1);
	background: -moz-linear-gradient(left, rgba(255,156,1,1) 0%, rgba(255,185,43,1) 100%);
	background: -webkit-gradient(left top, right top, color-stop(0%, rgba(255,156,1,1)), color-stop(100%, rgba(255,185,43,1)));
	background: -webkit-linear-gradient(left, rgba(255,156,1,1) 0%, rgba(255,185,43,1) 100%);
	background: -o-linear-gradient(left, rgba(255,156,1,1) 0%, rgba(255,185,43,1) 100%);
	background: -ms-linear-gradient(left, rgba(255,156,1,1) 0%, rgba(255,185,43,1) 100%);
	background: linear-gradient(to right, rgba(255,156,1,1) 0%, rgba(255,185,43,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff9c01', endColorstr='#ffb92b', GradientType=1 );
}

.new-style .page-header {
    margin: 10px 0 15px;
    font-size: 20px !important;
    border: none;
    font-weight: normal;
}
/* .new-style .page-box {  */
    /* margin-bottom: 20px; */
/* } */
.new-style .report-box {
    color: #fff; 
    padding: 15px 15px 0 15px;
    border-radius: 3px 3px 0px 0px !important;
}
.new-style .report-box > ul{
	display:block;
}
.new-style .report-box .box-number {
    font-size: 24px !important;
    font-weight: bold;
    margin-bottom: 5px;
}
.new-style .report-box .box-number > p {
    font-size: 13px !important; 
    clear: both;
    font-weight: normal;
	font-style:italic;
}
.new-style .report-box .box-name {
	clear:both;
	margin: 0 -15px;
	font-size: 16px; 
	border-radius: 0 0 3px 3px !important;
	padding:10px 5px;
	color: #FFF;
    font-size: 15px;
}
.new-style .report-box .box-name a{
	color:#FFF;
	font-size: 15px;
}
.new-style .page-default .panel-body {
    height: auto;
    max-height: none;
    overflow: hidden;
    position: relative;
}
.panel-newstyle{
	-webkit-box-shadow: 1px 0 0 rgba(0,0,0,.05);
    box-shadow: 1px 0 0 rgba(0,0,0,.05);
}
.new-style .panel-newstyle .panel-heading > span {
    border-bottom: 1px solid #ffc20e;
    font-size: 16px !important;
    text-transform: uppercase;
    padding: 15px 0 10px;
    display: inline-block;
    font-weight: bold;
}
.new-style .block-list-item > div {
    border: none;
    padding: 7px 15px;
}
.new-style .block-list-item .item-icon {
    display: inline-block;
    background: #ffc20e;
    width: 30px;
    height: 30px;
    text-align: center;
    vertical-align: middle;
    line-height: 30px;
    border-radius: 50% !important; 
	color:#fff;
}
.new-style .block-list-item a {
    display: block;
    float: left;
    width: calc(100% - 50px);
    margin-left: 15px;
}
.new-style .gray {
    color: #d3d3d3
}
.new-style .lastest-note {
    margin: 20px 15px;
}
.new-style .lastest-note .panel-success-custom .panel-heading {
    background: #0c56ba;
	color:#fff;
    position: relative;
}
.new-style .lastest-note .panel-success-custom .panel-body, .new-style .panel-success-custom .panel-footer {
    background: #fff;
    border: 1px solid #0c56ba;
    position: relative;
}
.new-style .lastest-note .panel-success-custom .panel-body{
	border-bottom: none;
	padding-bottom:0px;
}
.new-style .panel-success-custom .panel-footer {
	border-top: none;
	border-right:none;
	padding-top:0px;
	padding-bottom:0px;
}
.new-style .lastest-note .panel-success-custom .panel-body textarea {
    background: transparent;
    border: none;
    box-shadow: none;
    outline: none;
    height: 200px;
}
.new-style .lastest-note .panel-success-custom .panel-heading:after {
    content: ' ';
    background-image: url(../images/gim.png);
    background-repeat: no-repeat;
    position: absolute;
    top: -20px;
    right: -13px;
    width: 54px;
    height: 63px;
    z-index: 2;
}
.new-style .panel-success-custom .panel-footer:after {
    content: ' ';
    background-image: url(../images/note-goc.png);
    background-repeat: no-repeat;
    width: 90px;
    height: 33px;
    position: absolute;
    bottom: 0;
    right: 0;
}
.new-style .panel-success-custom .panel-footer:before {
    content: ' ';
    position: absolute;
    right: 0;
    bottom: -1px;
    background: #fff;
    width: 90px;
    height: 33px;
}
.new-style .lastest-note .create-note {
    padding-right: 30px;
    color: #fff;
}
.new-style .panel-transparent {
    background-color: transparent;
    box-shadow: none;
    margin-bottom: 0;
}
.new-style .panel-transparent .panel-footer {
    background-color: transparent;
}
#owl-carousel-image .owl-wrapper-outer .owl-wrapper div.item {
	margin: 0 10px 5px 10px;
}

.new-style .owl-carousel .thumbnail {
    padding: 0 15px;
    margin-bottom: 10px;
}
/* .new-style .owl-carousel .thumbnail .caption { */
    /* padding: 15px 0; */
/* } */
.new-style .owl-carousel .thumbnail .caption h5 {
    word-break: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 25px;
    line-height: 12px;
}
.new-style .owl-carousel .thumbnail .thumbnail-date{
	color:#269abc;
}
.new-style .owl-carousel .thumbnail .thumbnail-date .thumbnail-start-date, .new-style .owl-carousel .thumbnail .thumbnail-date .thumbnail-end-date{
	padding:0 5px 0 7px;
}
.new-style .owl-carousel .thumbnail .thumbnail-date .thumbnail-end-date{
	text-align:right;
}
.new-style .owl-carousel .thumbnail .thumbnail-date span{
	display:inline;
	font-size:11px !important;
}

.new-style .owl-carousel-control .fa {
    font-size: 32px !important;
}
.new-style .owl-carousel-control .owl-carousel-prev, .new-style .owl-carousel-control .owl-carousel-next {
    background: rgba(234, 234, 234, 0.6);
    width: 50px;
    height: 90px;
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    z-index: 2;
    line-height: 100px;
    text-align: center;
    opacity: 0.3;
}
.new-style .owl-carousel-control .owl-carousel-prev:hover, .new-style .owl-carousel-control .owl-carousel-next:hover {
    opacity: 1;
}
.new-style .owl-carousel-control.type-1 .owl-carousel-prev {
    left: 10px;
}
.new-style .owl-carousel-control.type-1 .owl-carousel-next {
    right: 10px;
}
.new-style .owl-carousel-control.type-2 .owl-carousel-prev {
    left: 0px;
}
.new-style .owl-carousel-control.type-2 .owl-carousel-next {
    right: 0px;
}
.new-style .owl-carousel-control.type-2 + .owl-carousel {
    width: 90%;
    margin-left: 5%;
}
.new-style .owl-carousel .thumbnail .learning-progress {
    margin: 0;
}
.new-style .owl-carousel .thumbnail .thumbnail-image {
    height: 210px;
    background-repeat: round;
    background-size: cover;
    margin: 0 -15px;
    text-align: center;
}
.new-style .owl-carousel .thumbnail .thumbnail-image .btn-warning {
	position: absolute;
    top: 178px;
    right: 0px;
    background-color: #f9b212;
    /* visibility: hidden; */
    border: 1px solid #eccd84 !important;
    /* margin-top: 100px; */
}
/* .new-style .owl-carousel .thumbnail:hover .thumbnail-image .btn-warning { */
    /* visibility: visible; */
/* } */

.new-style .owl-carousel .thumbnail .thumbnail-image .thumbnail-btn-left {
	position: absolute;
    top: 178px;
    left: 0px;
    background-color: #0c56ba;
    border: 1px solid #0c56ba !important;
	padding:6px 16px;
	color:#fff;
}
.new-style .owl-carousel .thumbnail .thumbnail-date .start-date {
    position: absolute;
    top: 175px;
    left: 0;
    background: #ffc20e;
}
.new-style .owl-carousel .thumbnail .thumbnail-date .start-date .start-date-day {
    font-size: 18px !important;
    font-weight: bold;
    color: #fff;
    padding: 5px 10px;
}
.new-style .owl-carousel .thumbnail:hover {
    cursor: pointer;
    box-shadow: 0px 3px 10px #b9b7b7;
}
.new-style .owl-carousel .thumbnail .thumbnail-date .start-date .start-date-month {
    background-color: #def2fe;
    padding: 5px 10px;
}
.new-style .owl-carousel .thumbnail .thumbnail-date .end-date {
    color: #ffc20e;
    margin-top: 5px;
}
.new-style .panel-transparent .panel-heading h2 {
    font-size: 16px !important;
    text-transform: uppercase;
    margin-left: -15px;
    border-bottom: 1px solid #ffc20e;
    padding: 0 10px 10px 0;
    font-weight: bold;
    display: inline-block;
}
.new-style .panel-transparent .panel-heading .view-more {
    margin-top: 30px;
    display: block;
    color: #ffc20e;
}
.new-style .owl-survey .thumbnail .caption h5 {
    padding: 0;
}
.new-style .owl-survey .thumbnail {
    border-bottom: 5px solid transparent;
}
.new-style .owl-survey .thumbnail:hover {
    box-shadow: none;
    border-bottom: 5px solid #ffc20e;
}
.ng-toast.ng-toast--top, .ng-toast.ng-toast--top .ng-toast__list {
    right: 0;
}
.new-style .owl-carousel .item-image-slide {
    width: 100%;
    height: 210px;
    background-repeat: no-repeat;
    background-size: cover;
}
.new-style .tr-grouped {
    background-color: #f5f5f5;
    font-weight: bold;
}
.new-style #loader {
    background: rgba(61, 122, 193, 0.49);
    position: fixed;
    bottom: 20px;
    right: -200px;
    z-index: 9999;
    width: 200px;
    height: 100px;
    visibility: hidden;
    transition: all 0.5s;
}
.new-style #loader.active {
    right: 0;
    visibility: visible;
}
.new-style #loader .loading-panel {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 10px auto;
}
.new-style #loader .loading-image {
    width: 80px;
}
.new-style #loader .loading-caption {
    color: #fff;
    margin-top: 5px;
}
.new-style .child-nomargin .panel {
    margin-bottom: 0;
}
.new-style .no-padding-vertical {
    padding-top: 0;
    padding-bottom: 0;
}
.new-style .no-padding-bottom {
    padding-bottom: 0;
}
.new-style .mail-item:first-of-type {
    border-top: 1px solid #eee;
}
.new-style .mail-item {
    margin: 3px 0;
    background: #fff;
    border-bottom: 1px solid #eee;
    border-right: 1px solid #eee;
    padding: 15px 5px;
    border-left: 3px solid #eee;
}
.new-style .mail-item:hover {
    background: #f5f5f5;
    cursor: pointer;
    border-left: 3px solid #ffc20e;
}
.new-style input[type=checkbox] {
    display: none;
}
.new-style input[type=checkbox]:disabled + label {
    pointer-events: none;
}
.new-style input[type=checkbox]:checked + label:before {
    color: #ffc20e;
    text-align: center;
    font: normal normal normal 15px FontAwesome;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    content: "\f00c";
}
.new-style input[type=checkbox] + label:before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-top: -2px;
    background-color: #FFF;
    border: 1px solid #888;
    vertical-align: middle;
    cursor: pointer;
}
.new-style .mail-sender {
    margin-left: 10px;
    width: calc(100% - 30px);
}
.new-style .mail-receive {
    color: #777;
    margin-left: 40px; 
}
.new-style .new_mail {
    font-weight: bold;
}
.new-style .input-group-btn {
    border: 1px solid #ccc;
}
.new-style .form-heading {
    margin: 0 0 20px;
    font-size: 18px !important;
    border-bottom: 1px solid #3d7ac1;
    padding: 5px 0;
    display: inline-block;
}
.new-style .img-avatar-bigger {
    height: 140px;
    margin-bottom: 5px;
}
/*Box Header*/
.header-left > li > a > i {
    font-size: 17px;
}
.header-left > li > a > .label {
    top: 8px;
    right: 6px;
    border-radius: 50% !important;
    background: #e47676;
	font-size: 9px;
	position: absolute;
}
.header-left > li.notifications > ul{
	width:250px;
}
.header-left > li.notifications > ul > .header{
	padding: 7px 10px;
    border-bottom: 1px solid #f4f4f4;
    color: #0089fe;
    font-size: 14px;
}
.header-left > li.notifications > ul > .footer > a{
	 text-align:center;
    color: #0089fe;
}
.header-left > li.notifications > ul > li > ul.list-group{
	 height:175px;
	 overflow:auto;
}
ul.ddlcus{
	padding-top:0px;
}
ul.ddlcus > li.header { 
    border-bottom: 1px solid #f4f4f4; 
    background-color: #3d7ac1;
}
ul.ddlcus > li.header > a{ 
    color: #FFF;
    font-size: 14px;  
}
ul.ddlcus > li.header > a:hover{ 
	background-color:#5E99D3;
}
#navbarUser{
	float:right;
	border:0px;
}
#navbarUser ul, #navbarUser li{
	padding:0px;
	margin: 0px;
}
#navbarUser > ul > li{
	 float:left;
	 list-style:none; 
} 
#navbarUser > ul > li > a{ 
	 line-height: 20px;
	 padding: 21px 12px 13px 12px;
	 display: block;
} 
#navbarUser > ul > li > a.user-login-info-sm {
    padding: 12px 0px 7px 0px !important;
}
#navbarUser > ul > li > a > span.label {
    top: 8px;
    right: 6px;
    border-radius: 50% !important;
    background: #e47676;
    font-size: 9px;
    position: absolute;
}
#navbarUser > ul > li > a > i{  
	font-size:17px;
} 
#navbarUser > ul >li>ul{ 
	margin-top:8px;
	right: -10px;
} 
#navbarUser>ul > li.notifications > ul { 
    width: 250px;
}
#navbarUser>ul > li.notifications > ul >li.header {
    padding: 7px 10px;
    border-bottom: 1px solid #f4f4f4;
    color: #0089fe;
    font-size: 14px;
}
#navbarUser>ul > li.notifications > ul >li.footer >a {
    text-align: center;
    color: #0089fe;
}
#navbarUser>ul > li.notifications > ul > li > ul.list-group {
	padding:10px 15px;
    height: 175px;
    overflow: auto;
}
#navbarUser>ul > li.notifications > ul > li > ul.list-group >li { 
	border:none;
	border-bottom: 1px solid #ddd;
}
#navbarUser>ul > li.notifications > ul > li > ul.list-group >li>a {
	    line-height: 18px;
    padding: 5px 0px;
    display: block;
}
/* End Box Header*/
.report-title > span {
    text-transform: uppercase;
}
.view-result-url {
    color: #0089fe !important;
}
.news-date{
	color:#ccc;
}
.thumbnail-subject-news{
	/* max-height:100px; */
	display: inline-block;
    height: 90px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.thumbnail-detail-news{
	color:#ffc20e;
	text-decoration:none;
	cursor:pointer;
}
.btn-warning.active.focus, .btn-warning.active:focus, .btn-warning.active:hover, .btn-warning:active.focus, .btn-warning:active:focus, .btn-warning:active:hover, .open>.dropdown-toggle.btn-warning.focus, .open>.dropdown-toggle.btn-warning:focus, .open>.dropdown-toggle.btn-warning:hover {
    color: #fff;
    background-color: #ffc20e;
    border-color: #ffc20e;
}
.pagination>.active>a, .pagination>.active>a:focus, .pagination>.active>a:hover, .pagination>.active>span, .pagination>.active>span:focus, .pagination>.active>span:hover {
    background-color: #504b44;
    border-color: #504b44;
}
.fa-search{
	-moz-transform: scale(-1, 1);
    -webkit-transform: scale(-1, 1);
    -o-transform: scale(-1, 1);
    -ms-transform: scale(-1, 1);
    transform: scale(-1, 1);
}
.no-border{
	border:none !important;  
}
.no-pd-lr{
	padding-left:0px;
	padding-right:0px;
}
.thumbnail-news .caption h5 {
	word-break: break-word;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
	height: 15px;
    line-height: 7px;
}
.box-news-hot{
	margin:10px 0;
	/* background-color:red; */
}
/* .box-new-hot .box-news-hot-lg{ */
	/* min-height:400px; */
	/* max-height:400px; */
/* } */
/* .box-new-hot .box-news-hot-3{ */
	/* min-height:400px; */
	/* max-height:400px; */
/* } */
.box-news-hot-lg img{
	height:230px;
	width:100%;
}
.box-news-hot-lg .thumbnail-subject-news{
	display: inline-block;
    height: 56px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.box-news-hot-3 .thumbnail .caption{
	padding:3px;
}
.box-news-hot-3 .thumbnail-subject-news{
	display: inline-block;
    height: 35px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.box-news-list{
	margin:10px 0;
}
.box-news-list .box-border{
	border-top:1px solid #ffc20e !important;
	border-bottom:1px solid #ffc20e !important;
	height:auto;
	padding:10px 0;
}
.box-news-list .box-border-list-bottom .item{
	border-bottom:1px solid #ffc20e !important;
}
.box-news-list .thumbnail-subject-news{
	display: inline-block;
    height: 35px;
    overflow: hidden;
    text-overflow: ellipsis;
}
@media (max-width: 768px) {
	.box-news-list{
		margin:0  !important;
	}
	.box-news-list .box-border{
		border-top:0px !important;
		border-bottom:0px  !important;
		padding:0  !important;
	}
	.box-news-list .thumbnail .caption{
		padding:3px;
	}
}
.view-more{
	color:#ffc20e;
}