html, body{
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
}

 .resp-box {
	min-height: 100vh;
}

.resp-box,
.resp-box-body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
}

.resp-box-content {
	flex: 1 1 auto;
    background-color: #f2f2f2;
}

.resp-box-sidebar-1 {
	order: -1;
    background-color: #f2f2f2;
	color: #000;
}

.resp-box-sidebar-2 {
    background-color: #ffffff;
}

.resp-box header {
    background-color: #222222;
    color: #ffffff;
}

.resp-box footer {
    background-color: #222222;
    color: #ffffff;
}

@media (min-width: 768px) {

	.resp-box-body {
		flex-direction: row;
	}

	.resp-box-sidebar-1 {
		flex: 0 0 0;
	}

	.resp-box-sidebar-2 {
		flex: 0 0 0;
	}
	
	.box {
		display: flex;
		justify-content: space-between;
	  }

	.fb-inner {
		width: 400px;
	}
	
}
/*******************************************************************************/

.form_box {
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: left;
	height: 100%;
  }

.form_box input[type=text], input[type=password] {
	width: 100%;
	padding: 12px 20px;
	margin: 8px 0;
	display: inline-block;
	border: 1px solid #ccc;
	border-radius: 4px;
	box-sizing: border-box;
}

.form_box input[type=submit] {
	width: 100%;
	background-color: #23974F;
	color: white;
	padding: 14px 20px;
	margin: 8px 0;
	border: none;
	border-radius: 4px;
	cursor: pointer;
}

.form_box input[type=submit]:hover {
	background-color: #45a049;
}

.green-alert{
	display: block; margin: 0 0 15px 0;
	color: green;
	border: 1px solid green;
	padding: 5px;
	background-color: #e9fadf;
}

span.green-alert svg {
	width: 20px;
	height: 20px;
	fill: green;
	vertical-align: bottom;
}

.red-alert{
	display: block; margin: 0 0 15px 0;
	color: black;
	border: 1px solid red;
	padding: 5px;
	background-color: #fadfdf;
}

span.red-alert svg {
	width: 20px;
	height: 20px;
	fill: red;
	vertical-align: bottom;
}

span.red-alert svg:hover {
	cursor: pointer;
	fill: black;
}

.fb-inner {
	width: 300px;
}