/*
	====================================================================================================
	
	Glams Co. Ltd. Copyright 2019
	
	====================================================================================================	
*/

html {
	margin: 0;
	padding: 0;
}

body {
	width: 100%;
	height: 100%;
	font-family: Arial,sans-serif;
	color: #EEEEEE;
	background-color: #222222;
	margin: 0;
	padding: 0;
}

h1 {
	color: #FFFFFF;
	margin: 0;
	padding: 0;
}

h3 {
	margin: 0 0 1em 0;
}

a {
	color: #FFFFFF;
	text-decoration: none;
}

table {
	width: 50em;
}

th {
	color: #AAAAAA;
	width: 10em;
	font-weight: normal;
	line-height: 1.2em;
	text-align: left;
	vertical-align: top;
	padding: 1em 0;
}

td {
	font-weight: bold;
	line-height: 1.2em;
	text-align: left;
	vertical-align: top;
	padding: 1em 0;
}

hr {
    border: 0;
    height: 1px;
    background-color: #333333;
	margin-bottom: 1em;
}

.main_section {
	margin-bottom: 2em;
}

.clickable {
	line-height: 2em;
	cursor: pointer;
}

.clickable:hover {
	color: #339966;
}

.link {
	color: #339966;
}

.data_table th {
	border-bottom: 1px solid #333333;
	padding: 0.5em 0;
}

.data_table td {
	border-bottom: 1px solid #333333;
	padding: 0.5em 0;
}

#header {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	line-height: 3em;
	height: 3em;
	color: #FFFFFF;
	background-color: #339966;
	padding: 0 1em 0;
	overflow: hidden;
	z-index: 100;
}

#title {
	float: left;
}

#user_menu {
	float: right;
}

#main_menu {
	position: fixed;
	top: 3em;
	left: 0;
	bottom: 0;
	width: 12em;
	background-color: #333333;
}

#main_menu ul {
	padding: 0;
	margin: 0;
}

#main_menu li {
	list-style: none;
	background-color: #393939;
	border: 1px solid #444444;
	margin: 0.5em;
}

#main_menu a {
	color: #EEEEEE;
	text-decoration: none;
	display: block;
	padding: 1em;
}

#main_menu .selected {
	background-color: #222222;
	border: 1px solid #444444;
}

#main_menu .selected a {
}

#main {
	color: #EEEEEE;
	margin: 3em 0 0 12em;
	padding: 1em;
}

h2 {
	margin: 0 0 1em;
	padding: 0;
}

.tab_selected {
	float: left;
	min-width: 6em;
	color: #339966;
	background-color: #2A2A2A;
	border: 1px solid #2A2A2A;
	border-bottom: none;
	padding: 1em;
	cursor: pointer;
}

.tab {
	float: left;
	min-width: 6em;
	border: 1px solid #333333;
	border-bottom: none;
	padding: 1em;
	cursor: pointer;
}

.top_bar {
	background-color: #2A2A2A;
	margin-bottom: 1em;
	padding: 1em;
}

.actions {
	float: left;
	padding-right: 2em;
}

.actions_right {
	float: right;
}

.search {
	float: left;
}

.search form {
	padding: 0;
}

.clear {
	clear: both;
	margin: 0;
	padding: 0;
}

.list {
	border-bottom: 1px solid #333333;
	margin: 0;
	padding: 0;
}

.list li {
	list-style: none;
	border-top: 1px solid #333333;
	margin: 0;
	padding: 2em 0;
}

.list li:hover {
	background-color: #242424;
	cursor: pointer;
}

.thumbnail_list {
	margin: 0;
	padding: 0;
}

.thumbnail_list li {
	float: left;
	list-style: none;
	width: 17em;
	height: 22em;
	border: 1px solid #333333;
	margin: 0 0.5em 0.5em 0;
	padding: 1em;
}

.thumbnail_title {
	margin-bottom: 0.5em;
}

.thumbnail_image {
	width: 17em;
	height: 17em;
	text-align: center;	
	cursor: pointer;
}

.thumbnail_image img {
	max-width: 100%;
	max-height: 100%;
}


.grid {
	position: relative;
}

.item {
	display: block;
	position: absolute;
	width: 17em;
	height: 17em;
	background-color: #222222;
	border: solid 1px #333333;
	margin: 0 0.5em 0.5em 0;
	padding: 1em;
	z-index: 1;
}

.item.muuri-item-dragging {
	z-index: 3;
}

.item.muuri-item-releasing {
	z-index: 2;
}

.item.muuri-item-hidden {
	z-index: 0;
}

.item-content {
	position: relative;
	width: 100%;
	height: 100%;
	cursor: move;
}

.item-content .image {
	text-align: center;
}

.item-content img {
	max-width: 17em;
	max-height: 13em;
	margin-bottom: 1em;
}

.item-content .remove {
	position: absolute;
	left: 0;
	bottom: 0;
}

.image_left {
	float: left;
	width: 22em;
	height: 30em;
	text-align: center;	
	border: 1px solid #333333;
	margin: 0 2em 1em 0;
	padding: 1em;
}

.image_left img {
	max-width: 100%;
	max-height: 100%;
}


input[type="text"], input[type="password"] {
	width: 20em;
	font-size: 1em;
	background-color: #EEEEEE;
	border: 1px solid #666666;
	border-radius: 0.2em;
	padding: 0.5em;
}

.small_field {
	width: 9em !important;
}

input[type="submit"], input[type="button"] {
	min-width: 8em;
	font-size: 1em;
	background-color: #339966;
	border: 1px solid #339966;
	border-radius: 0.2em;
	color: #FFFFFF;
	padding: 0.5em;
	cursor: pointer;
}

input[readonly="readonly"] {
	color: #333333;
	background-color: #AAAAAA;
}

input[type="file"] {
	width: 0.1px;
	height: 0.1px;
	opacity: 0;
	overflow: hidden;
	position: absolute;
	z-index: -1;
}

.disabled {
	opacity: 0.25;
	cursor: default !important;
}

select {
	font-size: 1em;
	background-color: #EEEEEE;
	border: 1px solid #666666;
	border-radius: 0.2em;
	padding: 0.5em;
}

textarea {
	min-width: 40em;
	font-family: Arial,sans-serif;
	font-size: 1em;
	background-color: #EEEEEE;
	border: 1px solid #666666;
	border-radius: 0.2em;
	padding: 0.5em;
}

form {
	background-color: #2A2A2A;
	padding: 1em;
}


form section {
	margin-bottom: 1em;
}

.subgroup {
	background-color: #222222;
	padding: 1em;
}

.secondary_button {
	color: #339966 !important;
	background-color: #222222 !important;
}

.alert_button {
	color: #FF3344 !important;
	background-color: #222222 !important;
	border: 1px solid #FF3344 !important;
}

.button_bar {
	padding-top: 1em;
}

.upload_dropzone {
	width: 20em;
	height: 20em;
	color: #666666;
	background-color: #222222;
	text-align: center;
	line-height: 19em;
	border: 1px dashed #444444;
	padding: 0.5em;
}

.upload_dropzone.highlight {
	background-color: #333333;
}

.upload_dropzone label {
	cursor: pointer;
	padding-top: 1em;
	padding-bottom: 1em;
}

.upload_dropzone strong {
	color: #339966;
}

.upload_dropzone label:hover {
	color: #888888;
}

.error_bar {
	color: #FF3344;
	background-color: #222222;
	border: 1px solid #FF3344;
	border-radius: 0.2em;
	padding: 1em;
	margin-bottom: 1em;
}

.error {
	color: #FF3344;
	margin-top: 0.5em;
}

#image_wrapper {
	position: relative;
	background-color: #222222;
	border: 1px solid #333333;
	padding: 1em;
	display: none;
}

#image_wrapper img {
	margin-bottom: 1em;
}

.frame {
	background-color: #222222;
	border: 1px solid #333333;
	padding: 1em;
}

.dark_frame {
	background-color: #1C1C1C;
	border: 1px solid #333333;
	padding: 1em;
}

.status_pending {
	font-weight: normal;
	color: #666666;
	background-color: #222222;
	border: 1px solid #666666;
	border-radius: 0.2em;
	padding: 0.2em;
}

.status_processed, .status_registered, .status_shipped {
	font-weight: normal;
	color: #339966;
	background-color: #222222;
	border: 1px solid #339966;
	border-radius: 0.2em;
	padding: 0.2em;
}

.status_rejected, .status_canceled, .status_error {
	font-weight: normal;
	color: #FF3344;
	background-color: #222222;
	border: 1px solid #FF3344;
	border-radius: 0.2em;
	padding: 0.2em;
}

.status_sold {
	font-weight: normal;
	color: #996633;
	background-color: #222222;
	border: 1px solid #996633;
	border-radius: 0.2em;
	padding: 0.2em;
}

#login_wrapper {
	width: 100%;
	height: 100%;
	overflow: hidden;
}

#login {
	width: 30em;
	background-color: #2A2A2A;
	border: 1px solid #333333;
	border-radius: 0.2em;
	margin: 5em auto;
}

#login_header {
	line-height: 3em;
	height: 3em;
	color: #FFFFFF;
	background-color: #339966;
	border-radius: 0.2em;
	padding: 0 1em 0;
	overflow: hidden;
}


.progress_bar_wrapper {
	float: left;
	width: 40em;
	height: 1.5em;
	border: 1px solid #333333;
	padding: 0.4em;
}

.progress_bar {
	height: 100%;
	background-color: #FFFFFF;
}

.progress_bar_full {
	height: 100%;
	background-color: #339966;
}



/*
	----------------------------------------------------------------------------------------------------
	
	CUSTOM CHECKBOX
	
	----------------------------------------------------------------------------------------------------
*/

 /* Customize the label (the container) */
.checkbox {
	display: block;
	position: relative;
	line-height: 1.6em;
	padding-left: 2.2em;
	margin-bottom: 1em;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

/* Hide the browser's default checkbox */
.checkbox input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
	height: 0;
	width: 0;
}

/* Create a custom checkbox */
.checkmark {
	position: absolute;
	top: 0;
	left: 0;
	height: 1.6em;
	width: 1.6em;
	background-color: #EEEEEE;
	border-radius: 0.2em;
}

/* On mouse-over, add a grey background color */
.checkbox:hover input ~ .checkmark {
	background-color: #CCCCCC;
}

/* When the checkbox is checked, add a blue background */
.checkbox input:checked ~ .checkmark {
	background-color: #339966;
	border-radius: 0.2em;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
	content: "";
	position: absolute;
	display: none;
}

/* Show the checkmark when checked */
.checkbox input:checked ~ .checkmark:after {
	display: block;
}

/* Style the checkmark/indicator */
.checkbox .checkmark:after {
	left: 0.55em;
	top: 0.25em;
	width: 0.3em;
	height: 0.6em;
	border: solid white;
	border-width: 0 0.25em 0.25em 0;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}



/*
	----------------------------------------------------------------------------------------------------
	
	CUSTOM RADIO
	
	----------------------------------------------------------------------------------------------------
*/

 /* Customize the label (the container) */
.radio {
	display: block;
	position: relative;
	line-height: 1.6em;
	padding-left: 2.2em;
	margin-bottom: 1em;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

/* Hide the browser's default radio button */
.radio input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
	height: 0;
	width: 0;
}

/* Create a custom radio button */
.radiomark {
	position: absolute;
	top: 0;
	left: 0;
	height: 1.6em;
	width: 1.6em;
	background-color: #EEEEEE;
	border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.radio:hover input ~ .radiomark {
	background-color: #CCCCCC;
}

/* When the radio button is checked, add a blue background */
.radio input:checked ~ .radiomark {
	background-color: #339966;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.radiomark:after {
	content: "";
	position: absolute;
	display: none;
}

/* Show the indicator (dot/circle) when checked */
.radio input:checked ~ .radiomark:after {
	display: block;
}

/* Style the indicator (dot/circle) */
.radio .radiomark:after {
	top: 0.5em;
	left: 0.5em;
	width: 0.6em;
	height: 0.6em;
	border-radius: 50%;
	background: white;
}