@charset "UTF-8";

/*--------------------------------------------------------------
	0. Global
--------------------------------------------------------------*/
* {box-sizing: border-box; font-family: 'Montserrat', sans-serif;}
html, body{margin: 0; padding: 0; color: #333;}
html{
  height: 100%;
}
body {
  min-height: 100%;
    background-color: #FCFCFC;
	background-image: url('../images/background.svg');
	background-repeat: no-repeat;
	background-size: 115%;
	background-position: center 250px;
   /* background-color: -moz-linear-gradient(45deg, #0090d6 0%, #72bf44 100%);
    background-color: -webkit-linear-gradient(45deg, #0090d6 0%,#72bf44 100%);
    background-color: linear-gradient(45deg, #0090d6 0%,#72bf44 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0090d6', endColorstr='#72bf44',GradientType=1 );
	background-attachment: fixed;
	background-repeat: no-repeat;*/
}

h1, .h1-like{font-family: 'Montserrat', sans-serif; text-align: center; text-transform: uppercase; font-size: 2.4rem; font-weight: 700; color: #707070;}
h2, .h2-like{text-transform: uppercase; text-align: center; font-size: 2rem; font-weight: 400; color: #707070; margin-top: 2rem;}

@media(min-width: 782px){
	h1, .h1-like{font-size: 3rem;}
}

form fieldset{padding: 0;}
[type="color"],
[type="date"],
[type="datetime-local"],
[type="email"],
[type="month"],
[type="number"],
[type="password"],
[type="search"],
[type="tel"],
[type="text"],
[type="time"],
[type="url"],
[type="week"],
select,
textarea {
	display: inline-block;
	width: 100%;
    padding: 5px 10px;
    font-size: 1.4rem;
    line-height: 1.5;
    background-color: #fff;
    border: 1px solid #d4d4d4;
    border-radius: 0px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}


.tag{display: inline-block;
    padding: 3px 0.5rem;
    vertical-align: baseline;
    white-space: nowrap;
    color: #212529;
    border-radius: 0;
    background-color: #e7e9ed;
    line-height: 1;}

.btn, .btn--danger, .btn--ghost, .btn--info, .btn--inverse, .btn--primary, .btn--success, .btn--warning, .button, .button--danger, .button--ghost, .button--info, .button--inverse, .button--primary, .button--success, .button--warning, [type=button], button{
	white-space: normal;
	padding: 1.5rem;
	font-weight: 500;
}

.btn--success, .button--success{background-color: #92D050;}
.btn--primary, .button--primary{background: linear-gradient(36deg,#65BE67 20%,#51C7E1 80%); border-radius: 5px; color: #fff;}


.content-area{
	width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
	display: block;
	position: relative;
}

@media (min-width: 600px) {
  .content-area {
    max-width: 540px;
  }
}
@media (min-width: 782px) {
  .content-area {
    max-width: 768px;
  }
}
@media (min-width: 992px) {
  .content-area {
    max-width: 960px;
  }
}
@media (min-width: 1280px) {
	.content-area {
		max-width: 1140px;
	}
}
@media (min-width: 1440px){
	.content-area {
		max-width: 1280px;
	}
}


/**
*	Header
**/
header{padding: 20px 0; margin-bottom: 50px;}
header #navbar {
    display: flex;
    width: 100%;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
}
header #navbar .navbar-brand {
    height: 75px;
    display: flex;
    align-items: center;
    -webkit-transition: height 0.3s;
    -moz-transition: height 0.3s;
    transition: height 0.3s;
}
header #navbar .navbar-nav {
    height: 100%;
    flex-basis: 100%;
    flex-grow: 1;
    text-align: right;
}
header #navbar .nav-toggle {
    display: block;
    margin-left: 20px;
    background: linear-gradient(36deg,#65BE67 20%,#51C7E1 80%);
    float: right;
    color: #fff;
    font-size: 24px;
    padding: .6em;
    cursor: pointer;
    width: 60px;
	border-radius: 5px;
}
header #navbar .nav-toggle>span {
    display: block;
    height: 2px;
    margin-bottom: 5px;
    background: #fff;
    width: 100%;
}
@media (min-width: 782px){
	header #navbar .nav-toggle {
		display: none;
	}
}
header #navbar nav {
    font-weight: 500;
    text-transform: uppercase;
    display: none;
    position: absolute;
    background: #eee;
    top: 70px;
    right: 15px;
    min-width: 65%;
    width: auto;
    padding: 5px 25px;
    z-index: 9999;
}
@media (min-width: 782px){
	header #navbar nav {
		display: inline-block;
		width: auto;
		background: transparent;
		position: inherit;
		padding: 0;
	}
}
header #navbar nav ul {
    list-style: none;
    padding-left: 0;
}
header #navbar nav ul>li {
    position: relative;
    display: block;
    padding: 12px 0;
    border-bottom: 1px solid #ddd;
}
@media (min-width: 782px){
	header #navbar nav ul>li {
		display: inline-block;
		padding: 0 10px;
		border: 0;
	}
}
header #navbar nav a {
    color: #393838;
    border-bottom: 2px solid transparent;
	text-decoration: none;
    font-size: 1.6rem;
}
@media (min-width: 782px){
	header #navbar nav a {
		color: #707070;
	}
}
header #navbar nav a.btn {color: #fff;}


/*--------------------------------------------------------------
	1. Form
--------------------------------------------------------------*/
.form-container{
	background: #fff; 
	width: 100%;
	border:0;
    box-shadow: 0px 0px 10px 5px rgba(0,0,0,.04);
	margin: 35px auto;
	padding: 25px;
}
@media (min-width: 1280px) {
	.form-container{
		width: 80%;
	}
}

form fieldset p{margin-bottom: 25px;}
label{color: #000000; font-size: 1.4rem; margin-bottom: 15px;}

/*form #generate-response{position: absolute; width: 100%; bottom: 0; margin-bottom: 1rem;}*/

#other-response{background: none; color: #5CC29C;}

#status { display: none; padding: 5px; color: #fff; background: #ccc;}
/*#status.fail {background: #c00;}
#status.success {background: #0c0;}
#status.offline {background: #c00;}
#status.online {background: #0c0;}*/

#response{margin-top: 50px;}
#response #response-message{border-radius: 5px; font-weight: 500; display: block; width: 100%; padding: 10px; background: linear-gradient(36deg,#65BE67 20%,#51C7E1 80%); color: #fff; margin: 10px 0;}
/*#response #response-message.positive{background: #92D050; color: #fff;}
#response #response-message.negative{background: #D9534F; color: #fff;}
#response #response-message.neutral{background: #e7e9ed;}*/

#response #input-message.positive .tag{background: #d7ffd7; color: #92D050;}
#response #input-message.negative .tag{background: #ffcecc²; color: #D9534F;}


#response #response-details{margin-top: 25px;}
#response #response-details li,
#response #response-rows li{display: flex; flex-wrap: nowrap;  align-items: center; justify-content: center; width: 100%; margin: 5px 0; padding-bottom: 35px;}
#response #response-details li > .feedback-result,
#response #response-rows li > .feedback-result{flex-basis: 80%; flex-grow: 1; margin-right: 25px;}
#response #response-details li > .response_feedback,
#response #response-rows li > .response_feedback{flex-basis: 20%; flex-grow: 1; white-space: nowrap;}

#response #response-details .progress-bar{display: inline-block; width: 100%; background: #F3F3F3; height: 20px; position: relative;}
#response #response-details .progress-bar > *{position: absolute; top: 0; left: 0; height: 100%}
#response #response-details .progress-bar > .progress-1{background: #FF0000; width: 20%;}
#response #response-details .progress-bar > .progress-2{background: #FF0000; width: 40%;}
#response #response-details .progress-bar > .progress-3{background: #FBBC04; width: 60%;}
#response #response-details .progress-bar > .progress-4{background: #92D050; width: 80%;}
#response #response-details .progress-bar > .progress-5{background: #92D050; width: 100%;}
#response #response-details .progress-bar + span{display: inline-block; text-align: right; white-space: nowrap;}


.set_feedback{cursor: pointer; display: inline-block; font-size: 2.4rem; color: #B9B9B9}
.set_feedback.activ.icon-thumbs-up{background: -webkit-linear-gradient(#51C7E1, #65BE67);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;}
.set_feedback.activ.icon-thumbs-down{color: red;}
@media(min-width: 782px){
	.set_feedback{font-size: 3.6rem;}
}

.simple-dialog-content{width: 350px;}
.simple-dialog-button.accept{color: #fff !important;}
@media(min-width: 782px){
	.simple-dialog-content{width: 450px;}
}