$fontWeight: 300;
$grey: #ccc;

/* Coderbits Profiler main stylesheet */

.main-wrapper {
	font-family: 'Roboto', sans-serif;
	font-weight: $fontWeight;
	font-size: 14px;
	width: 1080px;
}

.main-title {
	border-bottom: 1px solid $grey;
	margin: 20px 0 0 0;
	display: block;
	overflow: hidden;
	padding: 10px 0;
	font-size: 22px;
}

.logo {
	height: 40px;
	width: 107px;
	vertical-align: middle;
}

h2, h3 {
	font-weight: $fontWeight;
	color: #d34a00;
}

h2 {
	border-bottom: 1px solid $grey;
	padding-bottom: 10px;
	small {
    	font-size: 12px;
    	color: #000;
    	float: right;
    	padding-right: 5px;
    }
}

input[type='checkbox'] {
	vertical-align: middle;
	margin-bottom: 5px;
}

#profile_form, #update_profile_form {
	display: inline-block;
}

.submit_button {
	padding: 15px 0;
	text-align: center;
}

.sides {
	float: left;
	overflow: hidden;
	padding: 20px;
	min-height: 220px;
	min-width: 370px;
	width: 46%;
}

.smaller-side {
	float: left;
	overflow: hidden;
	padding: 0 20px;
	min-height: 220px;
	width: 41%;
	margin-bottom: 20px;
}

.zone {
	border: 1px dashed $grey;
	min-height: 415px;
}

.row {
	padding: 10px 0;
}

.fields_wrapper {
	overflow: hidden;
	position: relative;
}

@mixin transition($sec) {
  -webkit-transition: all $sec ease;
     -moz-transition: all $sec ease;
      -ms-transition: all $sec ease;
       -o-transition: all $sec ease;
          transition: all $sec ease;
}

.inactive-fields .field {
	background: #aaa;
	@include transition(0.5s);
}

.inactive-fields .field:hover, .inactive-fields .field:focus {
	background: $grey;
}

.active-fields .field {
	background: #2C9EE6;
	@include transition(0.5s);
}

.active-fields .field:hover, .active-fields .field:focus {
	background: #30AFFF;
}

.arrows {
	font-size: 40px;
	color: #ddd;
	width: 20px;
	position: absolute;
	top: 32%;
	left: 47.3%;
	word-break: break-word;
	line-height: 30px;
}

.field {
	text-align: center;
	display: block;
	padding: 10px;
	margin: 5px;
	cursor: move;
	color: #fff;
}

.alert {
    font-style: italic;
    font-size: 13px;
    color: #E01B1B;
    display: block;
    margin-top: 5px;
    text-align: center;
}

.update {
    @extend .alert;
    color: #14B81F;
}