body{
	width: 100%;
	height: 100%;
	margin: 0;
    font-size: 15px;
    font-family: Montserrat, sans-serif;
    color: #333;
    margin: 0;
	padding-top: 20px;
    background-color: #DEDEDE;
}
::-webkit-input-placeholder{
	color: #8cb6e4;
}
:-moz-placeholder{
	color: #8cb6e4;
	opacity: 1;
}
::-moz-placeholder{
	color: #8cb6e4;
	opacity: 1;
}
:-ms-input-placeholder{
	color: #8cb6e4;
}
::-ms-input-placeholder{
	color: #8cb6e4;
}
::placeholder{
	color: #8cb6e4;
}
input, textarea, select{
	font-family: Montserrat, sans-serif;
}
div.clear{
	clear: both;
}
span.small {
    font-size: 11px;
}
blockquote{
	margin: 0px 0px 0px 0.8ex;
	border-left: 1px solid rgb(204, 204, 204);
	padding-left: 1ex;
}
a{
	color: #006bc7;
}
a.logo {
	display: table;
    width: 100px;
    height: 70px;
    margin: 0 auto;
    background-image: url(logo.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}
div.loading{
	display: table;
	background-image: url(loading_habbos.gif);
	width: 102px;
	height: 67px;
	margin: 15px auto;
}
div.sectionname{
	text-align: center;
    font-size: 20px;
    color: #0fbef7;
    margin: 5px 0 20px 0;
    font-weight: 900;
    letter-spacing: 6px;
}
div.containerbox {
	display: flex;
	align-items: flex-start;
	margin: 0 auto;
	width: 95%;
	max-width: 1200px;
	padding-bottom: 50px;
}
div.container {
	display: table;
	width: 90%;
	max-width: 700px;
	background-color: #FFF;
    border-radius: 3px;
    padding: 10px 15px;
    box-shadow: 0 5px 10px rgba(0,0,0,0.2);
	margin: 0 auto;
}
div.container.noemails{
	text-align: center;
	font-size: 14px;
}
div.container.noemails b{
	color: #006bc7;
	font-size: 16px;
}
div.container.userinfo{
	width: initial;
	text-align: center;
	margin-bottom: 20px;
}
div.container.userinfo div.lastcheck{
	font-size: 12px;
	margin-top: 3px;
}
div.container.userinfo div.lastcheck div[data-action='checknewemails']{
	display: inline-block;
	width: 21px;
	height: 17px;
	background-image: url(reload.png);
	vertical-align: bottom;
	cursor: pointer;
}
div.container.userinfo div.lastcheck div[data-action='checknewemails']:hover{
	background-position: 0 -17px;
}
div.container.userinfo div.lastcheck div[data-action='checknewemails']:active{
	background-position: 0 -34px;
}
i.mdi.mdi-menu{
	display: none;
}
div.container.menu{
	position: relative;
	float: left;
	width: 300px;
	font-size: 14px;
}
div.container.menu[data-loading='true']:before{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: '';
    background-color: rgba(0, 0, 0, 0.6);
    border-radius: 3px;
    background-image: url(loading_habbos.gif);
    background-position: center;
    background-repeat: no-repeat;
}
div.container.menu div.noemails{
	padding: 10px 0;
	color: #006bc7;
	text-align: center;
}
div.container.menu div.button[data-action='compose']{
	margin-bottom: 10px;
	padding: 5px 24px 5px 8px;
	position: sticky;
	top: 3px;
	z-index: 100;
	box-shadow: 0 0 0 3px #FFF;
}
div.container.menu div.button[data-action='compose'] i{
	float: left;
}
div.container.menu div.content{
	text-align: left;
	padding-bottom: 10px;
}
div.container.menu div.content div.folder{
	border: 2px solid #4195de;
	color: #4195de;
	border-radius: 5px;
	margin: 2px 0;
	padding: 2px 5px;
}
div.container.menu div.content div.folder i{
	float: left;
	margin-right: 4px;
	font-size: 18px;
	line-height: 1;
}
div.container.menu div.content div.folder i[data-action]{
	float: right;
	margin-right: 0;
	margin-left: 4px;
	cursor: pointer;
	transition: opacity 0.1s linear;
}
div.container.menu div.content div.folder i[data-action]:hover{
	opacity: 0.7;
}
div.container.menu div.content div.folder[data-id='trash']{
	border-color: #d32f2f;
	color: #d32f2f;
}
div.container.menu div.content div.folder[data-active='false']{
	color: #FFF;
    background-color: #4195de;
	cursor: pointer;
}
div.container.menu div.content div.folder[data-id='trash'][data-active='false']{
	background-color: #d32f2f;
}
div.container.menu div.content div.addfolder, div.container.menu div.moveupdown{
	text-align: right;
	color: #4195de;
	margin-top: 5px;
	font-size: 14px;
}
div.container.menu div.content div.addfolder div, div.container.menu div.moveupdown div{
	display: inline-block;
	cursor: pointer;
}
div.container.menu div.content div.addfolder i, div.container.menu div.moveupdown i{
	float: right;
	margin-left: 5px;
    font-size: 18px;
    line-height: 1;
}
div.container.menu hr{
    border: dashed #4295de;
    border-width: 1px 0 0 0;
    margin-top: 0;
}
div.container.menu div.openclose{
	display: none;
}
div.container.mailview{
    display: inline-block;
    width: calc(100% - 320px);
	max-width: initial;
    margin: 0 0 0 20px;
}
div.container.login{
	width: 300px;
}
div.container div.title{
    color: #FFF;
    font-weight: bold;
    background-color: var(--color);
    padding: 5px 5px 5px 15px;
    font-size: 12px;
    margin: 0 -15px;
	text-align: center;
	--color: #006bc7;
}
div.container.menu div.title{
	text-align: left;
	word-break: break-word;
}
div.container.menu div.title i{
	font-size: 23px;
    line-height: 15px;
    float: right;
	cursor: pointer;
}
div.container.menu[data-swapping='true'] {
	user-select: none;
}
div.container.menu[data-swapping='true'] div.title i.mdi-arrow-up-drop-circle,
div.container.menu[data-swapping='true'] div.title i.mdi-arrow-down-drop-circle,
div.container.menu[data-swapping='true'] div.spacer,
div.container.menu[data-swapping='true'] div.content,
div.container.menu:not([data-swapping='true']) div.title i.mdi-arrow-up-down-bold-outline{
	display: none;
}
div.container.menu[data-swapping='true'] div.title {
	margin-bottom: 5px;
}
div.container.mailview div.title{
	display: flex;
	justify-content: space-between;
	gap: 10px;
	align-items: center;
	position: sticky;
    top: 3px;
    z-index: 100;
    box-shadow: 0 3px #FFF, 0 -3px #FFF;
}
body[data-folder='trash'] div.container.mailview div.title{
	--color: #d32f2f;
}
div.container.mailview div.title div.actions{
	display: flex;
	gap: 10px;
	align-items: center;
}
div.container.mailview div.title div.actions i{
	display: block;
	width: 22px;
    line-height: 20px;
	background-color: #FFF;
	border-radius: 3px;
	color: var(--color);
    cursor: pointer;
}
div.container.mailview div.title div.actions i[data-applied='true']{
	box-shadow: 0 0 0 2px #F44336;
}
@media screen and (max-width: 550px){
	div.container.mailview div.title{
		display: grid;
		grid-template-columns: auto;
		row-gap: 10px;
		justify-content: center;
		justify-items: center;
	}
}
div.container.mailview div.trashinfo{
	text-align: center;
	color: #d32f2f;
	padding: 10px 0 5px 0;
}
div.container.mailview div.filters{
    display: flex;
	justify-content: space-between;
	gap: 10px;
    margin: 5px -15px 10px -15px;
	background-color: #dfeeff;
    border: solid #006bc7;
    color: #006bc7;
	font-size: 10px;
    border-width: 2px 0;
    padding: 5px 10px 10px 10px;
    text-align: center;
}
@media (max-width: 1000px){
	div.container.mailview div.filters{
		display: grid;
		grid-template-columns: auto;
		row-gap: 10px;
		justify-content: center;
	}
}
div.container.mailview div.filters div[data-filter] div.name{
	font-weight: bold;
	margin-bottom: 3px;
}
div.container.mailview div.filters div[data-filter] div.value{
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	cursor: pointer;
}
div.container.mailview table.list{
	width: calc(100% + 8px);
	font-size: 11px;
	margin: 5px 0 0 -8px;
	border-collapse: collapse;
	color: #006bc7;
}
@media (max-width: 1000px) {
	div.container.mailview table.list{
		width: calc(100% + 16px);
	}
}
body[data-folder='trash'] div.container.mailview table.list{
	color: #d32f2f;
}
div.container.mailview table.list div.noemails{
	text-align: center;
    padding: 20px;
    font-size: 20px;
}
div.container.mailview table.list td.type{
	width: 1%;
	padding: 0 5px 0 0!important;
}
div.container.mailview table.list i.mdi{
    display: inline-block;
	font-size: 22px;
	line-height: 1;
    margin-top: 1px;
}
div.container.mailview table.list td.date i.mdi{
	vertical-align: middle;
    margin-right: 5px;
}
div.container.mailview table.list div.email{
	position: relative;
	display: grid;
	grid-template-columns:  min-content		auto		min-content		min-content;
	grid-template-areas:	"state			info		date			actions";
	background-color: #f0f7ff;
    border: 2px solid #016bc7;
	border-radius: 3px;
	padding: 5px;
	cursor: pointer;
	column-gap: 5px;
	align-items: center;
}
@media screen and (max-width: 1000px){
	div.container.mailview table.list div.email {
		grid-template-columns:  min-content		auto		min-content;
		grid-template-areas:	"state			info		info"
								"state			date		actions";
		padding: 5px;
	}
}
div.container.mailview table.list div.email[data-read='false']{
	font-weight: bold;
	background-color: #dfeeff;
	box-shadow: inset 0 0 0 1px #006bc7;
}
div.container.mailview table.list div.email[data-justopened='true']{
	box-shadow: 0 0 10px 3px #d57f00;
}
body[data-folder='trash'] div.container.mailview table.list div.email[data-read='false']{
	background-color: #ffe3e3;
	box-shadow: inset 0 0 0 1px #d32e2f;
}
body[data-folder='trash'] div.container.mailview table.list div.email{
	border-color: #d32f2f;
	background-color: #fff7f8;
}
body div.container.mailview table.list div.email:hover{
	background-color: #c5e3ff;
}
body[data-folder='trash'] div.container.mailview table.list div.email:hover{
	background-color: #ffd4d4;
}
div.container.mailview table.list div.email div.actions.read {
	grid-area: state;
}
div.container.mailview table.list div.email div.info {
	grid-area: info;
	overflow-wrap: anywhere;
}
@media screen and (max-width: 1000px){
	div.container.mailview table.list div.email div.info {
		padding-bottom: 2px;
		border-bottom: 1px solid #006bc7;
	}
	body[data-folder='trash'] div.container.mailview table.list div.email div.info {
		border-color: #d32e2f;
	}
}
div.container.mailview table.list div.email div.info div.subject {
	font-size: 13px;
	margin-bottom: 2px;
	word-break: break-word;
}
div.container.mailview table.list div.email div.date {
	display: flex;
	align-items: center;
	gap: 5px;
	font-weight: normal;
	grid-area: date;
	white-space: nowrap;
}
div.container.mailview table.list div.email div.actions {
	display: flex;
	align-items: center;
	grid-area: actions;
	white-space: nowrap;
}
div[role='tooltip']{
	margin-top: -4px;
    margin-right: -7px;
    font-size: 13px;
    padding: 4px 7px;
    border: none!important;
	background-color: #006bc7;
	color: #fff;
	box-shadow: none;
}
div.container.mailview table.list div.email div.actions i{
    border-radius: 50%;
    height: 28px;
    line-height: 28px;
    width: 28px;
    text-align: center;
	transition: background-color 0.2s linear;
}
div.container.mailview table.list div.email div.actions i.disabled{
	opacity: 0.3;
}
div.container.mailview table.list div.email div.actions i:hover{
	background-color: rgba(0, 100, 200, 0.2);
}
body[data-folder='trash'] div.container.mailview table.list div.email div.actions i:hover{
	background-color: rgba(210, 45, 45, 0.2);
}
body[data-folder='trash'] div[role='tooltip']{
	background-color: #d22d2d;
}
div.container.mailview table.list div.email div.cover{
	position: absolute;
    top: -2px;
    left: -2px;
	display: table;
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    color: #016bc7;
    box-shadow: inset 0 0 0 2px #016bc7;
	border-radius: 3px;
    overflow: hidden;
    background-color: rgba(45, 155, 251, 0.3);
    font-size: 20px;
    font-weight: 600;
	cursor: default;
}
body div.container.mailview table.list div.email div.cover.red{
    color: #d32f2f;
    box-shadow: inset 0 0 0 2px #d32f2f;
    background-color: rgba(255, 204, 204, 0.6);
}
div.container.mailview table.list div.email div.cover div.cell{
	display: table-cell;
	width: 100%;
	height: 100%;
	vertical-align: middle;
    text-align: center;
}
div.container.mailview table.list div.email div.cover div.cell div[data-action]{
    display: inline-block;
    background-color: #016bc7;
    color: #FFF;
    font-size: 13px;
    line-height: 24px;
    vertical-align: bottom;
    padding: 0 10px;
    border-radius: 5px;
    margin-left: 10px;
	cursor: pointer;
}
div.container.mailview table.list div.email div.cover.red div.cell div[data-action]{
	background-color: #d32f2f;
}
div.container.mailview table.list div.email div.cover div.cell div[data-action]:hover{
	opacity: 0.8;
}
.button{
	display: block;
	background-color: #006bc7;
	border-radius: 3px;
	text-align: center;
	color: #FFF;
	font-size: 16px;
	padding: 5px;
	text-decoration: none;
	cursor: pointer;
}
.button:hover{
	opacity: 0.8;
}
.button.disabled{
	opacity: 0.4;
}
div.container.login div.button{
	margin-top: 18px;
}
div.form-input, div.form-textarea {
    position: relative;
    padding-top: 18px;
}
div.form-input label, div.form-textarea label {
	width: 100%;
}
div.form-input div.input-label, div.form-textarea div.textarea-label {
    position: absolute;
    top: 18px;
    color: #BBB;
    line-height: 30px;
    cursor: text;
    transition: top 0.2s ease-in-out, font-size 0.2s ease-in-out;
}
div.form-textarea div.textarea-label {
	top: 23px;
}
div.form-input.focused div.input-label, div.form-input.written div.input-label, div.form-textarea.focused div.textarea-label, div.form-textarea.written div.textarea-label {
    color: #006bc7;
    font-size: 11px;
    top: 0;
}
div.form-input input, div.form-textarea textarea {
    width: 100%;
    border: 0;
	font-size: 16px;
    box-shadow: inset 0 -1px 0 #DDD;
    transition: box-shadow 0.3s ease-in-out;
    line-height: 30px;
    outline: none;
}
div.form-textarea textarea {
	padding: 10px;
	font-size: 16px;
	line-height: 20px;
	min-height: 20px;
	resize: none;
	transition: all 0.5s linear;
}
div.form-input.focused input, div.form-input.written input, div.form-textarea.focused textarea, div.form-textarea.written textarea {
    box-shadow: inset 0 -2px 0 #006bc7;
}
@media (max-width: 1000px){
	i.mdi.mdi-menu{
		position: absolute;
		top: 10px;
		left: 10px;
		display: inline;
		font-size: 30px;
		color: #006bc7;
		cursor: pointer;
	}
	div.container.menu{
	    position: fixed;
		top: 0;
		left: 0;
		display: block;
		height: 100%;
		overflow: auto;
		border-radius: 0;
		transition: left 0.2s linear;
		z-index: 1000;
	}
	div.container.menu[data-loading='true']:before{
		border-radius: 0;
	}
	div.container.menu.hidden{
		left: -300px;
	}
	div.container.menu div.openclose{
		display: block;
		text-align: right;
		font-size: 30px;
		color: #006bc7;
		margin-bottom: 10px;
	}
	div.container.menu div.openclose i{
		cursor: pointer;
	}
	div.container.mailview{
		width: 100%;
		margin-left: 0;
	}
}
div#emailview, div#composebox{
    position: fixed;
    top: 0;
    left: 0;
	display: none;
    width: 100vw;
    height: 100vh;
	overflow-wrap: break-word;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
}
div#emailview div.cell, div#composebox div.cell{
	display: table-cell;
	vertical-align: middle;
}
div#emailview div.box, div#composebox div.box{
	width: 400px;
	max-width: 90%;
	margin: 0 auto;
	background-color: #FFF;
	border-radius: 3px;
	padding: 20px 30px;
	box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
}
div#emailview div.box{
	height: calc(100% - 20px);
    width: calc(100% - 20px);
	max-width: initial;
	padding: 0;
	overflow: hidden;
}
div#emailview div.box iframe{
	width: 100%;
	height: 100%;
	border: 0;
}
div#composebox div.box{
	height: calc(100% - 20px);
    width: calc(100% - 20px);
	max-width: initial;
	padding: 20px;
	overflow: auto;
}
div#composebox div.box div.title{
	background-color: #006bc7;
    color: #FFF;
    text-align: center;
    padding: 5px 10px;
    border-radius: 3px;
    margin: -15px -15px 10px -15px;
    font-weight: bold;
}
div#composebox div.box div.title i{
	float: left;
}
div#composebox div.box div.title i.mdi-close{
	float: right;
	cursor: pointer;
    border-radius: 2px;
    width: 19px;
    margin-right: -5px;
	transition: all 0.1s linear;
}
div#composebox div.box div.title i.mdi-close:hover{
	background-color: #FFF;
	color: #006bc7;
}
div#composebox div.box .select2-container{
	z-index: 100001;
}
div#composebox div.box hr{
    border: dashed #4295de;
    border-width: 1px 0 0 0;
}
div#composebox div.box div[data-field='from'] b, div#composebox div.box div[data-field='to'] b, div#composebox div.box div[data-field='cc'] b, div#composebox div.box div[data-field='bcc'] b, div#composebox div.box div[data-field='subject'] b, div#composebox div.box div[data-field='in_reply_to'] b, div#composebox div.box div[data-field='in_reply_to'] span{
	vertical-align: middle;
}
div#composebox div.box div[data-field='from'] span.select2{
	max-width: calc(100% - 190px);
}
div#composebox div.box div[data-field='from'] .select2-container--default .select2-selection--single .select2-selection__rendered{
	color: #006bc7;
}
div#composebox div.box div[data-field='from'] span.email{
	display: inline-block;
    margin: 0 8px -1px 8px;
    text-overflow: ellipsis;
    vertical-align: middle;
	white-space: nowrap;
    color: #444444;
    line-height: 27px;
}
div#composebox div.box div[data-action]{
	display: inline-block;
    background-color: #4195de;
    cursor: pointer;
    color: #FFF;
    border-radius: 5px;
    margin-left: 5px;
    padding: 2px 7px 2px 5px;
    vertical-align: middle;
	cursor: pointer;
}
div#composebox div.box div[data-action]{
	float: right;
	margin-bottom: 5px;
}
div#composebox div.box div[data-field='message'] div.nicEdit-main{
	font-family: sans-serif;
}
div#composebox div.box div[data-action] i{
	display: inline-block;
	font-size: 20px;
    line-height: 15px;
    vertical-align: middle;
    margin-top: -3px;
}
div#composebox div.box div[data-action]:hover{
	opacity: 0.8;
}
div#composebox div.box input{
	width: 500px;
	margin-left: 8px;
	color: #006bc7;
	font-size: 15px;
	border: 0;
    vertical-align: middle;
	text-overflow: ellipsis;
}
div#composebox div.box div.email{
	display: inline-block;
    margin-left: 5px;
    font-size: 12px;
    color: #FFF;
    background-color: #d32f2f;
    border: 1px solid #d32f2f;
    border-radius: 5px;
    padding: 2px 2px 2px 5px;
    vertical-align: middle;
}
div#composebox div.box div.email.valid{
	color: #006bc7;
	border-color: #006bc7;
	background-color: #dfeeff;
}
div#composebox div.box div.email i.mdi-close{
	margin-left: 5px;
    background-color: #FFF;
    color: #d32f2f;
    height: 15px;
    line-height: 15px;
    width: 15px;
    text-align: center;
    display: inline-block;
    border-radius: 3px;
	cursor: pointer;
}
div#composebox div.box div.email.valid i.mdi-close{
	background-color: #006bc7;
	color: #dfeeff;
}
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
    background-color: transparent;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent
}
::-webkit-scrollbar:hover {
    background-color: rgba(0, 0, 0, .05)
}
::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, .2);
    border-radius: 100px;
    background-clip: padding-box;
    border: 2px solid transparent;
    min-height: 10px
}
::-webkit-scrollbar-thumb:active {
    background: rgba(0, 0, 0, .3);
    -webkit-border-radius: 100px
}