/* Nice Scroll */
.nicescroll-rails.nicescroll-rails-vr {
	border-radius: 10px;
	border: 1px solid #eaebed;
	right: 2px !important;
	left: auto !important;
}

.nicescroll-rails.nicescroll-rails-vr .nicescroll-cursors {
	background-color: #585F64 !important;
	border: 1px solid #585F64 !important;
}

.nicescroll-rails.nicescroll-rails-vr .nicescroll-cursors:hover {
	background-color: #80888F !important;
	border: 1px solid #eaebed !important;
}
/* End Nice Scroll */

body {
	background: #596771;
}

.hidden {
	display: none;
}

p {
	color: #fff;
}

a {
	font-style: normal;
	font-weight: bold;
	font-size: 16px;
	line-height: 22px;
	letter-spacing: -0.336px;
	color: #00aee5;
	text-decoration: none;
}

label {
	transition-property: all;
	transition-duration: 200ms;
	transition-timing-function: ease;
	transition-delay: 0s;
	position: absolute;
	white-space: nowrap;
	max-width: 100%;
	text-overflow: ellipsis;
	overflow: hidden;
	top: 12px;
	left: 16px;
	font-style: normal;
	font-weight: 400;
	font-size: 14px;
	line-height: 19px;
	display: flex;
	align-items: center;
	letter-spacing: -0.336px;
	color: #B0B6BA;
}

label span {
	font-style: normal;
	font-weight: 400;
	font-size: 14px;
	line-height: 14px;
	display: flex;
	align-items: center;
	letter-spacing: -0.336px;
	color: #fff;
}

label a {
	font-weight: bold;
	font-size: 16px;
	line-height: 22px;
	letter-spacing: -0.336px;
	margin-left: 6px;
	text-decoration: underline;
}

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

.btn {
	width: 100%;
	height: 42px;
	background-color: #00aee5;
	border: 0;
	border-radius: 6px;
	display: flex;
	justify-content: center;
	align-items: center;
	outline: none;
	box-sizing: border-box;
	box-shadow: none;
	margin: 0 auto;
	cursor: pointer;
}

.btn span {
	font-weight: bold;
	font-size: 18px;
	line-height: 25px;
	display: flex;
	align-items: center;
	text-align: center;
	letter-spacing: -0.336px;
	color: #FFFFFF;
}

.btn:disabled {
	background-color: #989FA5;
	border: 0;
	cursor: not-allowed;
}

select{
	background-image: url(../images/dropdown.png);
	background-repeat: no-repeat;
	background-size: 17px 9px;
	background-position-x: calc(100% - 17px);
	background-position-y: 50%;
	-moz-appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	padding-right: 40px !important;
}

.flex {
	display: flex;
	flex-wrap: wrap;
}

.box {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	border: 1px solid #fff;
	border-radius: 20px;
	width: 100%;
	box-sizing: border-box;
}

#container {
	max-width: 658px;
	padding: 0;
	margin: 58px auto 0;
	box-sizing: border-box;
}

/* Header starts from here */
#container #header {
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

#container #header .logo {
	width: 210px;
	margin-bottom: 45px;
}

/* Content starts from here */
#container #content {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	max-width: 510px;
	box-sizing: border-box;
	margin: 0 auto 26px;
}

#container #content.message-page {
	font-size: 20px;
}

#container #content .box.main {
	padding: 37px 57px 48px 57px;
	margin-bottom: 26px;
}

#container #content.message-page .box.main {
	padding: 37px 55px;
}

#container #content.lockscreen .user-info {
	display: flex;
	box-sizing: border-box;
}

#container #content.lockscreen .user-info .avatar {
	width: 70px;
	height: 70px;
}

#container #content.lockscreen .user-info .avatar img {
	width: 100%;
	min-width: 70px;
	height: 100%;
	border: 1px solid #fff;
	border-radius: 10px;
	box-sizing: border-box;
}

#container #content.lockscreen .user-info .mock-avatar {
	width: 70px;
	height: 70px;
	border: 1px solid #fff;
	border-radius: 10px;
}

#container #content.lockscreen .user-info .mock-avatar img {
	width: 40px;
	height: 40px;
	border: none;
	border-radius: 0;
	margin: 15px 15px;
}

#container #content.lockscreen .user-info .info {
	color: #fff;
	padding-top: 5px;
	padding-left: 20px;
	word-break: break-word;
}

#container #content.lockscreen .user-info .info .name {
	display: block;
	font-style: normal;
	font-weight: 400;
	font-size: 24px;
	line-height: 33px;
	letter-spacing: -0.336px;
	margin-bottom: 5px;
}

#container #content.lockscreen .title {
	margin: 30px 0 10px;
}

#container #content .title {
	font-style: normal;
	font-weight: 400;
	font-size: 24px;
	line-height: 33px;
	text-align: center;
	letter-spacing: -0.5px;
	text-transform: capitalize;
	color: #FFFFFF;
	width: 100%;
	display: block;
	margin-bottom: 30px;
}

#content .field-set {
	width: 100%;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

#content .field-set label {
	left: 46px;
}

#content .field-set .input-group {
	width: 100%;
	position: relative;
	margin-bottom: 31px;
}

#content .field-set .input-group input ~ label {
	transition-delay: 100ms;
	top: 14px;
	left: 46px;
	color: #B0B6BA;
}

#content .field-set .input-group input ~ label span {
	color: #B0B6BA;
}

#content .field-set .input-group input:focus ~ label, 
#content .field-set .input-group input:not(:placeholder-shown) ~ label {
	transition-delay: 0s !important;
	top: -15px;
	left: 1px;
	opacity: 1;
}

#content .field-set .input-group input:focus ~ label span, 
#content .input-group input:not(:placeholder-shown) ~ label span {
	color: #fff;
}

#content .field-set .input-group select {
	position: relative;
	z-index: 1;
}

#content .field-set .input-group select + label {
	opacity: 1;
	z-index: 2;
}

#content .field-set .input-group .error-msg {
	font-style: normal;
	font-weight: 400;
	font-size: 12px;
	line-height: 14px;
	text-align: right;
	letter-spacing: -0.336px;
	color: #FF5C35;
	position: absolute;
	right: 0;
}

#content .field-set input,
#content .field-set select {
	box-sizing: border-box;
	border: 0;
	box-shadow: none;
	height: 42px;
	width: 100%;
	background-color: #fff;
	border-radius: 5px;
	padding: 0 17px;
	outline: none;
	font-style: normal;
	font-weight: 400;
	font-size: 14px;
	line-height: 19px;
	display: flex;
	align-items: center;
	letter-spacing: -0.336px;
	color: #596771;
	-moz-appearance: none;
	-webkit-appearance: none;
}

#content .field-set select option {
	font-style: normal;
	font-weight: 400;
	font-size: 18px;
	line-height: 25px;
	display: flex;
	align-items: center;
	letter-spacing: -0.336px;
	color: #80888F;
}

#content .field-set input::placeholder {
	font-style: normal;
	font-weight: 400;
	font-size: 18px;
	line-height: 25px;
	display: flex;
	align-items: center;
	letter-spacing: -0.336px;
	color: #80888F;
}

#content .field-set label {
	left: 1px;
}

#content .field-set .account {
	background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="%238ad1e9" d="M224 256A128 128 0 1 0 224 0a128 128 0 1 0 0 256zm-45.7 48C79.8 304 0 383.8 0 482.3C0 498.7 13.3 512 29.7 512l388.6 0c16.4 0 29.7-13.3 29.7-29.7C448 383.8 368.2 304 269.7 304l-91.4 0z"/></svg>');
	background-repeat: no-repeat;
	background-size: 22px 21px;
	background-position-x: 10px;
	background-position-y: 50%;
	padding-left: 45px;
}

#content .field-set [type="email"] {
	background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="%238ad1e9" d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48L48 64zM0 176L0 384c0 35.3 28.7 64 64 64l384 0c35.3 0 64-28.7 64-64l0-208L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z"/></svg>');
	background-repeat: no-repeat;
	background-size: 24px 19px;
	background-position-x: 10px;
	background-position-y: 50%;
	padding-left: 45px;
}

#content .field-set [type="password"], 
#content .field-set .password {
	background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="%238ad1e9" d="M144 144l0 48 160 0 0-48c0-44.2-35.8-80-80-80s-80 35.8-80 80zM80 192l0-48C80 64.5 144.5 0 224 0s144 64.5 144 144l0 48 16 0c35.3 0 64 28.7 64 64l0 192c0 35.3-28.7 64-64 64L64 512c-35.3 0-64-28.7-64-64L0 256c0-35.3 28.7-64 64-64l16 0z"/></svg>');
	background-repeat: no-repeat;
	background-size: 20px 19px;
	background-position-x: 10px;
	background-position-y: 50%;
	padding-left: 45px;
}

#content .field-set .toggle-password {
	width: 22px;
	height: 22px;
	position: absolute;
	top: 11px;
	right: 10px;
	background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path fill="%23596771" d="M25.9 3.4C19-2 8.9-.8 3.4 6.1S-.8 23.1 6.1 28.6l608 480c6.9 5.5 17 4.3 22.5-2.6s4.3-17-2.6-22.5L25.9 3.4zM605.5 268.3c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C465.5 68.8 400.8 32 320 32c-51.2 0-96 14.8-133.9 36.8l27.3 21.5C244.6 74.2 280.2 64 320 64c70.4 0 127.7 32 170.8 72c43.1 40 71.9 88 85.2 120c-9.2 22.1-25.9 52-49.5 81.5l25.1 19.8c25.6-32 43.7-64.4 53.9-89zM88.4 154.7c-25.6 32-43.7 64.4-53.9 89c-3.3 7.9-3.3 16.7 0 24.6c14.9 35.7 46.2 87.7 93 131.1C174.5 443.2 239.2 480 320 480c51.2 0 96-14.8 133.9-36.8l-27.3-21.5C395.4 437.8 359.8 448 320 448c-70.4 0-127.7-32-170.8-72C106.1 336 77.3 288 64 256c9.2-22.1 25.9-52 49.5-81.5L88.4 154.7zM320 384c16.7 0 32.7-3.2 47.4-9.1l-30.9-24.4c-5.4 .9-10.9 1.4-16.5 1.4c-51 0-92.8-39.8-95.8-90.1l-30.9-24.4c-.9 6-1.3 12.2-1.3 18.5c0 70.7 57.3 128 128 128zM448 256c0-70.7-57.3-128-128-128c-16.7 0-32.7 3.2-47.4 9.1l30.9 24.4c5.4-.9 10.9-1.4 16.5-1.4c51 0 92.8 39.8 95.8 90.1l30.9 24.4c.9-6 1.3-12.2 1.3-18.5z"/></svg>');
	background-repeat: no-repeat;
	background-size: 21px;
	cursor: pointer;
}

#content .field-set .toggle-password.show {
	background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="%23596771" d="M117.2 136C160.3 96 217.6 64 288 64s127.7 32 170.8 72c43.1 40 71.9 88 85.2 120c-13.3 32-42.1 80-85.2 120c-43.1 40-100.4 72-170.8 72s-127.7-32-170.8-72C74.1 336 45.3 288 32 256c13.3-32 42.1-80 85.2-120zM288 32c-80.8 0-145.5 36.8-192.6 80.6C48.6 156 17.3 208 2.5 243.7c-3.3 7.9-3.3 16.7 0 24.6C17.3 304 48.6 356 95.4 399.4C142.5 443.2 207.2 480 288 480s145.5-36.8 192.6-80.6c46.8-43.5 78.1-95.4 93-131.1c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C433.5 68.8 368.8 32 288 32zM192 256a96 96 0 1 1 192 0 96 96 0 1 1 -192 0zm224 0a128 128 0 1 0 -256 0 128 128 0 1 0 256 0z"/></svg>');
	background-size: 19px;
	right: 9px;
}

#content .remember {
	width: 100% !important;
	display: flex;
	justify-content: space-between;
	margin-top: 0px;
	margin-left: 14px;
}

#content .remember label {
	cursor: pointer;
	position: relative;
	box-sizing: border-box;
	font-style: normal;
	font-weight: normal;
	line-height: 21.79px;
	display: flex;
	align-items: center;
	letter-spacing: -0.336px;
	color: #FFFFFF;
	justify-content: center;
	width: max-content;
	top: -14px;
}

#content .remember span {
	margin-left: 11px;
	font-size: 16px;
}

#content .remember label:before {
	content: "";
	border: 1px solid #fff;
	background-color: #fff;
	border-radius: 3px;
	width: 15px;
	height: 15px;
	display: block;
	box-sizing: border-box;
	background-color: #fff;
}

#content .remember #cbx-remember {
	position: absolute;
	opacity: 0;
	visibility: hidden;
	width: 0px;
	height: 0px;
}

#content .remember #cbx-remember:checked + label:before {
	background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="%238ad1e9" d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"/></svg>') !important;
	background-repeat: no-repeat;
	background-size: 13px;
	background-position: 0;
}

#content .remember a {
	font-weight: 600;
	font-size: 16px;
	line-height: 19px;
	display: flex;
	align-items: center;
	text-align: right;
	letter-spacing: -0.336px;
	text-decoration: none;
}

#content .button {
	width: 100%;
}

#content.lockscreen .button #btn-submit {
	margin-top: 25px;
}

#content .text-bottom {
	width: 100%;
	margin-top: 24px;
	text-align: center;
}

#content .text-bottom span {
	font-style: normal;
	font-weight: 400;
	font-size: 16px;
	line-height: 22px;
	letter-spacing: -0.336px;
	color: #FFFFFF;
	text-align: center;
}

#content .text-bottom a {
	font-weight: bold;
	margin-left: 4px;
	text-decoration: underline;
}

#content .forgot-link {
	font-weight: 600;
	font-size: 14px;
	line-height: 19px;
	float: right;
	text-align: right;
	letter-spacing: -0.336px;
	text-decoration: none;
	margin-bottom: 29px;
}

#content .back-to-link {
	font-style: normal;
	font-weight: bold;
	font-size: 16px;
	line-height: 22px;
	text-align: center;
	letter-spacing: -0.336px;
	display: block;
	margin-bottom: 30px;
}

#content #blog-post {
	padding: 17px 22px 17px;
	margin-bottom: 26px;
	box-sizing: border-box;
	border: 1px solid #fff;
	border-radius: 20px;
	position: relative;
}

#content #blog-post::before {
	content: "";
	position: absolute;
	top: 0;
	height: 100%;
	display: block;
	width: 1px;
	background: #fff;
	left: 147px;
}

#content #blog-post .flex img {
	width: 86px;
	margin: 13px 0 0 12px;
	height: 74px;
}

#content #blog-post .flex div {
	width: calc(100% - 100px);
	box-sizing: border-box;
	padding-left: 43px;
}

#content #blog-post .title {
	font-weight: 300;
	margin-bottom: 7px;
	text-align: left;
}

#content #blog-post .title ~ span {
	font-style: normal;
	font-weight: normal;
	font-size: 16px;
	line-height: 22px;
	letter-spacing: -0.336px;
	color: #FFFFFF;
}

/* Footer starts from here */
#container #footer {
	font-weight: 400;
	font-size: 14px;
	line-height: 19px;
	text-align: center;
	letter-spacing: -0.336px;
	color: #FFFFFF;
	margin-top: 272px;
	margin-bottom: 30px;
}

/* Responsive */
@media (max-width: 767px) {
	#container #content .box.main,
	#content #blog-post {
		padding: 20px !important;
	}

	#content #blog-post .flex img {
		margin-left: 0;
	}

	#container #content .title {
		font-size: 20px;
	}

	#content #blog-post::before {
		left: 130px;
	}
}