/*
	Everything Responsive!
	Author: os ಠ_ರೃ
	Date: 2016-03-23


*/



/*
***********
* General *
***********
*/

body {
	font-size: 14px;
	font-size: 1.4em;
}

h1 {
	text-align: center;
}

h1, h2, h3, .h1, .h2 {
	font-weight: 600;
}

.body_container, #body_container {
	max-width: 750px;
	width: auto;
	padding-top: 25px;
}

.w100p {
	width: 100%;
}

.w100p label::after {
	content: '\2304 ';
	padding: 0 10px;
	position: absolute;
	right: 0;
}

.cleanbox {
	border: 0;
	border-bottom: 2px solid #ddd;
	border-radius: 0;
}

.whitebox {
	border: 0;
	border-bottom: 2px solid #ddd;
	border-radius: 0;
	background: #FFF;
	float: none;
	margin: 0;
	padding: 15px;
	width: auto;
}

.rederror {
	padding: 20px;
}

.rederror ul {
	padding-left: 20px;
}

.fullwidth p {
	word-wrap: break-word;
}

.relative {
    position: relative;
}

.hr {
	border-top: 1px solid #ccc;
}

.formHint {
	margin-left: 5px;
}

.left {
	text-align: center;
}

.right {
	text-align: center;
}

/* Update and error messages */
.status, .error {
	padding: 10px;
	margin-bottom: 10px;
	text-align: center;
	box-sizing: border-box;
	border-radius: 4px;
	font-size: 1.6em;
	font-size: 16px;
}

.status {
	background: rgb(178, 236, 178);
	border: 1px solid rgb(13, 156, 5);
	color: rgb(3, 68, 3);
}

.error {
	background: rgb(232, 165, 183);
	border: 1px solid rgb(123, 19, 47);
	color: rgb(68, 3, 18);
}

/* Safari Webkit Fix */
input[type="search"] {
	-webkit-appearance: textfield;
}

.message label.h2
.from label.h2 {
	margin: 0;
}

/* Zip */
.zip input[type="checkbox"] {
	display: none;
	margin-left: 0;
}

.zip input[type="checkbox"] + label {
	display: block;
	position: relative;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	width: 100%;
	font-size: 2.2rem;
	text-shadow: #fff 1px 1px;
	margin: 0;
	padding: 0;
	font-weight: bold;
	color: #444!important;
}

.zip input[type="checkbox"] + label::after {
	width: 16px;
	height: 16px;
	border: 1px solid #aaa;
	border-radius: 4px;
	content: '';
	position: absolute;
	top: 8px;
	margin-left: 10px;
}

.zip #divForZipName label {
	margin: 10px 0;
	font-size: 14px;
	padding-left: 5px;
	font-weight: bold;
	color: #444;
	text-shadow: #fff 1px 1px;
}

.zip input[type="checkbox"]:checked + label::after {
	background-image: url(/plupload_responsive/images/black-tick.png);
	background-size: contain;
}

	/* Settings */
.multi-menu .client-settings .box .settings-list, .box .settings-list-right {
	width: 100%;
	float: none;
	box-sizing: border-box;
	margin: 10px 0;
}

/*
*********************
* Search Box *
*********************
*/
.search {
	width: 300px;
	margin-bottom: 10px;
}

.search .lookup {
	width: 250px;
	margin: 0;
	padding: 5px;
	height: 50px;
	vertical-align: middle;
	background-color: #fdfdfd;
	border: 1px #ccc solid;
	border-right: 0;
	border-radius: 3px 0 0 3px;
	box-sizing: border-box;
}

.search .image_container {
	margin: 0;
	padding: 5px;
	height: 50px;
	width: 50px;
	vertical-align: middle;
	border: 1px solid #e37fc1;
	border-left: 0;
	border-radius: 0 3px 3px 0;
	box-sizing: border-box;
	box-shadow: none;
	background-color: #e37fc1;
}

/*
*********************
* Thumbnail *
* Default parameters for a thumbnail element, without the image url of course *
*********************
*/
.thumbnail {
	height: 125px;
	width: 100%;
	background: center / contain no-repeat;
	display: inline-block;
}

/* Placeholder for when no thumbnail is available */
.filetype {
	height: 125px;
	width: 100%;
	background-color: #e37fc1;
	border-radius: 4px;
	position: relative;
}

.filetype::after {
	position: relative;
	content: attr(data-type);
	font-weight: bold;
	font-size: 4em;
	line-height: 1em;
	color: white;
	-ms-word-wrap: break-word;
	word-wrap: break-word;
	padding-left: 10px;
}

/* Spinner */
.loader {
	margin: 30px auto;
	font-size: 6px;
	width: 1em;
	height: 1em;
	border-radius: 50%;
	position: relative;
	-webkit-animation: load5 1.1s infinite ease;
	animation: load5 1.1s infinite ease;
	-webkit-transform: translateZ(0);
	-ms-transform: translateZ(0);
	transform: translateZ(0);
}
@-webkit-keyframes load5 {
	0%,
	100% {
		box-shadow: 0em -2.6em 0em 0em #e37fc1, 1.8em -1.8em 0 0em rgba(227,127,193, 0.2), 2.5em 0em 0 0em rgba(227,127,193, 0.2), 1.75em 1.75em 0 0em rgba(227,127,193, 0.2), 0em 2.5em 0 0em rgba(227,127,193, 0.2), -1.8em 1.8em 0 0em rgba(227,127,193, 0.2), -2.6em 0em 0 0em rgba(227,127,193, 0.5), -1.8em -1.8em 0 0em rgba(227,127,193, 0.7);
	}
	12.5% {
		box-shadow: 0em -2.6em 0em 0em rgba(227,127,193, 0.7), 1.8em -1.8em 0 0em #e37fc1, 2.5em 0em 0 0em rgba(227,127,193, 0.2), 1.75em 1.75em 0 0em rgba(227,127,193, 0.2), 0em 2.5em 0 0em rgba(227,127,193, 0.2), -1.8em 1.8em 0 0em rgba(227,127,193, 0.2), -2.6em 0em 0 0em rgba(227,127,193, 0.2), -1.8em -1.8em 0 0em rgba(227,127,193, 0.5);
	}
	25% {
		box-shadow: 0em -2.6em 0em 0em rgba(227,127,193, 0.5), 1.8em -1.8em 0 0em rgba(227,127,193, 0.7), 2.5em 0em 0 0em #e37fc1, 1.75em 1.75em 0 0em rgba(227,127,193, 0.2), 0em 2.5em 0 0em rgba(227,127,193, 0.2), -1.8em 1.8em 0 0em rgba(227,127,193, 0.2), -2.6em 0em 0 0em rgba(227,127,193, 0.2), -1.8em -1.8em 0 0em rgba(227,127,193, 0.2);
	}
	37.5% {
		box-shadow: 0em -2.6em 0em 0em rgba(227,127,193, 0.2), 1.8em -1.8em 0 0em rgba(227,127,193, 0.5), 2.5em 0em 0 0em rgba(227,127,193, 0.7), 1.75em 1.75em 0 0em #e37fc1, 0em 2.5em 0 0em rgba(227,127,193, 0.2), -1.8em 1.8em 0 0em rgba(227,127,193, 0.2), -2.6em 0em 0 0em rgba(227,127,193, 0.2), -1.8em -1.8em 0 0em rgba(227,127,193, 0.2);
	}
	50% {
		box-shadow: 0em -2.6em 0em 0em rgba(227,127,193, 0.2), 1.8em -1.8em 0 0em rgba(227,127,193, 0.2), 2.5em 0em 0 0em rgba(227,127,193, 0.5), 1.75em 1.75em 0 0em rgba(227,127,193, 0.7), 0em 2.5em 0 0em #e37fc1, -1.8em 1.8em 0 0em rgba(227,127,193, 0.2), -2.6em 0em 0 0em rgba(227,127,193, 0.2), -1.8em -1.8em 0 0em rgba(227,127,193, 0.2);
	}
	62.5% {
		box-shadow: 0em -2.6em 0em 0em rgba(227,127,193, 0.2), 1.8em -1.8em 0 0em rgba(227,127,193, 0.2), 2.5em 0em 0 0em rgba(227,127,193, 0.2), 1.75em 1.75em 0 0em rgba(227,127,193, 0.5), 0em 2.5em 0 0em rgba(227,127,193, 0.7), -1.8em 1.8em 0 0em #e37fc1, -2.6em 0em 0 0em rgba(227,127,193, 0.2), -1.8em -1.8em 0 0em rgba(227,127,193, 0.2);
	}
	75% {
		box-shadow: 0em -2.6em 0em 0em rgba(227,127,193, 0.2), 1.8em -1.8em 0 0em rgba(227,127,193, 0.2), 2.5em 0em 0 0em rgba(227,127,193, 0.2), 1.75em 1.75em 0 0em rgba(227,127,193, 0.2), 0em 2.5em 0 0em rgba(227,127,193, 0.5), -1.8em 1.8em 0 0em rgba(227,127,193, 0.7), -2.6em 0em 0 0em #e37fc1, -1.8em -1.8em 0 0em rgba(227,127,193, 0.2);
	}
	87.5% {
		box-shadow: 0em -2.6em 0em 0em rgba(227,127,193, 0.2), 1.8em -1.8em 0 0em rgba(227,127,193, 0.2), 2.5em 0em 0 0em rgba(227,127,193, 0.2), 1.75em 1.75em 0 0em rgba(227,127,193, 0.2), 0em 2.5em 0 0em rgba(227,127,193, 0.2), -1.8em 1.8em 0 0em rgba(227,127,193, 0.5), -2.6em 0em 0 0em rgba(227,127,193, 0.7), -1.8em -1.8em 0 0em #e37fc1;
	}
}
@keyframes load5 {
	0%,
	100% {
		box-shadow: 0em -2.6em 0em 0em #e37fc1, 1.8em -1.8em 0 0em rgba(227,127,193, 0.2), 2.5em 0em 0 0em rgba(227,127,193, 0.2), 1.75em 1.75em 0 0em rgba(227,127,193, 0.2), 0em 2.5em 0 0em rgba(227,127,193, 0.2), -1.8em 1.8em 0 0em rgba(227,127,193, 0.2), -2.6em 0em 0 0em rgba(227,127,193, 0.5), -1.8em -1.8em 0 0em rgba(227,127,193, 0.7);
	}
	12.5% {
		box-shadow: 0em -2.6em 0em 0em rgba(227,127,193, 0.7), 1.8em -1.8em 0 0em #e37fc1, 2.5em 0em 0 0em rgba(227,127,193, 0.2), 1.75em 1.75em 0 0em rgba(227,127,193, 0.2), 0em 2.5em 0 0em rgba(227,127,193, 0.2), -1.8em 1.8em 0 0em rgba(227,127,193, 0.2), -2.6em 0em 0 0em rgba(227,127,193, 0.2), -1.8em -1.8em 0 0em rgba(227,127,193, 0.5);
	}
	25% {
		box-shadow: 0em -2.6em 0em 0em rgba(227,127,193, 0.5), 1.8em -1.8em 0 0em rgba(227,127,193, 0.7), 2.5em 0em 0 0em #e37fc1, 1.75em 1.75em 0 0em rgba(227,127,193, 0.2), 0em 2.5em 0 0em rgba(227,127,193, 0.2), -1.8em 1.8em 0 0em rgba(227,127,193, 0.2), -2.6em 0em 0 0em rgba(227,127,193, 0.2), -1.8em -1.8em 0 0em rgba(227,127,193, 0.2);
	}
	37.5% {
		box-shadow: 0em -2.6em 0em 0em rgba(227,127,193, 0.2), 1.8em -1.8em 0 0em rgba(227,127,193, 0.5), 2.5em 0em 0 0em rgba(227,127,193, 0.7), 1.75em 1.75em 0 0em #e37fc1, 0em 2.5em 0 0em rgba(227,127,193, 0.2), -1.8em 1.8em 0 0em rgba(227,127,193, 0.2), -2.6em 0em 0 0em rgba(227,127,193, 0.2), -1.8em -1.8em 0 0em rgba(227,127,193, 0.2);
	}
	50% {
		box-shadow: 0em -2.6em 0em 0em rgba(227,127,193, 0.2), 1.8em -1.8em 0 0em rgba(227,127,193, 0.2), 2.5em 0em 0 0em rgba(227,127,193, 0.5), 1.75em 1.75em 0 0em rgba(227,127,193, 0.7), 0em 2.5em 0 0em #e37fc1, -1.8em 1.8em 0 0em rgba(227,127,193, 0.2), -2.6em 0em 0 0em rgba(227,127,193, 0.2), -1.8em -1.8em 0 0em rgba(227,127,193, 0.2);
	}
	62.5% {
		box-shadow: 0em -2.6em 0em 0em rgba(227,127,193, 0.2), 1.8em -1.8em 0 0em rgba(227,127,193, 0.2), 2.5em 0em 0 0em rgba(227,127,193, 0.2), 1.75em 1.75em 0 0em rgba(227,127,193, 0.5), 0em 2.5em 0 0em rgba(227,127,193, 0.7), -1.8em 1.8em 0 0em #e37fc1, -2.6em 0em 0 0em rgba(227,127,193, 0.2), -1.8em -1.8em 0 0em rgba(227,127,193, 0.2);
	}
	75% {
		box-shadow: 0em -2.6em 0em 0em rgba(227,127,193, 0.2), 1.8em -1.8em 0 0em rgba(227,127,193, 0.2), 2.5em 0em 0 0em rgba(227,127,193, 0.2), 1.75em 1.75em 0 0em rgba(227,127,193, 0.2), 0em 2.5em 0 0em rgba(227,127,193, 0.5), -1.8em 1.8em 0 0em rgba(227,127,193, 0.7), -2.6em 0em 0 0em #e37fc1, -1.8em -1.8em 0 0em rgba(227,127,193, 0.2);
	}
	87.5% {
		box-shadow: 0em -2.6em 0em 0em rgba(227,127,193, 0.2), 1.8em -1.8em 0 0em rgba(227,127,193, 0.2), 2.5em 0em 0 0em rgba(227,127,193, 0.2), 1.75em 1.75em 0 0em rgba(227,127,193, 0.2), 0em 2.5em 0 0em rgba(227,127,193, 0.2), -1.8em 1.8em 0 0em rgba(227,127,193, 0.5), -2.6em 0em 0 0em rgba(227,127,193, 0.7), -1.8em -1.8em 0 0em #e37fc1;
	}
}

/* header */
.banner-image img {
	max-width: 100%;
}

textarea {
	width: 100%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 3px;
    padding: 5px;
    margin: 0;
}

/*
*********************
* Responsive Tables *
*********************
*/
.responsive-table {
	display: table;
	width: 100%;
	border: 1px solid #cccccc;
	border-top: 0;
}

.responsive-table .table-row {
	display: block;
	width: 100%;
	position: relative;
}

.responsive-table .table-row:nth-child(even) {
	background-color:#ffeaf8;
}

/* Firefox fix as it cannot handle border-collapse, or tables, or life in general. */
.responsive-table .table-row > div ~ div {
	border-left: 1px solid #ccc;
}

.responsive-table .table-row ~ .table-row > div {
	border-top: 1px solid #ccc;
}

.responsive-table .headers {
	display: none;
}

.responsive-table .table-header.center, .responsive-table .table-cell.center {
	text-align: center;
}

.responsive-table .table-cell, .responsive-table .table-header {
	padding: 5px;
}

.responsive-table .table-cell {
	display: table-cell;
	vertical-align: middle;
}

.responsive-table .table-cell label {
	display: block;
}

.responsive-table .table-header {
	display: none;
}

.responsive-table .table-cell[data-header] {
	display: inline-block;
	width: 100%;
	box-sizing: border-box;
}

.responsive-table .table-cell[data-header]::before {
	display: inline-block;
	content: attr(data-header);
	font-weight: bold;
	width: auto;
	padding: 0 10px 0 0;
}

.responsive-table .toggle-row {
	display: none;
}

.responsive-table input.toggle-row ~ div.toggle-row {
	display: none;
}

.responsive-table input.toggle-row:checked ~ div.toggle-row {
	display: inline-block;
}


.input-wrapper {
	border-radius: 3px;
	background: #ccc;
	display: inline-block;
	margin: 10px 0;
	width: 100%;
}

.input-wrapper input {
	padding: 8px;
	background-color: #fdfdfd;
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
	vertical-align: middle;
	font-size: 24px;
	width: calc(100% - 40px);
	box-sizing: border-box;
	transition: border .25s ease-in-out,box-shadow .25s ease-in-out;
}

.hex-input::before {
	content: '#';
	line-height: 1;
	vertical-align: middle;
	width: 40px;
	display: inline-block;
	text-align: center;
	font-size: 24px;
}

.radio-slider {
	width: 100%;
	overflow: hidden;
	display: inline-block;
	border: 1px solid #ddd;
	border-radius: 3px;
	background-color: #FFF;
}

.radio-slider input {
	display: none;
}


.radio-slider input:checked + label::before {
	left: 0;
	text-indent: 0;
}

.radio-slider input:checked + label:first-of-type::before {
	right: 0;
	left: auto;
}


.radio-slider label {
	width: 50%;
	position: relative;
	overflow: hidden;
	display: inline-block;
	text-align: center;
	font-size: 24px;
	cursor: pointer;
	margin: 0;
}
.radio-slider label::before{
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
}

.radio-slider label::before {
	background: #e37fc1;
	left: -100%;
	transition: left .5s, right .5s, text-indent .5s;
	content: attr(data-label);
	color: #fff;
	overflow: hidden;
	text-indent: 200%;
}

.radio-slider label:first-of-type::before {
	left: auto;
	right: -100%;
	text-indent: -200%;

}

.radio-slider label {
	font-size: 24px;
}

.main-content {
	/*margin: 25px 0;*/
}


label {
	display: block;
	margin: 10px 0;
}


input.r, select.r, button.r {
	width: 100%;
	box-sizing: border-box;
	font-size: 24px;
	transition: none;
}

select.r {
	-webkit-appearance: none;
	-moz-appearance: none;
	/*padding-right: 18px;*/
}

textarea.r {
	width: 100%;
	font-size: 1em;
}

input[type="button"].r,
input[type="submit"].r,
a.fancybutton.r {
	border: 0;
	border-bottom: 3px solid #B35A95;
	border-top: 0px solid #9c4e7e;
	box-shadow: none;
	border-radius: 5px;
	background: #e37fc1;
	transition: border .1s;
	color: #fff;
	padding: 6px;
}

button.r:active,
input[type="button"].r:active,
input[type="submit"].r:active,
a:active.fancybutton.r{
	border-top-width: 3px;
	border-bottom-width: 0px;
	transform: none;
	/*margin-top: 3px;*/

	/*
	transform: translate(0px,3px);
	-webkit-transform: translate(0px,3px);
	-moz-transform: translate(0px,3px);
	*/

}

a.fancybutton.r {
	box-shadow: none;
}


a:hover.fancybutton.r {
	box-shadow: none;
}


/*
input.r[type="text"]:valid {
	border-color: #0f0;

}

input.r[type="text"]:invalid {
	border-color: #f00;

}
*/

select.r {
	background: url(/images/up-down.png) right 5px center no-repeat;
	background-size: contain;
	border: 2px solid #ddd;
	padding: 4px 20px 4px 4px;
}


/*
********************
* Responsive Forms *
********************
*/
.responsive-form label {
	width: 100%;
	display: block;
	font-size: 20px;
}

.responsive-form input[type="text"] {
	width: 100%;
	box-sizing: border-box;
	font-size: 24px;
}

/*
********************
* Responsive Panel *
********************
*/

.responsive-panel  {

}

.cleanbox {
	border: 1px solid #eee;
	background: #f7f7f7 url('../images/bgnoise.png') repeat;
	margin: 0 0 20px;
	padding: 10px 10px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 0 1px rgba(0, 0, 0, 0.3), inset 0 0 1px 1px rgba(255, 255, 255, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 -1px 2px rgba(0, 0, 0, 0.05);
}

div#footer {
	background: #f7f7f7 url('../images/bgnoise.png') repeat;
	margin: 0;
	padding: 10px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2), 0 0 1px rgba(0, 0, 0, 0.3), inset 0 0 1px 1px rgba(255, 255, 255, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 -1px 2px rgba(0, 0, 0, 0.05);
}


/*
***************************
* Media Query Shenanigans *
***************************
*/

@media only screen and (min-width: 501px) {

	/*
	***********
	* General *
	***********
	*/
	h1 {
		text-align: left;
	}

	.left {
		text-align: left;
	}

	.right {
		text-align: right;
	}

	.customisation .whitebox {
		border-bottom: 1px solid #ddd;
	}

	/* Settings */
	.multi-menu .client-settings .box .settings-list, .box .settings-list-right {
		width: 44%;
		margin: 10px 10px 10px 0;
	}

	.multi-menu .client-settings .box .settings-list {
		clear: left;
		float: left;
	}

	.box .settings-list-right {
		float: right;
	}

	/*
	*********************
	* Responsive Tables *
	*********************
	*/
	.responsive-table {
		display: table;
		width: 100%;
		border-top: 1px solid #cccccc;
	}

	.whitebox {
		border: 1px solid #ddd;
		border-radius: 3px;
		background: #fff;
		float: left;
		margin: 10px 0px;
		padding: 20px;
		width: 662px;
	}

	.responsive-table .table-row {
		display: table-row;
	}

	.w100p label::after {
		content: '';
	}

	.responsive-table .table-cell,
	.responsive-table .table-header,
	.responsive-table input.toggle-row ~ div.toggle-row,
	.responsive-table input.toggle-row:checked ~ div.toggle-row {
		display: table-cell;
		width: auto;
	}

	.responsive-table .table-row .table-header, .responsive-table .table-row .table-cell {
		padding-left: 10px;
	}

	.responsive-table .table-cell[data-header]::before {
		display: none;
	}

	.input-wrapper input {
		/*padding: 5px;*/
		width: calc(100% - 30px);
	}

	.input-wrapper input,
	.hex-input::before {
		font-size: 16px;
	}

	.radio-slider {
		width: 200px;
		vertical-align: middle;
	}

	.radio-slider {
		width: 100%;
	}

	/*
	********************
	* Responsive Forms *
	********************
	*/
	.responsive-form label {
		width: auto;
		display: inline;
		font-size: inherit;
	}

	.responsive-form input[type="text"] {
		width: auto;
		font-size: inherit;
	}

	label {
		display: inline;
		margin: 0;
	}

	/*input.r, select.r, input[type="button"].r, input[type="submit"].r {*/
	/*width: auto;*/
	/*}*/
	select.r {
		border-width: 1px;
	}

	input[type="button"].r, input[type="submit"].r {
		font-size: 14px;
		padding: 8px;
	}

	#uploader {
		background: #fff;
	}

	/* Custom Form Fields */
	#custom-form-fields .form-box {
		position: absolute;
		right: 20px;
		top: 20px;
		font-size: 14px;
	}

	#custom-form-fields .form-box > form {
		display: inline-block;
	}

}

@media only screen and (min-width: 750px) {

	.customisation p span > select,
	.customisation .table input,
	.radio-slider label,
	input.r, select.r, input[type="button"].r, input[type="submit"].r,
	.customisation .url {
		font-size: 16px !important;
	}

	.admin-page .button {
		width: 25%;
	}
}