@import url(https://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700);
@import url(https://fonts.googleapis.com/css?family=Roboto:400italic,700italic,700,400|Roboto+Condensed:400italic,700italic,400,700);

/*

	              ,,           ,,                   ,,
	  .g8"""bgd `7MM          *MM                 `7MM
	.dP'     `M   MM           MM                   MM
	dM'       `   MM  ,pW"Wq.  MM,dMMb.   ,6"Yb.    MM
	MM            MM 6W'   `Wb MM    `Mb 8)   MM    MM
	MM.    `7MMF' MM 8M     M8 MM     M8  ,pm9MM    MM
	`Mb.     MM   MM YA.   ,A9 MM.   ,M9 8M   MM    MM
	  `"bmmmdPY .JMML.`Ybmd9'  P^YbmdP'  `Moo9^Yo..JMML.


*/


body,html{
	/*height: 100%;*/
	background: url('../../images/login.jpg' ) no-repeat center center fixed;
	background-size: cover;
}

body,html,td,input,select,button,textarea{
	font-family: Roboto, Arial, "Lucida Grande", sans-serif;
	font-weight: 300;
	font-size  : 14px;
	margin     : 0;
	padding    : 0;
}

header{
	background: #666;
	padding   : 15px;
}

.hidden{ display: none !important; }
.clear{ clear: both !important; }

.header-content{
	margin-left: 40px;
	text-align: center;
}

.header-content .header-left{
	float      : left;
	margin-left: -40px;
	width      : 40px;
	height     : 40px;
}

.header-content span.header-title{
	line-height: 40px;
	color      : white;
	font-size  : 20px;
}

div.page-content{
	padding: 20px;
}

div.page-footer{
	margin: 0 auto 30px;
	max-width: 865px;
	font-size: 14px;
}

div.page-footer button{
	width      : 60px;
	height     : 60px;
	line-height: 30px;
	background : #fff;
	margin     : 0;
	padding    : 0;
	border     : none;
	cursor     : pointer;
	font-size: 25px;
	color: #aaa;
}

div.page-footer button:hover {
	background: #eee;
}

div.page-footer button.left{
	float: left;
}

div.page-footer button.right{
	float: right;
}

div.page-footer .progress{
	background : #fff;
	height     : 60px;
	line-height     : 60px;
	text-align : center;
	color      : #aaa;
}

.content-block{
	margin    : 30px 30px 0 30px;
	position  : relative;
	background: #fff;
	box-shadow: 0 1px 3px rgba(0,0,0,0.1);
	display   : block;
	padding   : 30px;
}

.content-block .invitecode{
	font-size     : 30px;
	padding       : 10px 15px;
	width         : 90%;
	margin        : 0 auto;
	text-align    : center;
	text-transform: uppercase;
}













table.question-outline{
	width: 100%;
}

table.question-outline tr.question-options td{
	padding: 10px 0 0 0;
}

/*


	____     ____  ____   __________
	`MM'     `MM' 6MMMMb\ MMMMMMMMMM
	 MM       MM 6M'    ` /   MM   \
	 MM       MM MM           MM
	 MM       MM YM.          MM
	 MM       MM  YMMMMb      MM
	 MM       MM      `Mb     MM
	 MM       MM       MM     MM
	 MM       MM       MM     MM
	 MM    /  MM L    ,M9     MM
	_MMMMMMM _MM_MYMMMM9     _MM_



*/

.results-list{
	background: #fff;
	margin: 0 20px;
}

.result-entry{
	border:solid 1px #aaa;
	border-radius:3px;
	margin-top: 20px;
}

.results-list .row{
	/*border-bottom: solid 1px #ccc;*/
}

.results-list .row-error{
	background: #ffeeee;
	border-color: #ccaaaa;
}

.results-list .row .page-label{
	float: left;
}

.results-list .row .page-result{
	float: right;
}

.results-list .page-label{
	font-weight: bold;
}

.results-list .page-result{
	width: 150px;
	text-align: right;
	/*font-weight: bold;*/
}

.results-list .page-label,
.results-list .page-result{

	padding: 12px 10px;
	/*font-size: 16px;*/
}

.results-list .question-label{
	padding: 5px 20px;
	color: #777;
}

.results-list .question-label:before{
	content: "→ ";
}

.results-list .page-result.error{
	color: red;
}

.results-list .page-result.success{
	color: green;
}

.results-list .page-result span{
	padding: 4px 14px;
	background: #ccc;
	color: white;
	border-radius: 12px;
	font-size: 12px;
	text-transform: uppercase;
}

.results-list .page-result span.error{
	background: #F96565;
}

.results-list .page-result span.success{
	background: #52E252;
}

.contentwrapper {
}

.contentwrapper.start {
	text-align: center;
}

.contentwrapper h1 {
	font-size: 24px;
	line-height: normal;
}

.contentwrapper h2 {
	font-size: 20px;
	line-height: normal;
}

.btn_save,
.contentwrapper a.btn_start {
	background: #83c0b5;
	color: #fff;
	text-decoration: none;
	padding: 20px 30px;
	display: inline-block;
	margin: 20px 0;
	font-size: 20px;
	border-bottom: 3px solid #7BAFA6;
	border-radius: 3px;
}

.btn_save:hover,
.contentwrapper a.btn_start:hover {
	background: #7BAFA6;
	border-bottom: 3px solid #73A098;
}

.btn_save:active,
.contentwrapper a.btn_start:active {
	margin-top: 23px;
	background: #7BAFA6;
	border: 0;

}

.contentwrapper .intro {
	font-size: 14px;
	line-height: 20px;
	color: #aaa;
	font-style: italic;
}

/*


	________    ____    ________    ___       ___
	`MMMMMMM   6MMMMb   `MMMMMMMb.  `MMb     dMM'
	 MM    \  8P    Y8   MM    `Mb   MMM.   ,PMM
	 MM      6M      Mb  MM     MM   M`Mb   d'MM
	 MM   ,  MM      MM  MM     MM   M YM. ,P MM
	 MMMMMM  MM      MM  MM    .M9   M `Mb d' MM
	 MM   `  MM      MM  MMMMMMM9'   M  YM.P  MM
	 MM      MM      MM  MM  \M\     M  `Mb'  MM
	 MM      YM      M9  MM   \M\    M   YP   MM
	 MM       8b    d8   MM    \M\   M   `'   MM
	_MM_       YMMMM9   _MM_    \M\__M_      _MM_



*/

.bgoverlay {
	background: #83c0b5;
	position: fixed;
	z-index: 5;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	opacity: 0.8;
}

.page-content .invalid{
	background: #ffeeee;
}

.page-content .field_invalid{
	display: none;
}

.page-content .invalid .field_invalid{
	display: block;
}

#cs {
}

#cs .wrapper {
	display: table;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	z-index: 15;
}

#cs .wrapper .content {
	display: table-cell;
	vertical-align: middle;
	width: 100%;
}
#cs .wrapper .content .inner {
	width: 620px;
	margin: -30px auto;
}

.block-title {
	width: 865px;
	margin:  0 auto;
	color: #fff;
	margin: 30px auto;
	font-family: Roboto Condensed, Arial, "Lucida Grande", sans-serif;
	font-size: 30px;
}

.results-list,
.surveyQuestionBlock,
#cs .wrapper .content .inner .front {
	background: #fff;
	float: left;
	padding: 30px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.1);
	/*border-radius: 10px;*/
	border-left: 5px solid #83c0b5;
	min-width: 552px;
}

.results-list,
.surveyQuestionBlock {
	float: none;
	display: block;
	max-width: 800px;
	margin: 0 auto;
	margin-bottom: 10px;
}

.results-list p {
	line-height: 20px;
}

table.question-outline tr.question-options td {
	padding-left: 10px;
}

table.question-outline tr.question-header {
	position: relative;
	float: left;
	width: 100%;
}

table.question-outline tr.question-header td,
#cs .wrapper .content h1,
#cs .wrapper .content h2 {
	text-align: center;
	font-size: 30px;
	text-shadow: 0 1px 3px rgba(0,0,0,0.1);
	line-height: 24px;
	font-weight: 300;
	margin-bottom: 30px;
	color: #fff;
}

#cs .wrapper .content h1 b {
	clear: both;
	display: block;
}

table.question-outline tr.question-header td {
	color: #aaa;
	font-size: 20px;
	text-align: left;
	box-shadow: none;
}

table.question-outline tr.question-header td .description {
	color: #000;
	font-size: 14px;
	line-height: 24px;
	margin-top: 10px;
	float: left;
	width: 100%;
}

table.question-outline tr.question-header .required {
	position: absolute;
	right: 0;
	top: 0;
}

#cs .wrapper .content .inner .front h2 {
	/*font-size: 30px;*/
	/*margin-bottom: 30px;*/
}

.question-options input[type="text"],
.question-options textarea,
#cs .wrapper .content form input[type="text"] {
	height: 50px;
	font-size: 14px;
	padding: 0 15px;
	border-radius: 5px;
	border: 1px solid #ddd;
	width: 520px;
	box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
	float: left;
	outline: none;
}

.question-options textarea {
	height: auto;
	padding: 15px;
}

#cs .wrapper .content form {
	position: relative;
}

#cs .wrapper .content form button {
	height: 52px;
	font-size: 16px;
	border-radius: 0 4px 4px 0;
	text-transform: uppercase;
	margin: 10px 1px 0 1px;
	border: 0;
	padding: 0 20px;
	color: #fff;
	background: #83c0b5;
	cursor: pointer;
	float: right;
	margin: 0;
	position: absolute;
	top: 0;
	right: 0;
	/*box-shadow: 0 1px 3px rgba(0,0,0,0.1);*/
}

#cs .wrapper .content form button:hover {
	background: #80ADA5;
}

header {
	font-family: Roboto Condensed, Arial, "Lucida Grande", sans-serif;
	background: none;
	border-bottom: 1px solid rgba(256,256,256,0.25);
	color: #fff;
	padding: 15px 20px;
	font-size: 22px;
	font-weight   : bold;
	text-transform: uppercase;
	position: relative;
	z-index: 999;
	transition: 0.5s;
}

header:hover {
	background: #222;
	border-bottom: 1px solid #222;
}

header a {
	color: #fff;
	text-decoration: none;
}

header .toplinks {
	float: right;
	margin-top: -15px;
	height: 52px;
}

header .toplinks a {
	color: #fff;
	text-decoration: none;
	font-family: Roboto, Arial, "Lucida Grande", sans-serif;
	font-weight: 300;
	font-size: 14px;
	line-height: 52px;
	margin-left: 20px;
}

header .toplinks a:hover {
	color: #83c0b5;
}

.ghostbtn{
	display        : block;
	margin         : 0;
	padding        : 12px;
	color          : white;
	font-size      : 20px;
	text-decoration: none;
	border         : solid 1px white;
	border-radius  : 6px;
	text-align     : center;
	margin-top     : 20px;
	font-weight: bold;
}

.center {
	width: 100%;
	text-align: center;
}

.headwrapper {
	width: 800px;
	clear: both;
	float: left;
}

.question-header .leftside {
	float: left;
	/*width: 65%;*/
	width: 45%;
}

.question-header .rightside {
	float: right;
	/*width: 30%;*/
	width: 50%;
}

table.question-outline tr.question-header .rightside td {
	font-size: 16px;
}

table.question-outline tr.question-header .rightside td input[type="radio"] {
	margin-top: -2px;
}

table.question-outline tr.question-header .rightside td label {
	margin-right: 10px;
	margin-left: 5px;
}

.field_invalid {
	text-shadow: none;
	background: #C94444;
	color: #fff;
	padding: 5px 10px 5px;
	border-radius: 2px;
	position: absolute;
	right: 0;
	bottom: 0;
	font-size: 14px;
}


.page-list{
	max-width: 865px;
	margin: 10px auto 0 auto;
}

.page-list .pagenum{
	float: left;
	height: 30px;
	line-height: 30px;
	padding: 0 10px;
	text-decoration: none;
	cursor: pointer;
	text-align: center;
	margin-right: 10px;
}


.page-list .pagenum {
	border: 1px solid rgba(255,255,255,0.5) !important;
	color: #fff;
}

.page-list .pagenum.active {
	color: #444;
	font-size: 14px;
	font-weight: normal;
	opacity: 1;
	background: #fff;
}

.question-grid{
	width:100% !important;
}

.question-grid .row-question{
	font-size: 14px !important;
}

.question-grid .row-question-field{
	text-align:center !important;
}

.question-grid .col-headers{
	width      :100px !important;
	font-size  : 14px !important;
	text-align :center !important;
	font-weight:bold !important;
}

/* For bootstrap datepicker */
.datepicker-dropdown{
    background: white;
    border: solid 1px #ccc;
    position: absolute;
}