/* General
---------------------------------------------------*/
html, body {
	width: 100%;
	height: 100%;
	font-family: 'Roboto', Arial, "Microsoft JhengHei", "微軟正黑體", PMingLiU, "新細明體", Helvetica, sans-serif;
	font-size: 15px;
	color: #333;
	line-height: 1.4;
}

*, :focus {
    outline: 0!important;
}

/* Link 
/*-------------------------------------------------*/
a {
	-webkit-transition: all 0.15s;
	-moz-transition: all 0.15s;
	transition: all 0.15s;
}

a:link, a:visited, a:focus {
	color: #4780b4;
	outline: 0;
	box-shadow: none !important;
}

a:hover {
	color: #6198c1;
	text-decoration: none;
}

a:focus {
	text-decoration: none;
}

a.link-w:link, a.link-w:visited, a.link-w:focus {
	color: #FFF;
}

a.link-w:hover {
	color: rgba(255, 255, 255, 0.8);
}

/* Tooltip
/*-------------------------------------------------*/
.tooltip .tooltip-inner {
	text-align: left !important;
}

/* Button
/*-------------------------------------------------*/
.btn {
	font-size: 15px;
	padding: 0.4rem 0.8rem;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
}

.btn:focus,
.btn:active {
	outline: none !important;
	box-shadow: none;
}

.btn i {
	margin-left: 4px;
}

/* Button with left icon */
.btn.btn-i-l i {
	margin-left: 0;
	margin-right: 4px;
}

/* Button with icons only */
.btn.btn-no-txt i {
	margin: 0;
}

/* Round Corner */
.btn.round {
	-webkit-border-radius: 24px;
	-moz-border-radius: 24px;
	border-radius: 24px;
}

/* Button - Default */
.btn-default,
.btn-default:link,
.btn-default:visited {
	background-color: #3280b2;
	color: #fff;
}

.btn-default:hover {
	background-color: #69abcb;
	color: #fff;
	text-decoration: none;
}

/* Button - Outline */
.btn-outline,
.btn-outline:link,
.btn-outline:visited {
	background-color: transparent;
	color: #fff;
	border: 1px solid #fff;
}

.btn-outline:hover {
	background-color: #fff;
	color: #3280b2;
}

/* Button - Outline */
.btn-outline-def,
.btn-outline-def:link,
.btn-outline-def:visited {
	background-color: #fff;
	color: #3280b2;
	border: 1px solid #3280b2;
}

.btn-outline-def:hover {
	background-color: #3280b2;
	color: #fff;
}

/* Button - CTA */
.btn-cta,
.btn-cta:link,
.btn-cta:visited {
	font-size: 16px;
	font-weight: 600;
	background-color: #edc000;
	color: #3280b2;
	padding: 0.6rem 1.2rem;
}

.btn-cta-s,
.btn-cta-s:link,
.btn-cta-s:visited {
	font-weight: 600;
	background-color: #edc000;
	color: #3280b2;
}

.btn-cta:hover,
.btn-cta-s:hover {
	color: #FFF;
	text-decoration: none;
	text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
}

/* Button - CTA */
.btn-main-act,
.btn-main-act:link,
.btn-main-act:visited {
	font-size: 16px;
	background-color: #e26d1c;
	color: #FFF;
}

.btn-main-act:hover {
	background-color: #f98638;
}

/* Button - CTA */
.btn-secondary,
.btn-secondary:link,
.btn-secondary:visited {
	color: #FFF;
	background-color: #666;
}

.btn-secondary:hover {
	background-color: #888;
	border-color: #888;
}

/* Round Tag
/*-------------------------------------------------*/
.round-tag:link,
.round-tag:visited {
	font-size: 13px;
	background-color: #3280a7;
	color: #FFF;
	padding: 4px 24px 4px 10px;
	-webkit-border-radius: 16px;
	-moz-border-radius: 16px;
	border-radius: 16px;
	margin: 2px;
	position: relative;
	display: inline-block;
}

.round-tag i {
	font-size: 12px;
	position: absolute;
	right: 8px;
	top: 7px;
}

.round-tag:hover {
	text-decoration: line-through;
}


/* Alert
/*-------------------------------------------------*/
.multiselect .alert {
	font-size: 13px;
	padding: 8px 15px;
	border-radius: 0;
}

.mobile .multiselect .alert {
	-webkit-border-top-left-radius: 8px;
	-webkit-border-top-right-radius: 8px;
	-moz-border-radius-topleft: 8px;
	-moz-border-radius-topright: 8px;
	border-top-left-radius: 8px;
	border-top-right-radius: 8px;
}

/* Nav
/*-------------------------------------------------*/
.bsnav-brand-top .navbar-brand {
    margin-top: 5px;
    margin-bottom: 5px;
}

.navbar-brand:link,
.navbar-brand:visited {
	font-weight: 300;
	color: #666;
}

.navbar-brand img {
	height: 36px;
}

.navbar .user {
	max-width: 250px;
	color: #4780b4;
}

/* Side Menu
/*-------------------------------------------------*/
.side-menu {
	width: 100%;
	height: 100%;
	padding: 15px;
	list-style: none;
	margin: 0;
}

.side-menu li:not(.copyright) a:link, 
.side-menu li:not(.copyright) a:visited,
.side-menu li:not(.copyright) a:focus {
	font-size: 16px;
	font-weight: 300;
	color: #FFF;
	padding-bottom: 8px;
	padding-left: 32px;
	position: relative;
	display: block;
}

.side-menu .sub-menu li:not(.copyright) a:link, 
.side-menu .sub-menu li:not(.copyright) a:visited,
.side-menu .sub-menu li:not(.copyright) a:focus {
	padding: 6px 0;
}

.side-menu .sub-menu li {
	color: #FFF;
	margin-bottom: 0;
}

.side-menu .sub-menu {
	padding-left: 32px;
	margin-top: 6px;
}

.side-menu .sub-menu  li:not(.copyright) a:link {
	font-size: 15px;
	padding: 4px 0;
}

.side-menu i.fa-angle-down,
.side-menu i.fa-angle-up {
	right: 0;
	left: auto;
}

/* Underline */
.side-menu li:not(.copyright) a:after {    
	width: 0;
	height: 2px;
	background-color: #f2c500;
	content: "";

	position: absolute;
	left: 50%;
	bottom: 0;
	
	transition: width 0.3s ease 0s, left 0.3s ease 0s;
	
	display: block;
}

.side-menu li:not(.copyright) a.active:after,
.side-menu li:not(.copyright) a:hover:after { 
	width: 100%; 
	left: 0; 
}

@media (hover: none) {
	.side-menu li:not(.copyright) a:hover:after { 
		width: 0; 
		left: auto; 
	}
}

.side-menu li {
	width: 100%;
	margin-bottom: 16px;
}

.side-menu i {
	width: 24px;
	text-align: center;
	position: absolute;
	left: 0;
	top: 3px;
}

.side-menu .greetings {
	font-size: 14px;
	font-weight: 300;
	color: #FFF;
	background-color: rgba(255, 255, 255, 0.15);
	padding: 10px;
	border-radius: 8px;
	display: none;
}

.copyright {
	width: 100%;
	font-size: 12px;
	color: rgba(255, 255, 255, 0.75);
	line-height: 1.5;
	margin-bottom: 0 !important;
}

.copyright a:link,
.copyright a:visited {
	color: rgba(255, 255, 255, 0.75);
	display: inline-block;
}

.copyright a:first-child {
	margin-bottom: 6px;
}

.copyright a:hover {
	color: rgba(255, 255, 255, 1);
}

.side-menu hr {
	border-top-color: rgba(255, 255, 255, 0.3);
}

/* Invalid Feedback
/*-------------------------------------------------*/
.invalid-feedback {
	display: block;
}

/* Form
/*-------------------------------------------------*/
::-webkit-input-placeholder { color: #bbb !important; }
:-ms-input-placeholder { color: #bbb !important; }
::placeholder { color: #bbb !important; }

textarea {
	width: 100%;
	resize: none;
}

.input-group .btn {
	padding: .375rem .75rem;
}

.form-control,
.input-group-text,
.breadcrumb {
	border-radius: 8px;
}

input:focus,
.form-control:focus,
.custom-select:focus,
.custom-file-input:focus,
.custom-file-input:active,
.custom-file-label:focus,
.custom-file-label:active {
	-webkit-box-shadow: none !important;
	box-shadow: none !important;
	outline: 0 !important;
}

.custom-select,
.custom-file-input,
.custom-file-label {
	border-radius: 8px;
	cursor: pointer;
}

.custom-select,
.custom-select.is-invalid {
	background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMCA3LjMzbDIuODI5LTIuODMgOS4xNzUgOS4zMzkgOS4xNjctOS4zMzkgMi44MjkgMi44My0xMS45OTYgMTIuMTd6Ii8+PC9zdmc+");
}

.custom-file-label::after {
	background-color: #3280b2;
	border-color: #3280b2;
	color: #FFF;
}

.form-control.is-invalid {
	background-image: none;
	padding-right: 12px;
}

.form-inline label {
	font-weight: bold;
	margin-right: 12px;
}

.form-group {
	position: relative;
}

.form-group .clear:link,
.form-group .clear:visited {
	width: 20px;
	height: 20px;
	color: #888;
	text-align: center;
	display: block;
	opacity: 0.6;
	position: absolute;
	right: 10px;
	top: 8px;
}

.form-group .clear:hover {
	opacity: 1;
}

.form-row label,
.form-group label {
	width: 100%;
	font-size: 14px;
	font-weight: 300;
	line-height: 24px;
	margin-bottom: 0.3rem;
}

.form-row {
	margin: 0;
}

.form-row .inline-label {
	font-size: 14px;
	line-height: 35px;
}

.form-title {
	font-weight: 400;
}

form .compulsory {
	font-weight: bold;
	color: #d03535;
	margin-left: 4px;
}

form label .supp {
	font-style: italic;
}

form a.col-form-label {
	display: inline-block;
}

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

form .dummy {
	color: #888;
	background-color: rgba(0, 0, 0, 0.05);
	padding: 30px;
}

.date-range .remove,
.date-range.extra .multiple-period {
	display: none;
}

.date-range.extra .remove {
	display: block;
}


/* Datepicker */
.m-dp {
	display: none !important;
}

/* Custom Checkbox
/*-------------------------------------------------*/
.form-cb {
	margin-top: 4px;
	margin-right: 16px;
}

.checkbox-custom, .radio-custom {
	width: 22px;
	height: 22px;
    opacity: 0;
    position: absolute;
	left: 15px;
	top: 5px;
	z-index: 99;
}


.checkbox-custom, .checkbox-custom-label, .radio-custom, .radio-custom-label {
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;
}

.checkbox-custom-label, .radio-custom-label {
	min-width: 75px;
	font-size: 15px !important;
	font-weight: 400 !important;
	justify-content: left !important;
	margin-bottom: 0 !important;
	padding-left: 32px;
    position: relative;
}

.checkbox-custom + .checkbox-custom-label:before, .radio-custom + .radio-custom-label:before {
    content: '';
    background: #fff;
    border: 2px solid #ddd;
    display: inline-block;
    vertical-align: middle;
    width: 24px;
    height: 24px;
    padding: 2px;
    margin-right: 10px;
    text-align: center;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	position: absolute;
	left: 0;
}

.checkbox-custom:checked + .checkbox-custom-label::before,
.radio-custom:checked + .radio-custom-label::before {
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: "\f00c";
	font-size: 16px;
	color: #3db237;
	line-height: 16px;
}

.checkbox-custom-label .badge {
	min-width: 20px;
	font-size: 12px;
	background-color: #4780b4;
	color: #FFF;
	padding: 4px;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
	position: absolute;
	right: 32px;
	top: 7px;
}

.multiselect .checkbox-custom:checked + .checkbox-custom-label,
.multiselect .radio-custom:checked + .checkbox-custom-label {
	font-weight: bold !important;
}

.radio-custom + .radio-custom-label:before {
    border-radius: 50%;
}

.radio-custom:checked + .radio-custom-label::before {
	content: "\f111";
	line-height: 16px;
	text-indent: -1px;
}
.cb {
	width: 24px;
	height: 24px;
	position: relative;
	margin: 0 auto;
}
.cb .checkbox-custom {
	left: 0;
	top: 0;
}

.cb .checkbox-custom-label {
	min-width: 24px;
	padding-left: 0;
}

.cb .checkbox-custom + .checkbox-custom-label:before {
	position: relative;
}

/* Multiselect
/*-------------------------------------------------*/
.multilayer li i {
	position: absolute;
	right: 15px;
	top: 50%;
	margin-top: -8px;
}
.multiselect {
	position: relative;
}

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

.multilayer .sub,
.multiselect-dropdown {
	list-style: none;
	padding-left: 0;
	margin-bottom: 0;
}

.multiselect-dropdown .subcat {
	display: none;
}

.multiselect-dropdown .checkbox-custom + .checkbox-custom-label:before {
	width: 22px;
	height: 22px;
	font-size: 15px;
	left: 15px;
	top: 7px;
}

.multiselect-dropdown li {
	position: relative;
}

.multiselect-dropdown > li.active,
.multiselect-dropdown > li:not(.subcat):hover,
.multiselect-dropdown .subcat ul li:hover {
	background-color: #f9f9f9;
}



.multiselect-dropdown .subcat ul {
	padding-left: 0;
}

.multiselect-dropdown .subcat ul li label {
	padding-left: 77px;
}

.multiselect-dropdown .subcat .checkbox-custom + .checkbox-custom-label:before {
	left: 45px;
}

.multiselect-dropdown li label {
	padding-top: 6px;
	padding-bottom: 6px;
	padding-left: 47px;
}

.multiselect-dropdown > li.active label {
	font-weight: bold !important;
}

.multiselect .choice-w {
	width: 100%;
	background-color: #FFF;
	border: 1px solid #7b9dd4;
	position: absolute;
	left: 0;
	margin-top: 2px;
	z-index: 10;
	display: none;
	-webkit-box-shadow: 0px 5px 4px 0px rgba(0,0,0,0.1);
	-moz-box-shadow: 0px 5px 4px 0px rgba(0,0,0,0.1);
	box-shadow: 0px 5px 4px 0px rgba(0,0,0,0.1);
}

.multiselect .choice-w .selected {
	padding: 0 15px;
}
.mobile .multiselect .choice-w {
	border: 1px solid #ced4da;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
}

.multiselect .filter {
	min-height: 48px;
	background-color: #FFF;
	padding: 15px 15px 8px 15px;
}

.multiselect .input-field {
	position: relative;
}

.multiselect .filter .input-field input {
	padding-left: 36px;
	padding-right: 36px;
}

.multiselect .input-field i.fa-search {
	color: #aaa;
	position: absolute;
	left: 12px;
	top: 10px;
}

.input-field .clear {
	position: absolute;
	right: 12px;
	top: 10px;
	display: block;
}



.multiselect #selected-img .selectedimg .selected { 
	min-height: 48px;
	background-color: #FFF;
	border-bottom: 1px solid #ddd;
	padding: 0 15px 12px 15px;
}

.multiselect .choice {
	max-height: 30vh;
	overflow-y: scroll;
	padding: 4px 0;
}

.multiselect .choice::-webkit-scrollbar {
	width: 12px;
    -webkit-appearance: none;
}

.multiselect .choice::-webkit-scrollbar-thumb {
    border-radius: 6px;
	border: 3px solid white;
    background-color: rgba(0, 0, 0, .3); 
    -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, .3);
}

.multiselect.district .multiselect-dropdown .checkbox-custom + .checkbox-custom-label:before {
	display: none;
}

.multiselect.district .multiselect-dropdown li label {
	padding-left: 15px;
	padding-top: 3px;
	padding-bottom: 3px;
}

/* Multilayer */
.multilayer .sub {
	display: none;
}

.multilayer .header {
	padding: 6px 36px 6px 15px;
	position: relative;
	cursor: pointer;
}

.multilayer .header i {
	position: absolute;
	right: 15px;
	top: 8px
}

/* Table
/*-------------------------------------------------*/
table {
	font-size: 13px;
}

.table td, .table th {
	padding: 0.7rem;
}


table th .icon-link:link,
table th .icon-link:visited {
	width: 18px;
	height: 18px;
	color: #333;
	text-align: center;
	display: block;
}

table th .icon-link:hover {
	color: #888;
}

table a {
	font-size: 14px;
	font-weight: bold;
}

.num { width: 3%; text-align: center; }
.batch-upload .id { width: 10%; }
.batch-upload .title { width: 35%; }
.batch-upload .file { width: 45%; }
.batch-upload .date { width: 26%; }
.batch-upload .remarks,
.batch-upload .upload-by { width: 26%; }


.course-management .status { width: 5%; }
.course-management .course-id { width: 5%; min-width: 100px; }
.course-management .organiser { width: 12%; min-width: 100px; }
.course-management .course-title { width: 20%; min-width: 150px; }
.course-management .course-period { width: 10%; min-width: 150px; }
.course-management .posting-period { width: 10%; min-width: 150px; }
.course-management .impression-click { width: 8%; min-width: 150px; }
.course-management .view-click { width: 8%; min-width: 120px; }
.course-management .date { width: 8%; min-width: 120px; }
.course-management .action { width: 14%; min-width: 120px; }

.course-management.sorted .batch { max-width: 60px; }
.course-management.sorted .course-title { width: 15%; min-width: 130px; }

table .status {
	font-weight: bold;
}

table td.course-title { font-size: 14px; }

table .status { font-weight: bold; }
table .posting .status { color: #189b28; }
table .scheduled .status { color: #e59e10; }
table .drafted .status { color: #888; }
table .expired .status { color: #ce3b4a; }

table .no-result {
	font-size: 14px;
	padding: 60px 20px;
}

table .ref {
	font-size: 13px;
	color: #888;
	margin-top: 2px;
	display: block;
}


table .action ul {
	list-style: none;
	padding-left: 0;
	margin-bottom: 0;
}

table .action ul li {
	margin-bottom: 4px;
}

table .action ul li:last-child {
	margin-bottom: 0;
}


table .action a {
	font-size: 15px;
	font-weight: 400;
	padding-left: 26px;
	position: relative;
}

table .action a i {
	width: 20px;
	height: 20px;
	text-align: center;
	display: block;
	position: absolute;
	left: 0;
	top: 1px;
}

table .action .deactivate:link,
table .action .deactivate:visited {
	color: #666;
}

table .action .deactivate:hover {
	color: #888;
}

table .action .delete:link,
table .action .delete:visited {



	color: #ce3b4a;
}

table .action .delete:hover {


	color: #e25a6e;
}

.batch-upload .remarks ul {
	margin-bottom: 0;
	padding-left: 20px;
}

.batch-act {
	margin-bottom: 12px;
}

/* Pagination
/*------------------------------------------------*/
.page-link {
	padding: .5rem .8rem;
}

.page-item.active .page-link {
	background-color: #3280b2;
	border-left-color: #dee2e6;
	border-right-color: #dee2e6;
}

.page-item:first-child .page-link {
	-webkit-border-top-left-radius: 8px;
	-webkit-border-bottom-left-radius: 8px;
	-moz-border-radius-topleft: 8px;
	-moz-border-radius-bottomleft: 8px;
	border-top-left-radius: 8px;
	border-bottom-left-radius: 8px;
}

.page-item:last-child .page-link {
	-webkit-border-top-right-radius: 8px;
	-webkit-border-bottom-right-radius: 8px;
	-moz-border-radius-topright: 8px;
	-moz-border-radius-bottomright: 8px;
	border-top-right-radius: 8px;
	border-bottom-right-radius: 8px;
}

.page .record {
	line-height: 2;
}

.pagination .page-link {
	width: 128px;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
}

.pagination {
	width: 240px;
}

.pagination .custom-select {
	width: 100px;
}

.pagination .page-link.prev {
	margin-right: 8px;
}

.pagination .page-link.next {
	margin-left: 8px;
}

.page-link.disabled {
	color: #ccc;
}

.page-link.disabled:focus {
	background-color: #FFF;
}


/* Modal
/*-------------------------------------------------*/
.modal-title {
	font-size: 20px;
	line-height: 1.3;
}

.modal-title i {
	margin-right: 6px;
}

.modal-header {
	color: #3280a7;
	border-bottom: 0;
}

.modal-content {
	border: 0;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	-webkit-box-shadow: 0px 2px 8px 0px rgba(0,0,0,0.25);
	-moz-box-shadow: 0px 2px 8px 0px rgba(0,0,0,0.25);
	box-shadow: 0px 2px 8px 0px rgba(0,0,0,0.25);
}

.supp {
	font-size: 13px;
	color: #aaa;
}



/* Section
/*-------------------------------------------------*/
.container-fluid {
	padding: 0 20px;
}

.sec-title {
	margin-bottom: 1rem;
}

.sec-title h4 {
	font-size: 22px;
	font-weight: 300;
	line-height: 1.6;
	color: #3280a7;
	margin-bottom: 0;
}

.sec-title i {
	margin-right: 6px;
}

h4 .user-guide {
	font-size: 14px;
	margin-left: 28px;
}

h4 .user-guide i {
	margin-right: 3px;
}


/* Empty Section */
.empty {
	font-size: 18px;
	font-weight: 300;
	line-height: 1.8;
	
	border: 1px solid #c9c9c9;
	padding: 4rem 2rem;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
}

.empty a {
	font-weight: 400;
}

/* Overview */
.overview {
	background-color: #f3f3f3;
	color: #3280a7;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
}

.overview .num {
	font-weight: bold;
}

.overview ul li {
	padding: 0.5rem;
}

.overview ul .header {
	background-color: #3280a7 !important;
	color: #FFF;
	-webkit-border-top-left-radius: 6px;
	-webkit-border-bottom-left-radius: 6px;
	-moz-border-radius-topleft: 6px;
	-moz-border-radius-bottomleft: 6px;
	border-top-left-radius: 6px;
	border-bottom-left-radius: 6px;
	padding: 0.5rem 1rem;
}

.search-filter {
	margin-bottom: 1rem;
}

.search-box {
	width: 33%;
}

.search-box .advanced-search {
	line-height: 35px;
	margin-left: 12px;
}

/* New Course Form
/*-------------------------------------------------*/
h5 {
	font-size: 16px;
}

.price .paid,
.priority-course .detail,
.discount .detail,
.valid-period-w {
	display: none;
}

.priority-course .detail .priority-field-of-study {
	margin: 15px 0;
}

.cert-course,
.other-cert-course {
	display: none;
}

.course-period .date-month {
	margin-bottom: 12px;
}

.course-period > .month {
	display: none;
}

input#discount-percent,
.input-group>.input-group-prepend:not(:first-child)>.input-group-text {
	border-bottom-left-radius: 8px;
	border-top-left-radius: 8px;
}

.discount {
	display: none;
}

.discount .detail .or {
	font-size: 20px;
	color: #555;
	padding-top: 40px;
	text-align: center;
}

/* Settings
/*-------------------------------------------------*/
.comp-logo img {
	height: auto;
	max-height: 100px;
	margin: 8px 0;
}

.change-logo-link {
	font-size: 13px;
	margin-left: 4px;
}


#selectedImg {
	width: 840px;
}

.selectedimg .selected {
	display: inline-block;
	margin: 15px;
	position: relative;
}

.selectedimg .selected .remove {
	width: 20px;
	height: 20px;
	font-size: 20px;
	color: #333;
	background-color: #FFF;
	position: absolute;
	right: -9px;
	top: -8px;
	display: inline-block;
}

.selectedimg .selected .remove i {
	vertical-align: top;
}

.selectedimg .selected .remove:hover {
	color: #666;
}

.selectedimg .selected .name {
	width: 130px;
	font-size: 15px;
	color: #333;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	display: block;
	margin: 8px 0 2px 0;
}

.selectedimg .selected .size {
	font-size: 13px;
	color: #aaa;
	display: block;
}

.selectedimg .selected .content {
	width: 130px;
	height: 100px;
	line-height: 80px;
	text-align: center;
	border: solid 1px #ddd;
	padding: 10px;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	cursor: pointer;
}

.selectedimg .selected .content img {
	max-width: 110px;
	max-height: 80px;
	vertical-align: middle;
}

.moving-img {
	background-color: #fffee5;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
}

#edit-content .img-content {
	height: 300px;
	text-align: center;
	border: 1px solid #ddd;
	padding: 10px;
	border-radius: 8px;
	margin-bottom: 15px;
}

#edit-content .img-content img {
	max-height: 100%;
}

#edit-content .modal-body { padding-top: 0; }

#related-course-dw { margin-bottom: 60px; }

/* Media Queries
/*-------------------------------------------------*/
@media only screen and (min-width: 576px) {
	.modal-dialog { max-width: 600px; }
}

@media only screen and (min-width: 992px) and (max-width: 1500px) {
	/*form .form-group { width: 55% !important; max-width: 55% !important; flex: 0 0 55% !important; }*/
}

@media only screen and (max-width: 1200px) {
	
}

@media only screen and (max-width: 992px) {
	.search-box { width: 50%; }
}

@media only screen and (max-width: 768px) {
	.sec-title .act-btn { width: 100%; margin-top: 0.5rem; }
	.search-box { width: 100%; }
	.page .record { line-height: normal; margin-bottom: 1rem; }
	.m-dp { display: block !important; }
	.datepicker, .datetimepicker, .datetimepicker-month { display: none !important; }
	.pagination { margin: 0 auto; }
	.discount .detail .or { padding-top: 12px; }
	.discount .detail .or i { transform: rotate(90deg); }
}

@media only screen and (max-width: 576px) {
	.container-fluid { padding: 0 15px; }
	
	.round-tag:link, .round-tag:visited { font-size: 12px; padding: 4px 22px 4px 6px; }
	.round-tag i { top: 6px; }

	.navbar-brand { font-size: 18px; }
	.navbar-brand img { height: 30px; }
	.navbar .user { display: none;  }

	.side-menu .greetings { display: block; }

	.breadcrumb { font-size: 13px; padding: 10px 15px; }

	.sec-title { margin-bottom: 0.7rem; }
	.sec-title h4 { font-size: 18px; }
	
	.sec-title .act-btn .btn { font-size: 14px; padding: 0.3rem 0.6rem; }
	.act-btn .batch-upload, .overview { display: none; }
	
	.search-filter .custom-select { width: auto; }

	.empty { font-size: 16px; line-height: 1.5; padding: 2rem; }
	
	.date-range .to { padding-left: 0; }
	.date-range input { margin-bottom: 6px; }
	.date-range .col-form-label { padding-top: 0; }
	
	.multiselect .choice { padding: 4px 0; }
	.multiselect-dropdown li label { padding-top: 4px; padding-bottom: 4px; padding-left: 42px; }
	.multiselect-dropdown .checkbox-custom + .checkbox-custom-label:before { left: 10px; }

	.multiselect #selected-img .selectedimg .selected { padding: 6px 8px; }

}

.col-xs-15, .col-sm-15, .col-md-15, .col-lg-15,
.seven-col {
	position: relative;
	min-height: 1px;
	padding-left: 15px;
}

.col-xs-15 {
	width: 20%;
	float: left;
}
.seven-col {
	width: 100%;
	float: left;
}

@media (min-width: 768px) {
	.col-sm-15 {
		width: 20%;
		float: left;
	}
}

@media (min-width: 992px) {
	.col-md-15 {
		width: 20%;
		float: left;
	}
	
	.seven-col {
		width: 14.28%;
	}
}

@media (min-width: 1200px) {
	.col-lg-15 {
		width: 20%;
		float: left;
	}
}

@media (min-width: 1200px) {
	.col-lg-15 {
		width: 20%;
		float: left;
	}
}