/* ==========================================================/
	BASIC
/* =========================================================*/

	a:hover { text-decoration:none !important; }

/* ==========================================================/
	SHARE
/* =========================================================*/

	#share { text-align:center; margin:30px 0; font-size:10px; }
	#share .jssocials-share-link { border-radius: 50%; padding:.9em 1em; }

/* ==========================================================/
	CORE
/* =========================================================*/

	#page {
		display:flex;
		flex-wrap: wrap;
	}
	#logo {
		margin:auto;
		max-width:260px;
		width:100%;
		height:auto;
		padding:0 30px 30px 30px;
		display:block;
	}
	#logo-copyright {
		max-width:260px;
		margin:auto;
		width:100%;
		height:auto;
		padding:0 60px 30px 60px;
		display:block;
	}
	#header {
		width:350px;
		padding: 30px;
		color: rgba(255, 255, 255, .5);
		margin:0;
	}
	#header h1 {
		margin:15px 0 30px 0;
		font-size:1.3rem;
    text-transform:uppercase;
	}
	#footer {
		width:350px;
		padding: 30px;
		margin-top: -275px;
		color: rgba(255, 255, 255, .5) !important;
	}
	#footer.unover {
		margin-top:0;
	}
	#footer .text-muted {
		color: rgba(255, 255, 255, .5) !important;
	}
	#footer a.text-muted:hover, #footer a.text-muted:active, #footer a.text-muted:focus {
		color:#fff !important;
	}
	#description a:not(.btn) {
		color:inherit;
		text-decoration:underline;
	}
	#nav {
		margin:30px 0;
	}
	#nav .nav-pills .nav-link:not(.active) {
		color: rgba(255,255,255,0.5);
	}
	#nav .nav-pills .nav-link:not(.active):hover {
		color:#fff;
	}

	.btn-icon-circle {
		width: 36px;
		height: 36px;
		border-radius: 100%;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		font-size: 16px;
	}
	[data-notify="container"] {
		max-width: 400px;
	}
	.breadcrumb {
		font-size:smaller;
	}

	/* ==========================================================/
		QCM
	/* =========================================================*/

	#qcm {
		flex:1
	}
	#qcm form {
		padding:30px 15px 80px 15px;
	}
	#qcm header {
		left:350px;
		box-shadow: 0 0 1px rgba(0,0,0,0.1);
    background: #ffffff !important;
	}
	#qcm footer {
		left:350px;
		box-shadow: 0 0 1px rgba(0,0,0,0.1);
    background: #ffffff !important;
	}
	#qcm footer a.scrollToTop {
			overflow: hidden;
	    display:block;
	    width:0;
	    text-align:center;
			opacity:0;
			transition: opacity .3s ease-in;
	}
	#qcm footer a.scrollToTop.unabled {
	    width:20px;
	    opacity:1;
			margin-left: 1rem;
	}
	#qcm-submit {
		text-transform: uppercase;
		font-size: small;
	}

	/* user ragister */
	#year {
		min-width:90px;
	}
	#confirm .custom-control {
		padding-bottom:.375rem;
		padding-top:.375rem;
    margin-top:30px;
	}
	#confirm .jumbotron {
			margin: -16px -16px 30px -16px;
			padding: 2rem;
	}
	#confirm.noform .jumbotron {
			margin: -16px;
			padding: 2rem;
	}
	#confirm .jumbotron .lead {
		margin:0;
	}

	/* progress */
	#qcm-progress {
		flex:1;
	}
	#qcm-counter {
		display: flex;
		align-items: center;
		font-size: 10px;
	}
	#qcm-counter .percent {
	    margin-left: .4em;
	    font-size: 100%;
	}

	/* badge counter */
	#qcm form > .question > .card-header > .badge,
	#qcm form > .card-field > .card-header > .badge,
	#qcm form > .card-field > .card-body > .question > .card-header > .badge {
		display: inline-flex;
    padding: 0;
    font-size: xx-small;
    min-width: 20px;
    align-items: center;
    text-align: center;
    justify-content: center;
    line-height: 16px;
    vertical-align: middle;
	}
	#qcm form {
		counter-reset:question;
	}
	#qcm form > .question > .card-header > .badge > i::before,
	#qcm form > .card-field > .card-header > .badge  > i::before {
		counter-increment:question;
		content:counter(question);
		font-style:normal;
	}
	#qcm form > .question .question,
	#qcm form > .card-field {
		counter-reset:field;
	}
	#qcm form > .question .question > .card-header > .badge > i::before,
	#qcm form > .card-field > .card-body > .question > .card-header > .badge  > i::before {
		counter-increment:field;
		content: counter(field, upper-alpha);
		font-style:normal;
	}
	#qcm form > .card-field > .card-body > .question > .card-header > .label {
		font-weight:500;
	}

 .btn-comment {
	 padding:0;
 }
	/* card-fieldset */
	.card-comment {
		padding-top:0;
	}
	.card-field {
		display:block;
		margin-bottom: .5rem;
	}
	.card-field > .card-header {
		padding:1.25rem;
		background:#fff;
		font-weight: bold;
	}
	.card-field > .card-header strong {
		font-weight: bold;
	}
	.card-field > .card-body {
		padding-bottom: 0.75rem;
	}

	/* section */
	.card-section {
		margin-top:3rem;
		margin-bottom:1.5rem;
	}
	.card-section:first-child {
		margin-top:0;
	}

	/* questions */
	.question {
		display:block;
		background: #fff !important;
		margin-bottom: .5rem;
	}
	.question .card-header {
		padding-bottom: 0;
		padding-top: 1.25rem;
		border: none;
		background: none;
	}
	.question .label {
		margin: 0;
	}

	/* triggers */
	.trigger {
		display: none;
		padding: 0 1.25rem .75rem 1.25rem;
    background: none !important;
	}

	/* details */
	.detail.input-group {
	    flex: 1;
	    align-items: center;
	}
	.detail.input-group label {
		margin:0 .75rem;
	}
	.detail {
			transform: scaleX(0);
			transform-origin: left;
			transition: transform 0.3s ease;
	}
	.detail.show {
			transform: scaleX(1);
	}
	.detail:not(.show) input {
			display:none;
	}

/* ==========================================================/
	LOADER
/* =========================================================*/

	.form-loader { position:fixed; bottom:0; left:0; top:0; right:0; text-align:center; background:rgba(255,255,255,0.8); z-index:1040; }
	.form-loader div {
		position:absolute;
		bottom:50%;
		left:50%;
		text-align:center;
		border:12px solid #5867dd;
		border-top:12px solid #fff;
		border-radius:50%;
		width:60px;
		height:60px;
		margin:-30px;
		-webkit-animation:spin 2s linear infinite;
		   -moz-animation:spin 2s linear infinite;
			 -o-animation:spin 2s linear infinite;
			-ms-animation:spin 2s linear infinite;
				animation:spin 2s linear infinite;
	}
	@keyframes spin {
		0% {
		-webkit-transform:rotate(0deg);
		   -moz-transform:rotate(0deg);
			 -o-transform:rotate(0deg);
			-ms-transform:rotate(0deg);
				transform:rotate(0deg);
		}
		100% {
		-webkit-transform:rotate(360deg);
		   -moz-transform:rotate(360deg);
			 -o-transform:rotate(360deg);
			-ms-transform:rotate(360deg);
				transform:rotate(360deg);
		}
	}

	/* ==========================================================/
		MODAL
	/* =========================================================*/

		#mentions .modal-body { padding:30px }

	/* ==========================================================/
		MEDIAS QUERIES
	/* =========================================================*/

	/* Medium devices (tablets, less than 992px) */
	@media (max-width: 991.98px) {
		#page											{ display:block; }
		#header										{ width:auto; text-align:center; }
		#header ul								{ list-style:none; padding:0; }
		#footer										{ margin-top: 0; width:auto; margin-bottom:60px; }
		#qcm header								{ left:0; right:0; }
		#qcm footer								{ left:0; right:0; }
		#qcm form									{ padding:.5rem .5rem 0 .5rem; }
		#qcm-counter em 					{ display: none; }
		#confirm .custom-control	{ margin-top: 0; }
	}
	/* Small devices (landscape phones, less than 768px) */
	@media (max-width: 767.98px) {
		#qcm .dropdown.bootstrap-select 				{ width:100% !important; }
		#qcm .dropdown.bootstrap-select button	{ width:100% !important; }
		#qcm .detail 														{ height:0; transform: scaleY(0); transform-origin: top; }
		#qcm .detail.show 											{ height:auto; margin-top: 10px; transform: scaleY(1); }
	}
	/* case on confirm success */
	.no-footer #footer {
		margin-bottom:0;
	}

	/* SIZE & UP */
	/* Small devices (landscape phones, 576px and up) */
	@media (min-width: 576px) {
	}
	/* Medium devices (tablets, 768px and up) */
	@media (min-width: 768px) {
	}
	/* Large devices (desktops, 992px and up) */
	@media (min-width: 992px) {
	}
	/* Extra large devices (large desktops, 1200px and up) */
	@media (min-width: 1200px) {
	}

	/* SIZE LESS THAN */
	/* Extra small devices (portrait phones, less than 576px) */
	@media (max-width: 575.98px) {
		#qcm-counter { flex:1 }
		#qcm-progress { display:none }
		.bootstrap-select .dropdown-toggle:focus,
		.bootstrap-select>select.mobile-device:focus+.dropdown-toggle { outline:none!important; }
		textarea.form-control { width: 100% !important; }
		.alert[data-notify=container] { margin-left:20px !important; }
		.dropdown-item { white-space: normal !important }
		.card-section { text-align:center }
		.card-section small { display:block; margin-bottom:1rem;}
	}
	/* Small devices (landscape phones, less than 768px) */
	@media (max-width: 767.98px) {
	}
	/* Medium devices (tablets, less than 992px) */
	@media (max-width: 991.98px) {
	}
	/* Large devices (desktops, less than 1200px) */
	@media (max-width: 1199.98px) {
	}