@charset "utf-8";

/* add style for HDC */

/*********************************************
 * Common
 *********************************************/

body {
	color: #4a4a4a;
}
a,
a:link,
a:visited {
	color: #3f6b6e;
}

/*==================================
	Form
==================================*/
.form-control {
	border: 1px solid #727272 !important;
	box-shadow: none;
}
fieldset {
	margin-bottom: 20px;
}
legend {
	color: #AE6221;
}

/*==================================
	Panel
==================================*/
.panel-default {
	box-shadow: none;
}
.panel-default .panel-heading {
	background-color: #fafaf8;
	padding: 12px 16px;
	font-weight: 700;
	color: #4a4a4a;
}
.panel-default .panel-heading .mark {
	display: none;
}

/*==================================
	Table
==================================*/
.table-default,
.class-green .table-default {
	border-top-color: #408d92;
	border-bottom-color: #408d92;
}
.table-default th,
.table-default td {
	border: 1px solid #d8d8d8;
}
.table-default thead th {
	padding: 8px 3px;
}
.table-horizontal th {
	border-right: 1px solid #408d92;
}
.table-csv {
	border-top: 3px solid #408d92;
	border-bottom: 3px solid #408d92;
}
.table-csv thead th {
	box-shadow: none;
	background-color: #4a4a4a;
}
.table-csv td {
	background-color: #fafaf8;
}
.table-grader tbody td {
	background-color: #fafaf8;
}
.table-default tbody th {
	background-color: #fafaf8;
}

/*==================================
	Button
==================================*/
.btn {
	font-weight: 700;
}
.btn-primary,
.btn-primary:hover,
.btn-primary:active,
.btn-primary:focus {
	background: rgb(9,214,156) !important;
	background: linear-gradient(90deg, rgba(9,214,156,1) 0%, rgba(12,180,213,1) 100%) !important;
	border-radius: 200px;
	border: none;
	font-weight: 700;
}
.btn-danger,
.btn-danger:hover,
.btn-danger:active,
.btn-danger:focus {
	background: #fd1616 !important;
	background: linear-gradient(90deg, #e1835a 0%, #fd1616 100%) !important;
	border-radius: 200px;
	border: none;
	font-weight: 700;
}
.btn-default,
.btn-default:hover,
.btn-default:active,
.btn-default:focus {
	background-color: #fafaf8 !important;
	color: #4a4a4a !important;
}
.btn-info,
.btn-info:hover,
.btn-info:active,
.btn-info:focus {
	background: #5067A2 !important;
	background: linear-gradient(90deg, #7292e5 0%, #5067A2 100%) !important;
}
.btn-primary:hover,
.btn-danger:hover,
.btn-info:hover,
header .logout:hover {
	opacity: .85;
}
/*
.panel-heading > .btn.float-right.btn-radius,
.panel-heading > .float-right .btn-radius {
	background-color: transparent !important;
	background: none !important;
	color: #3f6b6e !important;
	padding: 0;
	position: relative;
	top: 2px;
	border: none !important;
	box-shadow: none !important;
}
*/
.btn[disabled],
.btn.disabled {
	opacity: .5 !important;
}

/*==================================
	Alert & Well
==================================*/
.alert {
	padding: 15px;
}
.alert-default {
	background-color: #F7F8F7;
	border: 1px solid #d8d8d8;
}
.alert-info {
	color: #2a7c83;
	background-color: #e6f4f5;
	border-color: #e6f4f5;
}
.alert-warning {
	background-color: #FFEABE;
	border-color: #FFEABE;
}
.alert-danger {
	background-color: #ffe9e8;
	border-color: #ffe9e8;
	color: #AE2521;
}
.well {
	background-color: #F7F8F7;
	border: 1px solid #d8d8d8;
}

/*==================================
	Progress
==================================*/
.progress-bar-danger {
	background-color: #F26C69;
}

/*==================================
	Nav
==================================*/
.nav-tabs > li > a {
	padding: 12px 23px;
	border: 1px solid #d8d8d8 !important;
	background-color: #fafaf8;
}

/*==================================
	Modal
==================================*/
.modal-header {
	background-color: #fafaf8;
	padding: 12px 16px;
}
.modal-header,
.modal-header .modal-title {
	font-weight: 700;
	color: #4a4a4a;
}
.modal-header .close {
	margin-top: -1px;
	font-size: 22px;
	color: #4a4a4a;
}
.modal-footer .btn {
	padding: 9px 20px;
	border-radius: 200px;
	font-weight: 700;
}

/*==================================
	Icon
==================================*/
img.icon[src$="common/images/icons/add.png"],
img.icon[src$="common/images/icons/check.png"],
img.icon[src$="common/images/icons/link.png"] {
	filter: hue-rotate(46deg);
}


/*==================================
	Dropzone
==================================*/
html body .dropzone .dz-message {
	color: #408d92;
}
html body .dz-drag-hover .dz-message{
	border:3px dotted #78acb1;
}

/*==================================
	Label
==================================*/
.label {
	white-space: normal;
}
.label-info {
	background-color: #5067A2;
}
.label-success {
	background-color: #287B7F;
}
.label-primary {
	background-color: #5067A2;
}
.label-danger {
	background-color: #AE2521;
}

/*==================================
	Text
==================================*/
.text-primary,
.message {
	color: #5067A2 !important;
}
.error,
.required,
.text-danger,
.Red {
	color: #AE2521 !important;
}
.gray {
	color: #b5b5b5;
}
.green {
	color: #408d92 !important;
}
.brown {
	color: #AE6221;
}

/*********************************************
 * Help
 *********************************************/
.help h3 {
	color: #3f6b6e;
}

/*********************************************
 * Login
 *********************************************/
.login-main {
	background-image: none;
	height: auto;
	text-align: center;
	display: flex;
	align-items: center;
	flex-direction: column-reverse;
}
.login-main img.img-glexa {
	width: 360px;
	margin-top: 40px;
	margin-bottom: 20px;
}
.login-main #div-language-form {
	margin-bottom: 0;
	margin-top: 20px;
	width: 100%;
}
.login-main .lang .btn {
	padding: 7px 0;
	font-size: 14px;
	border-radius: 200px;
	width: 38px;
	height: 38px;
}
.panel-login {
	border: none;
	box-shadow: none;
	margin-bottom: 0;
}
.panel-login .panel-heading {
	padding: 0 0 20px 0;
	box-shadow: none;
	font-size: 24px;
	text-align: center;
}
.panel-login .panel-body {
	padding: 20px 0 0 0;
}
.panel-login .panel-body .login-form {
	padding: 20px 10px;
	background: rgb(9,214,156) !important;
	background: linear-gradient(90deg, rgba(9,214,156,1) 0%, rgba(12,180,213,1) 100%) !important;
}
#div-login input[type="submit"].btn.btn-black {
	padding: 8px 20px;
	font-weight: 700;
	border: none !important;
	position: relative;
	top: 2px;
	border-radius: 200px;
	color: #08b5d3 !important;
	min-width: 120px;
}
#div-login input[type="submit"].btn.btn-black:hover {
	color: #fff !important;
}
#div-login small {
	font-size: 12px;
}
.login-form ul li a .glyphicon,
.panel-login .panel-body .login-form label .glyphicon {
	color: rgba(0, 0, 0, .19);
}
#div-login > form {
	margin-bottom: 15px;
}
.login-form ul li a {
	font-size: 14px;
}
#div-login .form-control {
	padding: 8px 6px;
}
@media screen and (min-width: 768px) {
	.panel-login .panel-body .login-form {
		max-width: 500px;
		margin-left: auto;
		margin-right: auto;
	}
	.panel-login .panel-body .login-form .row {
		margin: 0;
		padding: 5px 20px;
	}
	.login-main #div-language-form {
		max-width: 500px;
	}
	.login-form form .col-sm-offset-2 {
		margin-left: 0;
	}
	.login-form form .col-sm-3,
	.login-form form .col-sm-2 {
		width: 100%;
	}
	#div-login .form-control#input-login {
		margin-bottom: 10px;
	}
	.login-form form .col-sm-2 {
		text-align: center;
	}
	#div-login input[type="submit"].btn.btn-black {
		min-width: 160px;
		padding: 10px;
	}
}

/*********************************************
 * Header
 *********************************************/
.current-class-name {
	display: none !important;
}
header .navbar-default .navbar-brand {
	padding: 0 10px 0 20px;
	min-height: 81px;
}
header .navbar-brand img {
	height: 37px;
}
header .gnav li {
	margin: 23px 5px 0 0;
	border-right: none;
}
header .gnav li>a:hover{
	color:#4a4a4a !important;
	background: transparent !important;
}
.navbar-default .navbar-nav>li>a {
	color: #4a4a4a;
	font-weight: 700;
	font-size: 14px;
}
header .logout,
header .logout:hover,
header .logout:active,
header .logout:focus {
	background: rgb(9,214,156) !important;
	background: linear-gradient(90deg, rgba(9,214,156,1) 0%, rgba(12,180,213,1) 100%) !important;
	padding: 11px 30px;
	font-size: 14px;
	font-weight: 700;
	border-radius: 200px;
	border: none;
	padding: 9px 20px !important;
	min-width: 125px;
	margin-top: 13px;
}
header .logout:hover {
	background: rgb(9,214,156) !important;
	background: linear-gradient(90deg, rgba(9,214,156,1) 0%, rgba(12,180,213,1) 100%) !important;
	color: #fff !important;
	border: none !important;
}
header .nav2 {
	border-bottom: none;
	background-color: #408d92;
}
header .nav2 .container-fluid {
	padding: 7px 0px;
}
header .user-icon {
	background-image: none;
	padding-left: 0 !important;
}
header .nav2 .navbar-nav li.mode {
	padding-left: 5px;
	background-image: none;
}
header .class-menu {
	background-image: none;
}
header .class-menu li {
	border-right: 1px solid #fff;
}
header .nav2 .container-fluid>.navbar-collapse {
	border: none !important;
	box-shadow: none !important;
}
header .navbar-toggle {
	margin-top: 14px;
}
.navbar-inverse .navbar-collapse,
.navbar-inverse .navbar-form {
	border-color: rgba(16, 16, 16, 0);
}

/*********************************************
 * Top
 *********************************************/
.calendar.gx-tabs .div-classes {
	border: none;
	border-bottom: 1px dashed #ccc;
}
.calendar.gx-tabs .div-classes:last-child {
	border-bottom: none;
}
.calendar.gx-tabs .div-classes h5 a {
	font-weight: 700;
}

/*********************************************
 * Class
 *********************************************/
.class-directory {
	 margin-left: -15px;
	 margin-right: -15px;
}
.class-directory > ul > li > ul > li {
	padding: 13px 12px 8px 12px;
}
.class-directory > ul > li > ul > li > ul {
	padding-top: 6px;
}
.class-directory > ul > li > ul > li >ul li:last-child {
	padding-bottom: 5px;
}
.class-top-directory {
	padding: 12px;
	border: none;
	margin: -15px 0 4px 0;
	border-bottom: 1px dashed #bacbca;
	border-radius: 0;
}
.class-directory .class-top-directory .badge {
	right: 20px;
	top: 12px;
}
.class-top-directory a.x-fancy {
	top: 9px;
	left: 9px;
}
.class-directory > ul > li > ul > li {
	padding: 9px 12px 5px 12px;
}
.class-directory > ul > li > ul > li:last-child {
	border-bottom: none;
}
#div-class-contents  .panel-body > .form-inline {
	margin-bottom: 15px;
}
.table-class-content .progress span {
	background-color: #3f8c92 !important;
}
#div-class-contents .confirm {
	padding: 10px;
}
#div-class-contents .confirm > .text-center {
	display: flex;
	flex-direction: column;
	align-items: center;
}
#div-class-contents .confirm .btn-black {
	background: rgb(9,214,156) !important;
	background: linear-gradient(90deg, rgba(9,214,156,1) 0%, rgba(12,180,213,1) 100%) !important;
	border: none !important;
	font-weight: 700;
	border-radius: 200px;
	padding: 10px;
	font-size: 16px;
}
.table-class-content th,
.table-class-content td {
	background-color: #fafaf8;
	padding: 10px;
}
.plugin-icon,
.select-plugin .plugin-icon-border .plugin-icon-bg {
	filter: brightness(.9) hue-rotate(56deg);
}
.div-panel-directory .a-remove-directory {
	border-radius: 3px !important;
}
.class-top-btns .btn {
	padding: 7px 20px;
	font-weight: 700;
}
.classes div.list-group-item a,
.classes .inline-class-name {
	padding: 10px 12px 10px 40px;
}
.classes div.list-group-item > .x-fancy {
	top: 6px;
}
.table-class-content .config fieldset {
	margin-top: 10px;
	padding: 15px;
}
.login-time {
	color: #3f6b6e;
}
#div-class-news .panel-heading .btn,
#div-class-contents .panel-heading .btn {
	border-radius: 200px;
	padding: 5px 18px;
	margin-right: -8px;
}

/*********************************************
 * Plugin Common
 *********************************************/
.plugin-header {
	background-color: #fafaf8;
	border-bottom: none;
}

/*********************************************
 * Quiz
 *********************************************/
body.quiz-do {
	background: rgb(115,232,199);
	background: linear-gradient(90deg, rgba(115,232,199,1) 0%, rgba(116,212,231,1) 100%);
}
body.quiz-do .main > .container {
	width: auto;
	background-color: #fff;
	margin: 30px 40px 30px;
	padding: 50px;
	border-radius: 15px;
}
body.quiz-do .plugin-header {
	display: none;
}
body.quiz-do .plugin-tit {
	color: #4a4a4a;
	padding: 20px;
	margin-bottom: 40px;
	border-bottom: none;
}
body.quiz-do .plugin-tit > h1 {
	font-size: 22px;
}
.table-quiz {
	margin-bottom: 0;
	border-bottom:  none;
}
body.quiz-do footer {
	display: none;
}
body.quiz-do .v2-screen {
	padding-bottom: 0 !important;
}
body.quiz-do [class*="qtype"] {
	margin-bottom: 20px;
	padding: 0 10px 10px 10px;
	border-bottom: 1px solid #ebebeb;
}
body.quiz-do [class*="qtype"]:last-child {
	border-bottom: none;
}
body.quiz-do #page_controller {
	position: static;
	padding: 15px;
	margin-left: -15px;
	margin-right: -15px;
	margin-bottom: 20px;
	border-top: none;
	box-shadow: none;
}
body.quiz-do #page_controller > .row {
	display: flex;
	align-items: center;
}
.quiz-do-pager.display-inline-block {
	display: flex !important;
	align-items: center;
	justify-content: center;
}
.quiz-do-pager .btn.btn-black {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 40px !important;
	min-height: 40px;
	max-width: 40px;
	max-height: 40px;
	margin: 0 2px;
	border-radius: 40px;
	font-size: 16px;
	font-weight: 700;
}
#page_controller .btn-primary {
	background: rgb(9,214,156);
	background: linear-gradient(90deg, rgba(9,214,156,1) 0%, rgba(12,180,213,1) 100%);
	padding: 11px 30px;
	font-size: 16px;
	font-weight: 700;
}
#page_controller .a-cancel {
	border-radius: 400px;
	text-decoration: none !important;
	border: 2px solid #4a4a4a;
	background: none !important;
	color: #4a4a4a !important;
	background-color: #fff !important;
	padding: 11px 30px;
	font-size: 16px;
	font-weight: 700;
}
.page-nav-border-on {
	border-top: 1px solid #d8d8d8;
	border-bottom: 1px solid #d8d8d8;
}
.page-nav li {
	border-right: 1px solid #d8d8d8;
}
html body .question-form a {
	background-color: #fafaf8;
	border: 1px solid #d8d8d8;
	border-radius: 5px;
}
html body .quiz-pages {
	background-color: #fafaf8;
	border: 1px solid #d8d8d8;
}
html body .table-quiz-edit tr:hover th,
html body .table-quiz-edit tr:hover td{
	background-color:#fafaf8;
}
html body .page-controller {
	border-top: 1px solid #fafaf8;
	border-bottom: 1px solid #fafaf8;
}
html body .sort-ul .sortbox {
	background-color: #f9f9f9;
}
html body #table-matching-7 .connected {
	background-color: #d9d9d9;
}
.set-limit-timer {
	padding-top: 9px;
}
body.body-quiz #form-quiz .text-right .btn[type="button"],
body.body-quiz #form-quiz .text-right .btn[type="submit"] {
	padding: 11px 30px;
	font-size: 16px;
	font-weight: 700;
	min-width: 150px;
	margin-top: 0;
	margin-bottom: 10px;
}
.btn.a-retry-quiz {
	padding: 9px 22px;
	font-size: 16px;
}
body.body-quiz .area-large,
body.body-quiz .text-large {
	width: 100%;
}

/*********************************************
 * Board
 *********************************************/
body.board-do .button-send-comment {
	border-radius: 200px;
	padding: 9px 20px !important;
	min-width: 125px;
	font-size: 16px;
	position: relative;
	top: -4px;
}
body.board-do .plugin-header {
	display: none;
}
html body.board-do .well-fixed-header {
	border-bottom: none;
	padding-top: 18px;
	padding-left: 15px;
	font-size: 16px;
	font-weight: 700;
	padding-top: 15px;
	padding-bottom: 15px;
	border-bottom: none;
}
.board-do .show-options > div.active .glyphicon {
	color: #5067A2 !important;
}
.board-do .div-comment.green {
	color: #439217 !important;
}
.board-do .well-fixed-header a.btn.margin-right-md {
	margin-right: 2px !important;
}

/*********************************************
 * Story
 *********************************************/
body.body-story form .text-right.sp-text-center .btn {
	border-radius: 200px;
}

/*********************************************
 * Mobile
 *********************************************/
@media screen and (max-width: 767px) {
	.container.sp-padding-none {
		padding-right: 15px !important;
		padding-left: 15px !important;
	}
	html body .panel {
		border-radius: 4px !important;
		border-right: 1px solid #d8d8d8 !important;
		border-left: 1px solid #d8d8d8 !important;
		margin-bottom: 15px;
	}
	html body .v2-screen > .main > .container {
		padding-right: 15px;
		padding-left: 15px;
	}
	header {
		margin-bottom: 15px;
	}
	header .gnav li {
		margin: 0;
	}
	header .gnav li a {
		padding: 13px;
	}
	header #class-menu {
		box-shadow: none;
	}
	body[class^="class-"] header {
		margin-bottom: 0;
	}
	body[class^="class-"] .nav3 {
		margin-bottom: 15px;
	}
	footer {
		padding: 0 15px 25px 15px;
	}
	.login .lang {
		margin-top: 0;
	}
	.login-main img.img-glexa {
		width: 300px;
	}
	.panel-login .panel-body .login-form {
		margin: 0 15px;
	}
	.panel-login .panel-body .login-form .col-sm-3.col-sm-offset-2 {
		margin-bottom: 12px;
	}
	.panel-login .panel-body .login-form .col-sm-2 {
		text-align: center;
	}
	#div-login input[type="submit"].btn.btn-black {
		padding: 13px 55px;
		font-size: 16px;
	}
	#page_controller .btn {
		border-radius: 200px !important;
	}
	body.quiz-do {
		background: none;
		background-color: #fff;
	}
	body.quiz-do #page_controller > .row {
		display: block;
	}
	body.quiz-do .main > .container {
		margin: 0;
		border-radius: 0;
	}
	body.body-quiz #form-quiz .text-right {
		text-align: center !important;
	}
	.plugin-header.sp-margin-bottom-none {
		margin-bottom: 15px !important;
	}
	.table-horizontal th {
		color: #408d92;
	}
	fieldset {
		margin-bottom: 20px;
	}
	.row > .col-sm-8.padding-left-none {
		padding-left: 15px !important;
	}
	.btn[data-target="#class-menu"].margin-md {
		margin: 0 0 15px 0 !important;
	}
	.class-top-btns.sp-margin-md {
		margin: 0 0 10px 0 !important;
	}
	#div-class-contents .panel-body.sp-padding-none {
		padding: 15px !important;
	}
	html body .panel.sp-margin-bottom-none {
		margin-bottom: 15px !important;
	}
	html body .panel.sp-border-none {
		border: 1px solid #d8d8d8 !important;
	}
	html body .panel.panel-default.sp-margin-bottom-none.sp-border-bottom-none,
	html body .panel.panel-default.sp-margin-bottom-none.sp-border-none {
		border-bottom: 1px solid #d8d8d8 !important;
	}
	html body .panel.panel-default.sp-margin-bottom-none.sp-border-bottom-none.sp-border-top-none {
		border-top: 1px solid #d8d8d8 !important;
		border-bottom: 1px solid #d8d8d8 !important;
		margin-bottom: 15px !important;
	}
	html body .alert.sp-margin-none {
		margin-bottom: 15px !important;
	}
	.panel>.list-group:last-child .list-group-item:last-child {
		border-bottom: 1px solid #DBE4E3;
	}
	.board-do #div-instructions {
		box-shadow: none;
		background: rgb(175 175 175 / 90%);
	}
	#div-class-contents .confirm .btn-black {
		min-width: 200px;
		white-space: normal;
	}

}

/*********************************************
 * PC
 *********************************************/
@media screen and (min-width: 768px) {
	body.quiz-do #page_controller .col-sm-4 .btn-group.sp-btn-group-flex {
		display: flex;
		align-items: flex-end;
		flex-direction: column;
	}
	body.quiz-do #page_controller .col-sm-4 .btn-group.sp-btn-group-flex .btn {
		border-radius: 200px;
		min-width: 200px;
	}
}