/**** BASIC HTML ELEMENTS ****/
    body, html {
        height: 100%;
        margin: 0;
        padding: 0;
    }
	body {
	   background: #fafafa;
	   color: #2a4753;
	   font-family: 'Josefin Sans';
	}
	body.dark {
		background: #2a4753;
		color: #414042;
	}
	a,
	a:hover,
	a:active,
	a:focus {
		color: #0dafbb;
		text-decoration: none;
	}
	a:hover {
		text-decoration: underline;
	}
	section {
		padding: 20px;
		text-align: center;
	}
	section.slim {
		padding: 20px;
	}
	section.bgLight {
	   background: #fafafa;
	}
	*:focus { outline: none; }
	hr {
	   border-top: 1px solid #ddd;
	}
	

/**** BOOTSTRAP OVERRIDES ****/
    .btn {
        border-radius: 20px;
        outline: none !important;
    }
    .btn:focus,
    .btn:active {
        -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.18), 0 8px 16px rgba(0, 0, 0, 0.36);
        box-shadow: 0 0 8px rgba(0, 0, 0, 0.18), 0 8px 16px rgba(0, 0, 0, 0.36);
    }
    .btn-primary {
        background-color: rgba(2, 182, 189, 0.8);
        border-color: rgba(2, 182, 189, 0.8);
    }
    .btn-primary:hover,
    .btn-primary:focus,
    .btn-primary:active {
        background-color: rgba(2, 182, 189, 1);
        border-color: rgba(2, 182, 189, 1);
    }
    .btn-large {
        padding: 20px;
    }
    
    .checkbox-inline, .checkbox label, .is-focused .checkbox-inline, .is-focused .checkbox label, .is-focused .radio-inline, .is-focused .radio label, .is-focused .switch label, .radio-inline, .radio label, .switch label {
        color: rgba(0,0,0,.4);
    }
    .checkbox label .checkbox-decorator, label.checkbox-inline .checkbox-decorator {
        /* left: 2px; */
    }
    .modal-header .close {
        margin-top: 0;
        position: absolute;
        right: 20px;
        top: 15px;
    }
    .modal-footer {
        border-top: 0;
    }
    
    .modal-content {
        border-radius: 35px;
    }
    
    
    /** TEST **/
    .modal.popup .modal-dialog {
        margin: 0 auto;
        opacity: 0;
        top: 20%;
        transform: scale(0.7);
        transition: all 0.3s;
        will-change: opacity transform;
    }
    .modal.popup.show .modal-dialog {
        transform: scale(1);
        opacity: 1;
        backdrop-filter: blur(5px);
    }
    
    
/**** AREA SELECTOR STYLES ****/
	#area-data-wrapper {
		background: #fff;
		box-shadow: 5px 5px 7px #333;
		height: auto;
		opacity: 0;
		padding: 20px;
		position: absolute;
		width: 100%;
		transition: top .7s, opacity .3s;
	}
	#area-data-wrapper.active {
		opacity: 1;
	}
	#area-data-wrapper #area-title {
		border-bottom: 1px dotted #777;
	}
	#area-data-wrapper #area-content a,
	.expandedArea a {
		color: #414042;
		display: block;
	}
	#area-data-wrapper #area-content a:hover,
	.expandedArea a:hover {
		color: #964b98;
		text-decoration: none;
	}
	#area-data-wrapper .close.btn {
		height: 30px;
		line-height: 35px;
		margin: 0;
		padding: 0px;
		text-align: center;
		width: 30px;
		top: -10px;
		right: -10px;
	}
	
	 
/**** DASHBOARD STYLES ****/
	.recent-activity-wrapper {
		border: 1px dashed #aaa;
		padding: 10px;
	}
	.recent-activity-wrapper .delimiter {
		border-top: 1px dotted #93c1c6;
		margin: 10px 0;
	}
	.recent-activity-wrapper p {
		margin-bottom: 0;
	}
	
	
/**** CARD STYLES ****/
	.card {
		background: #fff;
		border-radius: 10px;
		box-shadow: 0 0 10px #777;
		color: rgba(0,0,0, 0.87);
		display: inline-block;
		padding: 10px;
		width: 100%;
		transition: box-shadow .2s linear;
	}
	.large.card {
	   height: 150px;
	   overflow: hidden;
	}
	
	.action.card {
		background-color: #fff;
		background-position: 10px 10px;
		background-repeat: no-repeat;
		background-size: 92px 92px;
		min-height: 112px;
		padding-left: 120px;
	}
	.action.card .card-content {
		padding: 12px 0 0 0;
	}
	.action.area.card {
		padding: 0;
	}
	.action.area.card .card-content {
		padding: 0;
	}
	.action.area.card .togglerArea {
		min-height: 112px;
		padding-left: 120px;
		padding-top: 12px;
		cursor: hand;
		cursor: pointer;
	}
	.action.card .user-progress {
		margin-top: 35px;
	}
	.available.action.card {
		cursor: hand;
		cursor: pointer;
	}
	.available.action.area.card {
		cursor: default;
	}
	.available.action.card:hover {
		box-shadow: 0 0 10px #000;
	}
	.action.area.card .expandedArea {
		padding: 0px 10px 20px 120px;
	}
	
	
/**** EXERCISE EDITOR ****/
/*
	input[type="text"] {
		display: inline-block;
		width: 100%;
		padding: 8px 10px;
	}
*/
	.exerciseEditor p {
		height: 40px;
		line-height: 40px;
		margin: 0;
		padding: 0;
	}


/**** EXERCISE STYLES ****/
	.chapter-title {
		font-size: 14pt;
	}
	.chapter-ingress {
		font-weight: bold;
		font-style: italic;
	}
	.question-container {
		background: #fff;
		border-radius: 10px;
		font-family: 'Crete Round';
		font-size: 16pt;
		padding: 10px 20px 20px 20px;
		margin: 30px 0 150px 0;
		position: relative;
	}
	.question-container .hyperButton {
	   background: #c6c6c6 url('../img/hyper-hand.png') no-repeat bottom center;
	   border-radius: 40px;
	   cursor: pointer;
	   cursor: hand;
	   display: inline-block;
	   position: absolute;
	   top: 10px;
	   right: 15px;
	   width: 40px;
	   height: 40px;
	   
	}
	.question-container .hyperButton:hover {
	   background-color: rgba(0, 173, 186, .8);
	}
	.question-container .hyperText {
	   background: rgba(0,0,0,.1);
	   border-radius: 10px;
	   padding: 10px 20px;
	   margin: 10px -20px;
	}
	.question-container .hyperText p {
	   margin: 0;
	}
	.question-container .questionNumber {
		background: #516d79;
		border-radius: 0 0 10px 10px;
		color: #fff;
		font-size: 22pt;
		font-weight: bold;
		line-height: 50px;
		text-align: center;
		width: 50px;
		height: 50px;
		position: absolute;
		top: 0;
		left: 20px;
	}
	.question-container .question {
		padding: 0 75px;
		min-height: 50px;
		text-align: left;
		margin-bottom: 20px;
	}
	.question-container .list-group .list-group-item {
	   display: block;
	}
	.question-container .form-group {
	   margin: 0 50px 50px 50px;
	}
	.question-container .with-fa.checkIfCorrect {
		border-radius: 10px;
		line-height: 18pt;
		margin: 1px 0;
		position: relative;
		padding: 8px 5px 8px 55px;
		cursor: pointer;
		cursor: hand;
		transition: background-color .2s linear, opacity .3s linear;
		will-change: background-color, opacity;
	}
	.question-container .with-fa.checkIfCorrect:hover {
		background-color: rgba(0, 173, 186, .2);
	}
	.question-container .with-fa.checkIfCorrect .fa {
		color: #00adba;
		font-size: 18pt;
		line-height: 18pt;
		position: absolute;
		top: 8px;
		left: 20px;
	}
	.question-container .with-fa.correct {
		background-color: #0b0;
		color: #fff;
	}
	.question-container .with-fa.correct .fa {
		color: #fff;
		font-weight: normal;
	}
	.question-container .with-fa.correct:hover {
		background-color: #0b0;
	}
	.question-container .with-fa.incorrect {
		opacity: 0;
		filter: Alpha(Opacity=0);
		cursor: default;
	}
	.question-container .question {
		border-bottom: 2px dotted #9d9d9c;
		padding-bottom: 10px;
	}
	.question-container .question-slider {
		margin: 40px 50px;
		height: 20px;
		border-radius: 20px;
	}
	.question-container .question-slider,
	.question-container .question-slider .noUi-handle {
		background: #00adba;
		border: none;
		box-shadow: none;
		cursor: hand;
		cursor: pointer;
	}
	.question-image-wrapper {
		text-align: center;
	}
	.question-image {
		border-radius: 10px;
	}
	.question-image.preview {
		height: auto;
		width: 200px;
	}
	.question-slider .noUi-handle {
		border-radius: 50px;
		color: #fff;
		font-weight: bold;
		height: 70px;
		left: -35px;
		line-height: 70px;
		text-align: center;
		top: -25px;
		width: 70px;
	}
	.question-slider .noUi-handle::before,
	.question-slider .noUi-handle::after {
		content: none;
	}
	.question-slider.correct,
	.question-slider.correct .noUi-handle {
		background-color: #0b0;
	}
	.question-slider.ui-state-disabled {
		opacity: 1;
		filter: Alpha(Opacity=100);
	}
	
	.sortable li.list-group-item {
	   background: #00adba;
	   color: #fff;
	   cursor: move;
	   margin: 10px 0;
	   border-radius: 20px !important;
	   will-change: background-color;
	   transition: background-color .2s linear;
	}
	.sortable li.list-group-item.correct {
	   background: #0b0;
	}
	.sortable li.list-group-item i.fa {
	   position: absolute;
	   top: 50%;
	   margin-top: -11px;
	}
	.sortable li.list-group-item i.fa.left {
	   left: 20px;
	}
	.sortable li.list-group-item i.fa.right {
	   right: 20px;
	}
	
	
/**** LOGIN STYLES ****/
	.btn.login-btn {
		background-size: auto 20px;
		background-position: 20px 8px;
		background-repeat: no-repeat;
	}
	.btn.login-btn.google-btn {
		background-image: url('../img/google-idp.png');
	}
	.btn.login-btn.microsoft-btn {
		background-image: url('../img/office365-idp.png');
	}
	
	
/*** MENU STYLES ****/
	.menu {
		display: block;
	}
	.menu h6 {
		text-transform: uppercase;
		font-weight: bold;
	}
	.menu h7 {
		text-transform: uppercase;
	}
	.menu a,
	.menu p.fake-link {
		background-color: transparent;
		background-position: left center;
		background-repeat: no-repeat;
		background-size: 30px auto;
		color: #414042;
		display: block;
		height: 40px;
		line-height: 40px;
		margin: 0;
		padding-left: 40px;
		transition: color .3s;
	}
	.menu a:hover {
		color: #964b98;
		text-decoration: none;
	}
	.menu p.description {
		background-color: transparent;
		background-position: left center;
		background-repeat: no-repeat;
		background-size: 18px auto;
		display: block;
		height: 18px;
		line-height: 18px;
		margin: 5px 0;
		padding-left: 25px;
	}
	.menu p.description.blue { background-image: url('../img/icons/progress-blue.png'); }
	.menu p.description.gray { background-image: url('../img/icons/progress-gray.png'); }
	.menu p.description.green { background-image: url('../img/icons/progress-green.png'); }
	.menu p.description.yellow { background-image: url('../img/icons/progress-yellow.png'); }
	
	/* TOP MENU */
	section.top-menu {
		background-color: #2a363b;
		color: rgba(255,255,255,.6);
		line-height: 60px;
		padding: 0;
	}
	section.top-menu a,
	section.top-menu span {
       color: rgba(255,255,255,.7);
       display: inline-block;
       font-weight: bold;
       font-size: 14px;
       margin: 0 30px;
       text-transform: uppercase;
    }
    section.top-menu a:hover {
        color: rgba(255,255,255,1);
        text-decoration: underline;
    }
    section.top-menu a.active {
    	color: #06abb8;
    }
    section.top-menu span {
    	color: rgba(255,255,255,.3);
    }
    
    section.top-menu .breadcrumbs a {
    	margin: 0 5px;
    	text-transform: none;
    }
    section.top-menu .breadcrumbs a:hover {
    	text-decoration: underline;
    }
    
	.super-title {
		color: #45c5c0;
		font-size: 25pt;
	}
	
	
/**** FOOTER ****/
	.footer {
		background: #2a363b;
		color: #fff;
		font-size: 12px;
	}
	.footer a {
		color: #fff;
		border-bottom: 1px solid #2f294f;
		transition: border-color .2s linear;
	}
	.footer a:hover {
		border-color: #fff;
		text-decoration: none;
	}
	
	
/**** PROGRESSBAR ****/
	.progress {
		background-color: rgba(150, 75, 152, .3);
	}
	.progress .indeterminate,
	.progress .progress-bar.progress-bar-primary {
		background-color: rgba(150, 75, 152, 1)
	}
	
	
/**** SECTION STYLES ****/
    .topSection {
        background: #fff url('../img/bg-silver-gradient.png') repeat-y center top / 100% auto;
        padding: 0;
    }
	.topSection .container {
		background: url(../img/hyperkonkret.png) no-repeat center center / 80% auto;
		height: 120px;
	}
	.topSection .container.slim {
		background-size: auto 80%;
		height: 120px;
	}
	
	.ingressSection {
	   background-color: #fafafa;
	}
	.titleSection {
	   background-color: #20323a;
	}
	.titleSection h1 {
	   color: #4ec6ca;
	}
	.main-content {
		border-left: 1px dotted #aaa;
	}
	
	
/**** GENERAL STYLES ****/
	.bg-dark-gray { background:#223; color:#fff; }
	.bg-gray { background:#d1d3d4; }
	.bg-white { background-color: #fff !important; }
	.blocked { display: block; }
	.border-top { border-top: 1px dotted #777; }
	.clickable { cursor: pointer; cursor: hand; }
	.delimiter { border-top: 1px dotted #aaa; margin:20px 0; }
	.fa.fa-external-link { transform: scale(0.7); top:-3px; position:relative;}
	.hidden { display: none !important; }
	.hiddenSubmit { position: absolute; top: 0; left: -5000px; opacity: 0; }
	.text-bold { font-weight: bold; }
	.text-gray { color: #bcbec0; }
	.margin-bottom-10 { margin-bottom: 10px !important; }
	.margin-bottom-20 { margin-bottom: 20px !important; }
	.margin-bottom-30 { margin-bottom: 30px !important; }
	.margin-bottom-50 { margin-bottom: 50px !important; }
	.margin-right-10 { margin-right: 10px !important; }
	.margin-top-10 { margin-top: 10px !important; }
	.margin-top-20 { margin-top: 20px !important; }
	.margin-top-30 { margin-top: 30px !important; }
	.margin-top-50 { margin-top: 50px !important; }
	.no-margin { margin: 0 !important; }
	.no-padding { padding: 0 !important; }
	.padding-10 { padding: 10px !important; }
	.padding-top-12 { padding-top: 12px !important; }
	.padding-left-120 { padding-left: 120px !important; }
	.uppercased { text-transform: uppercase; }
	
	
/**** THEMES ****/
	.theme { color:#fff; }
	.theme a { color: rgba(255,255,255,1); }
	.theme a:hover { color: rgba(255,255,255,1); }
	
	.theme.brown { background-color:#5e2f24; }
	.theme.purple { background-color:#c0a1c8; color:#000;}
	.theme.purple a { color:#000; }
	.theme.purple a:hover { color:#000; }
	.theme.green { background-color:#3fa535; }
	.theme.orange { background-color:#ec6707; }
	.theme.gray { background-color:#656565; }
	.theme.blue { background-color:#2f5dd3; }
	.theme.pink { background-color:#fc04ad; }
	
	
/**** MEDIA QUERIES FOR SPECIFIC SCREENS ****/
	
	/* Smartphones, iPhone, portrait 480x320 phones */
	@media only screen and (min-width: 320px) {
	}
	
	/* Portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */
	@media only screen and (min-width: 481px) {
	}
	
	/* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ }
	@media only screen and (min-width: 641px) {
		.menu {
			display: block;
		}
		.main-content {
			border-left: 1px dotted #aaa;
		}
	}
	
	/* tablet, landscape iPad, lo-res laptops ands desktops */
	@media only screen and (min-width: 961px) {
		section {
			padding: 50px;
		}
		.topSection .container {
			background-size: auto auto;
			height: 300px;
		}
		.super-title {
			font-size: 60pt;
		}
		.chapter-title {
			font-size: 40pt;
		}	
	}
	
	/* big landscape tablets, laptops, and desktops */
	@media only screen and (min-width: 1025px) {
	}

	/* hi-res laptops and desktops */
	@media only screen and (min-width: 1281px) {
	}