ciclos

diff --git a/core/static/stylesheet.css b/core/static/stylesheet.css
index 2236ae3e7e47796eab501a30589462136cd86104..4678276246a05858525d8921fa29b32afd6359c8 100644
--- a/core/static/stylesheet.css
+++ b/core/static/stylesheet.css
@@ -3,7 +3,17 @@  * Simple and minimal css
  */
 
 body {
-    background-color: #F5F7FC;
+    background-color: #D6DDE3;
+}
+
+h1 {
+    color: #090B15;
+}
+
+nav {
+    background-color: white;
+    padding-top: 1.5rem;
+    padding-bottom: 1.5rem;
 }
 
 .main-links-nav {
@@ -14,6 +24,10 @@ }
 
 .main-links-nav li {
     display: inline-block;
+}
+
+.main-links-nav li a.current {
+    color: #003078;
 }
 
 .text-secondary, .text-muted {
@@ -82,6 +96,10 @@ .box .box-header {
     border-bottom: 1px solid #ddd;
 }
 
+.br-5 {
+    border-radius: 5px;
+}
+
 .text-right {
     text-align: right;
 }
@@ -101,3 +119,68 @@
 .w-100 {
     width: 100%;
 }
+
+summary {
+    cursor: pointer;
+}
+
+table thead tr {
+    background-color: #fff;
+}
+
+table thead tr th {
+    text-align: left;
+    padding: 0.3rem 0;
+}
+
+table thead tr th.right {
+    text-align: right;
+}
+
+.wrap-details {
+    margin-bottom: 1.2rem 0;
+}
+
+.wrap-details input[type='checkbox'] {
+    display: none;
+}
+
+.lbl-toggle {
+    display: block;
+    border-bottom: 1px solid #ccc;
+    padding: 1rem;
+    cursor: pointer;
+    transition: all 0.25s ease-out;
+}
+
+.lbl-toggle:hover {
+    background-color: #eee;
+}
+
+.wrap-details-content {
+    max-height: 0px;
+    overflow: hidden;
+    transition: max-height .25s ease-in-out;
+}
+
+.toggle:checked + .lbl-toggle + .wrap-details-content {
+    border: 1px solid #eee;
+    border-radius: 5px;
+    border-top: 0px;
+    border-top-right-radius: 0;
+    border-top-left-radius: 0;
+    max-height: 100vh;
+}
+
+.toggle:checked + .lbl-toggle {
+    border: 1px solid #eee;
+    border-radius: 5px;
+    border-bottom: 0px;
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+}
+
+.wrap-details-content .content-inner {
+    border-bottom: 1px solid rgba(255, 255, 255, .45);
+    padding: .5rem 1rem;
+}




diff --git a/core/templates/layout.html b/core/templates/layout.html
index 26d3ddd73e10ac51cc82f3dd14a70c91aabe45ba..c4a158c87f5e4ecd932cd2a50c79c800333c2cf4 100644
--- a/core/templates/layout.html
+++ b/core/templates/layout.html
@@ -20,39 +20,42 @@ 			{% else %}
 			background: #228800;
 			{% endif %}
 			color: white; font-weight: bold; width: 100%; text-align: center">
-		  {{environment.upper()}} ENVIRONMENT
+		  {{environment.upper()}}
 		</div>
 	{% endif %}
 
-	<nav class=" container">
-		<div class="row">
-			<div class="col-xl-2 mb-15">
-				<a href="/">Bem da Terra</a>
-			</div>
+	<nav class="container-fluid">
+		<div class="container">
+			<div class="row">
+				<div class="col-xl-2 mb-15">
+					<a href="/">Bem da Terra</a>
+				</div>
 
-			<div class="col-xl-6">
-				<ul class="main-links-nav">
-					<li> <a class="mr-5" href="{{ url_for('basic.about') }}">Sobre</a> </li>
-					<li> <a class="mr-5" href="#">Contato</a> </li>
+				<div class="col-xl-6">
+					<ul class="main-links-nav">
+						<li> <a class="mr-5" href="{{ url_for('basic.about') }}">Sobre</a> </li>
+						<li> <a class="mr-5" href="#">Contato</a> </li>
+
+						{% if current_user.is_authenticated %}
+						<li> <a class="mr-5 {{ 'current' if '/orders' in request.path }}" href="{{ url_for('orders.index') }}">Seus Pedidos</a></li>
+
+						<li> <a class="mr-5 {{ 'current' if '/cycles' in request.path }}" href="{{ url_for('cycles.index') }}">Ciclos</a></li>
+						  {% if current_user.is_admin() %}
+						  <li> <a class="mr-5 {{ 'current' if '/reports' in request.path }}" href="{{ url_for('reports.index') }}">Relatórios</a></li>
+						  {% endif %}
+						{% endif %}
+					</ul>
+				</div>
 
+				<div class="col-xl-4">
 					{% if current_user.is_authenticated %}
-					  <li> <a class="mr-5" href="{{ url_for('orders.index') }}">Seus Pedidos</a></li>
-					  <li> <a class="mr-5" href="{{ url_for('cycles.index') }}">Ciclos</a></li>
-					  {% if current_user.is_admin() %}
-					  <li> <a class="mr-5" href="{{ url_for('reports.index') }}">Relatórios</a></li>
-					  {% endif %}
+					  <span>
+						Logado como {{ current_user.username }} — <a href="{{ url_for('auth.logout') }}">Sair</a>
+					  </span>
+					{% else %}
+						<a href="{{ url_for('auth.login') }}">Entrar</a> — <a href="{{ url_for('auth.sign_up') }}">Cadastrar</a>
 					{% endif %}
-				</ul>
-			</div>
-
-			<div class="col-xl-4">
-				{% if current_user.is_authenticated %}
-				  <span>
-					Logado como {{ current_user.username }} — <a href="{{ url_for('auth.logout') }}">Sair</a>
-				  </span>
-				{% else %}
-					<a href="{{ url_for('auth.login') }}">Entrar</a> — <a href="{{ url_for('auth.sign_up') }}">Cadastrar</a>
-				{% endif %}
+				</div>
 			</div>
 		</div>
 	</nav>