/* BASIC STYLINGS
============================================================================= */
/*body                            { padding-top:20px; }*/
pre                             { margin-bottom:20px; }

/* form styling */
/*
#form-container                { margin-bottom:20px; margin-left:20px; border-radius:5px; border:1px solid red; width:60%; overflow:visible; }*/
#form-container .page-header   { margin:0; padding:30px; border-top-left-radius:5px; border-top-right-radius:5px; }

/* numbered buttons */
#status-buttons                 {  }
#status-buttons a               { color:#000; display:inline-block; font-size:12px; margin-right:10px; text-align:center; text-decoration:none; text-transform:uppercase; }
#status-buttons a:hover         { text-decoration:none; }
#status-buttons span            { background:#e6e6e6; display:block; height:30px; margin:0 auto 10px; padding-top:5px; width:30px; 
    border-radius:50%; }

/* active buttons */
#status-buttons a.active span   { background:#c8102e; color:#ffffff; }

button .btn {
	padding: 10px;
	background-color:#e6e6e6;
}

/* text input */
.form-control {
	width:100% !important;	
}

/* radio and checkbox input */
.radio, .checkbox {
	display: block;
	min-height: 21px;
	margin-top: 10px;
	margin-bottom: 10px;
	padding-left: 20px;
}
.radio label, .checkbox label {
	display: inline;
	font-weight: normal;
	cursor: pointer;
}
input[type="checkbox"], input[type="radio"] {
    box-sizing: border-box;
    padding: 0;
    margin: 4px 0 0;
    margin-top: 1px;
    line-height: normal;
}
.radio input[type="radio"], .radio-inline input[type="radio"], .checkbox input[type="checkbox"], .checkbox-inline input[type="checkbox"] {
    float: left;
    margin-left: -20px;
}

/* select input */
select {
	width: 75% !important;
	height: 44px;
	padding: 5px !important;
	margin-bottom: 10px;	
}

/* search output */
#searchDisplay {
	width: 100%;
	margin-top:30px;
	margin-right:0px;
	margin-bottom:30px;
	margin-left:0px;
	padding:0;
}
#searchDisplay tr {
	padding: 5px;
}
#searchDisplay th, table td {
	padding: 10px;
	text-align: left;
}

@media screen and (max-device-width: 600px) {
	#searchDisplay thead {
		display: none;
	}
	#searchDisplay tr {
		margin-bottom: 10px;
		display: block;
	}
	#searchDisplay td {
		display: block;
		text-align: left;
		font-size: 13px;
	}
	#searchDisplay td:before {
		content: attr(data-label);
		float: left;
		clear:both;
		text-transform: uppercase;
		font-weight: bold;
	}
}

/* ANIMATION STYLINGS
============================================================================= */
#search-form            { position:relative; min-height:200px; overflow:hidden; padding:30px; }

/* basic styling for entering and leaving */
/* left and right added to ensure full width */
#form-views.ng-enter,
#form-views.ng-leave      { position:absolute; left:30px; right:30px;
    transition:0.5s all ease; -moz-transition:0.5s all ease; -webkit-transition:0.5s all ease; 
}
    
/* enter animation */
#form-views.ng-enter            { 
    -webkit-animation:slideInRight 0.5s both ease;
	-moz-animation:slideInRight 0.5s both ease;
	animation:slideInRight 0.5s both ease; 
}

/* leave animation */
#form-views.ng-leave            { 
    -webkit-animation:slideOutLeft 0.5s both ease;
	-moz-animation:slideOutLeft 0.5s both ease;
	animation:slideOutLeft 0.5s both ease;   
}

/* ANIMATIONS
============================================================================= */
/* slide out to the left */
@keyframes slideOutLeft {
	to 		{ transform: translateX(-200%); }
}
@-moz-keyframes slideOutLeft {	
	to 		{ -moz-transform: translateX(-200%); }
}
@-webkit-keyframes slideOutLeft {
	to 		{ -webkit-transform: translateX(-200%); }
}

/* slide in from the right */
@keyframes slideInRight {
	from 	{ transform:translateX(200%); }
	to 		{ transform: translateX(0); }
}
@-moz-keyframes slideInRight {
	from 	{ -moz-transform:translateX(200%); }
	to 		{ -moz-transform: translateX(0); }
}
@-webkit-keyframes slideInRight {
	from 	{ -webkit-transform:translateX(200%); }
	to 		{ -webkit-transform: translateX(0); }
}