*{
	margin: 0;
	padding: 0;
	border: 0;
	-webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
	text-decoration: none;
	list-style: none;
}

.clear {clear: both;}
.hidden {display: none;}
.max-width {max-width: 1100px;margin:auto}

:root {
  --main-bg-color: #eee;
  --main-tx-color: #333;
  
  --msg-ok-bg-color: green;
  --msg-ok-tx-color: white;
  --msg-ok-border-color: white;
  --msg-ok-shadow-color: #777;
  --msg-error-bg-color: red;
  --msg-error-tx-color: white;
  --msg-error-border-color: white;
  --msg-error-shadow-color: #777;
  
  --top-bar-bg-color: #eee;
  --top-bar-tx-color: #333;
  --top-bar-border-color: #eee;
  --top-bar-shadow-color: #aaa;
  
  --hambuguer-bg-color: #777;

  --nav-bg-color: #567443;
  --nav-tx-color: #fff;
  --nav-border-color: #444;
  --nav-hover-bg-color: #aaa;
  --nav-hover-tx-color: #aaa;
  
  --sub-nav-bg-color: #73bc48;
  --sub-nav-border-color: #897868;
  --sub-nav-hover-bg-color: #8ad868;
}

/************ HTML/BODY **************************************************************************************/

html {
	width: 100%;
	min-width: 320px;
	height: auto;
	min-height: 100vh;
	position: relative;
}

body {
	width: 100%;
	height: auto;
	min-height: 100vh;
	display: block;
	font-family: Tahoma, sans-serif;
	font-size: 16px;
	color: var(--main-tx-color);
	background-color: var(--main-bg-color);
	position: relative;
}

/************ MENSAGEM **************************************************************************************/

.msg {
	width: 100%;
	max-width: 600px;
	height: auto;
	margin-bottom: 16px;
	padding: 14px 10px;
	text-align: center;
	border-radius: 4px;
	animation: shake .2s;
}

@keyframes shake {
	0% {transform: translateX(0px);}
	20% {transform: translateX(5px);}
	35% {transform: translateX(0px);}
	50% {transform: translateX(-5px);}
	65% {transform: translateX(0px);}
	80% {transform: translateX(5px);}
	100% {transform: translateX(0px);}
}

.ok {
	color: var(--msg-ok-tx-color);
	background-color:  var(--msg-ok-bg-color);
	background-image: linear-gradient(var(--msg-ok-bg-color), darkgreen);
	border: 1px solid var(--msg-ok-border-color);
	box-shadow: 2px 2px 4px var(--msg-ok-shadow-color);
}

.error {
	text-align: center;
	color: var(--msg-error-tx-color);
	background-color:  var(--msg-error-bg-color);
	background-image: linear-gradient(var(--msg-error-bg-color), darkred);
	border: 1px solid var(--msg-error-border-color);
	box-shadow: 2px 2px 4px var(--msg-error-shadow-color);
}


/************ BOX LOGIN LOGOUT CHANGEPASSWORD RECOVERPASSWORD OOOOPS **************************************************************************************/

.box {
	width: 100%;	
	display: flex;
	align-items: center;
	flex-direction: column;
	height: auto;
}

.info {
	display: none;
}

.box h2, .box h3 {
	width: 300px;
	margin: auto;
	margin-top: 20px;
	color: #29506d;
	font-size: 1.6em;
	text-align: center;
}

.box h3 {
	font-size: 1.2em;
}

.box form {
	padding: 20px 0px;
	max-width: 400px;
	margin: auto;
}

.box a.arrow-return {
	display: block;
	padding: 12px 0px 0px 12px;
	font-size: 1.8em;
}

.remember-me {
	display: flex;
	flex-direction: row;
	align-items: center;
	margin-bottom: 16px;
}

.field .remember-me input{
	width: 15px;
	height: 15px;
	margin: 4px 0px 0px;
}

p.remember {
	width: 80%;
	padding-left: 10px;
	color: #777;
}


/************ BREADCRUMB **************************************************************************************/

.breadcrumbs {
	width: 100%;
	padding-bottom: 10px;
}

.breadcrumbs a {
	color: #777;
}

.breadcrumbs a:hover {
	color: blue;
}

/************ FORM **************************************************************************************/

form {
	width: 90%;
	height: auto;
	margin: auto;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
}

form a {
	color: #000;
}

.form-principal {
	padding: 10px 0px;
}

.field, .field-radio {
	width: 100%;
	max-width: 300px;
	margin: auto;
	height: auto;
	padding-bottom: 6px;
}

.field label, .field-radio p, .field p {
	display:block;
	width: 100%;
	padding-left: 10px;
	margin-bottom: 6px;
	color: #777;
}

.field input, .field select, .field textarea{
	width: 100%;
	margin-bottom: 10px;
	padding: 12px 10px 9px;
	font-size: 1.0em;
	border-radius: 4px;
	border: 1px solid #ccc;
	box-shadow: 1px 1px 2px inset #777;
	background-color: #fff;
	color: #444;
}

input[type="text"]:disabled, input[type="select"]:disabled, input[type="radio"]:disabled, textarea:disabled   {
  background: #f5f5f5;
}

.field input:focus, .field select:focus, .field textarea:focus{
    outline: none !important;
    border: 2px solid skyblue;
	padding: 11px 9px 8px;
}

input:-moz-read-only:focus { /* For Firefox */
	padding: 12px 10px 9px;
    border: 1px solid #ccc;
}

input:read-only:focus {
	padding: 12px 10px 9px;
    border: 1px solid #ccc;
}

.field-radio div {
	display: block;
	width: 50%;
	float: left;
	margin-bottom: 10px;
	padding: 12px 10px 9px;
	font-size: 1.0em;
	color: #444;
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
}

.field-radio div:nth-child(2) {
	border-left: 1px solid #ccc;
}
	
.field-radio div:nth-child(3) {
	border-right: 1px solid #ccc;
}

.field input.buttons {
	display: block;
	margin: auto;
	margin-top: 20px;
	padding: 12px 10px 10px;
	background-color: #29506d;
	color: #fff;
	letter-spacing: 1px;
	box-shadow: 2px 2px 4px #777;
}

.btn-back {
	margin-top: 20px;
	margin-left: 20px;
	padding: 12px 10px 10px;
	color: #777;
	text-align: center;
	letter-spacing: 1px;
}

.btn-back:hover {
	color: #ff0000;
}

.field input.buttons:hover {
	background-color: #fff;
	padding: 11px 10px 9px;
	color: #29506d;
	border: 2px solid #29506d;
	font-weight: bolder;
}

.field input.button_delete {
	background-color: #ff0000;
}

.field input.button_delete:hover{
	color: #ff0000;
	padding: 11px 10px 9px;
	background-color: #fff;
	border: 2px solid #ff0000;
}

.terms {
	width: 100%;
	max-width: 300px;
	margin: auto;
	padding-top: 30px;
	color: #777;
}

.links {
	padding-top: 15px;
	color: #777;
}

.links a, footer a {
	display: block;
	color: blue;
}

.terms a {
	color: blue;
}


/************ FROM-SEARCH **************************************************************************************/

.search {
	height: auto;
	border: 1px solid #ccc;
	background-color: #fff;
}

.search-fields {
	display: flex;
}	

.search p {
	display: none;
}

.search select {
	width: 80%;
	padding: 10px 4px 7px;	
	border: 1px solid #eee;
	font-size: .9em;
	color: #777;
}

.search input {
	width: 100%;
	padding: 6px 4px 4px;
	background-color: #fff;
	border: 1px solid #ccc;
	background-image: url('img/lupa.png');
	background-position: right;
	background-repeat: no-repeat;
	background-size: 50px;
}

.search span {
	display: none;
}

/************ TITLE-PAGE **************************************************************************************/

.title-page {
	padding: 10px 0px;
	text-align: center;
}

.title-page h2 {
	margin-bottom: 16px;
	padding-bottom: 4px;
	border-bottom: 1px solid #ccc;
}

.title-page .btn {
	display: flex;
	justify-content: center;
}

.title-page .btn a {
	margin-right: 10px;
	padding: 10px 10px 10px 10px ;
	border: 1px solid #ccc;
	border-radius: 4px;
	text-align: center;
	background-color: #fff;	
	color: #777;
	cursor: pointer;
	box-shadow: 2px 2px 4px #777;
}

.title-page .btn a:hover {
	background-color: #777;
	color: #fff;
	border: 1px solid #fff;
}

.title-page .btn a.btn-new {
	background-color: #2fa9ff;
	color: #fff;
}

.title-page .btn a span {
 display: none;	
}

.title-page .btn a.btn-new span {
	font-size: 1.0em;
}

.title-page .btn a.btn-return span {
	font-size: 1.0em;
}

.title-page .btn a.btn-new:hover {
	background-color: #fff;
	color: #2fa9ff;
	border: 1px solid  #2fa9ff;
}

.title-page .btn a.btn_inactive:hover {
	background-color: #2fa9ff;
	color: #fff;
	border: 1px solid #fff;
}

.title-page .btn a.btn_inactive {
	opacity: .5;
	cursor: default;
}

.title-page .btn a.btn_inactive:hover {
	background-color: #fff;	
	color: #777;
	border: 1px solid #ccc;
}

/************ REGISTER PRODUCT IMAGE **************************************************************************************/

.manage_product_images {
	display: block;
	margin: auto;
	margin-top: 20px;
	padding: 12px;
	text-align: center;
	background-color: #29506d;
	color: #fff;
	letter-spacing: 1px;
	box-shadow: 2px 2px 4px #777;
	border-radius: 4px;
}

.register_product_images {
	display: flex;
	flex-wrap: wrap; 
	justify-content: space-between;
}

.register_product_image {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 148px; 
	height: auto;
	margin: 12px 2px;
	border: 1px solid #ddd;
	border-radius: 4px;
}

.register_product_image img {
	width: 100%;
	border: 1px solid #ccc;
	border-radius: 4px;
}

.register_product_image a {
	width: 100%;
	padding: 12px 2px;
	text-align: center;
	background-color: #fff;
	color: red;
	border: 1px solid red;
	border-radius: 4px;
}

.ooops {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 400px;
	text-align: center;
}

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

	.container {
		padding-top: 100px;
	}

	/************ BOX **************************************************************************************/

	.box {
		padding: 95px 24px 60px;
	}
	
	.box a.arrow-return {
		display: none;
	}


	/************ CONTAINER **************************************************************************************/
	

	/************ BREADCRUMB **************************************************************************************/

	.breadcrumbs {
		padding-bottom: 20px;
	}
	
	/************ FORM-SEARCH **************************************************************************************/

	.search {
		max-width: 700px;
		padding: 6px 0px;

	}

	.search p {
		display: block;
		width: 15%;	
		padding: 10px;
		color: #777;
	}

	.search select {
		width: 30%;
		padding: 10px 10px 7px;	
		font-size: 1em;
	}

	.search input {
		width: 45%;
		padding: 12px 10px 8px;
		background-image: none;
	}

	.search span {
		display: inline;
		float: right;
		font-size: 1.4em;
		width: 10%;	
		padding: 10px 10px 0px 10px;
	}

	/************ TITLE-PAGE **************************************************************************************/

	.title-page {
		padding: 10px 0px 4px;
		text-align: left;
		border-bottom: 1px solid #ccc;
	}

	.title-page h2 {
		margin-top: 10px;
		padding-bottom: 0px;
		border-bottom: 0px solid #ccc;
	}

	.title-page .btn {
		justify-content: flex-end;
	}
	
	.title-page .btn a {
		margin-right: 10px;
		padding: 10px 16px 10px 10px ;
		border: 1px solid #ccc;
		border-radius: 4px;
		text-align: center;
		background-color: #fff;	
		color: #777;
		cursor: pointer;
		box-shadow: 2px 2px 4px #777;
	}

	.title-page .btn a span {
		display: inline;
	}
	
	.title-page .btn a.btn-new span {
		font-size: 1.0em;
	}

	.title-page .btn a.btn-return span {
		font-size: 1.0em;
	}
	
	/************ LIST **************************************************************************************/
	
	.all-line {
		padding: 0px 20px;
	}
	
	.title {
		display: block;
		padding: 16px 20px 14px 20px;	
	}

	.line {
		padding: 16px 4px 14px 4px;
	}

	.checkbox-list {
		width: 40px;
		float: left;
	}
	
	.title-span {
		display: none;
	}

	.icon-list {
		display: flex;
	}

	.list-alt {
		margin-top: 8px;
		margin-right: 8px;
		padding: 10px 6px 4px;
		color: #777;
	}

	.list-exc {
		margin-top: 3px;
		padding: 10px 0px 4px;
		color: red;
		font-size: 1.8em;
	}

	
}

@media screen and (min-width:920px) {
	
	.container {
		padding-top: 61px;
	}

	
/************ BOX **************************************************************************************/

	.box {
		padding: 80px 24px 60px;
		flex-direction: row;
	}

	.info {
		display: block;
		width: 40%;
		padding: 80px 20px 20px;	
		margin-right: 2%;
		border: 1px solid #ccc;
		border-radius: 5px;
	}

	.box h2 {
		margin-top: 40px;
	}


	
	/************ FORM **************************************************************************************/
	
	.form-principal {
		max-width: 600px;
		margin: auto;
		padding-top: 40px;
	}

	.field input.buttons {
		width: 200px;
	}
		
	.btn-back {
		width: 200px;
	}
		
}