@import url('https://fonts.googleapis.com/css2?family=Red+Hat+Mono:wght@300;378&family=Source+Sans+Pro:ital@1&family=Zen+Antique&display=swap');
*{
  font-family: 'Red Hat Mono', monospace;
}
:root{
  --First-color:#161624;
  --Second-color:#f2363c;
  --third-color:#573b8a;
}
html, body {
  height: 100%;
}
body {
 position: relative;
 margin: 0;
} 
/* ------ ALERTS ------ */
.alert_container .spacer {
  margin-bottom: 1rem;
}
.alert_container .alert {
  border-radius: 0.125rem;
  padding: 0.5rem;
  color: black;
}
.alert_container .alert_icon {
  margin: 0 1rem;
}
.alert_container .alert_text {
  display: inline-block;
  font-size: 1.125rem;
}
.alert_container .alert_close {
  float: right;
  padding: 0 0.75rem;
  color: black;
  background-color: transparent;
  border: 0;
  cursor: pointer;
}
.alert_container button.alert_close {
  width: auto;
  display: inline-block;
  vertical-align: middle;
}
.alert_container .alert_close span {
  font-size: 1rem;
}
.alert_container .alert_primary {
  background-color: #ccf2ff;
}
.alert_container .alert_warning {
  background-color: #ffff99;
}
.alert_container .alert_error {
  background-color: #ffb3b3;
}
.alert_container .alert_success {
  background-color: #d6f5d6;
}
/* ------ FRONT PAGE ------ */
body.front{
  margin: 0;
  padding: 0;
  background: #1d243d;
  width: 100%;
  height: 90%;
  overflow: hidden;
}
.bubbles li {
  position: absolute;
  list-stye: none;
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 30%;
  bottom: -150px;
  background: rgba(255, 255, 255, .2);
  animation: animate 25s infinite linear;
}
.bubbles li:nth-child(1) {
  left: 25%;
  width: 80px;
  height: 80px;
  animation-delay: 0;
}
.bubbles li:nth-child(2) {
  left: 10%;
  width: 20px;
  height: 20px;
  animation-delay: 2s;
  animation-duration: 12s;
}
.bubbles li:nth-child(3) {
  left: 70%;
  width: 20px;
  height: 20px;
  animation-delay: 4s;
}
.bubbles li:nth-child(4) {
  left: 40%;
  width: 60px;
  height: 60px;
  animation-delay: 0s;
  animation-duration: 18s;
}
.bubbles li:nth-child(5) {
  left: 65%;
  width: 20px;
  height: 20px;
  animation-delay: 0s;
}
.bubbles li:nth-child(6) {
  left: 75%;
  width: 110px;
  height: 110px;
  animation-delay: 3s;
}
.bubbles li:nth-child(7) {
  left: 35%;
  width: 150px;
  height: 150px;
  animation-delay: 7s;
}
.bubbles li:nth-child(8) {
  left: 50%;
  width: 25px;
  height: 25px;
  animation-delay: 15s;
  animation-duration: 45s;
}
.bubbles li:nth-child(9) {
  left: 20%;
  width: 15px;
  height: 15px;
  animation-delay: 2s;
  animation-duration: 35s;
}
.bubbles li:nth-child(10) {
  left: 85%;
  width: 150px;
  height: 150px;
  animation-delay: 0s;
  animation-duration: 11s;
}
.bubbles li:nth-child(11) {
  bottom: -350px;
  left: 15%;
  width: 80px;
  height: 80px;
  animation-delay: 0;
}
.bubbles li:nth-child(12) {
  bottom: -350px;
  left: 12%;
  width: 20px;
  height: 20px;
  animation-delay: 2s;
  animation-duration: 12s;
}
.bubbles li:nth-child(13) {
  bottom: -350px;
  left: 70%;
  width: 20px;
  height: 20px;
  animation-delay: 4s;
}
.bubbles li:nth-child(14) {
  bottom: -350px;
  left: 60%;
  width: 60px;
  height: 60px;
  animation-delay: 0s;
  animation-duration: 18s;
}
.bubbles li:nth-child(15) {
  bottom: -350px;
  left: 65%;
  width: 20px;
  height: 20px;
  animation-delay: 10s;
}
.bubbles li:nth-child(16) {
  bottom: -350px;
  left: 85%;
  width: 110px;
  height: 110px;
  animation-delay: 13s;
}
.bubbles li:nth-child(17) {
  bottom: -350px;
  left: 25%;
  width: 150px;
  height: 150px;
  animation-delay: 17s;
}
.bubbles li:nth-child(18) {
  bottom: -350px;
  left: 50%;
  width: 25px;
  height: 25px;
  animation-delay: 15s;
  animation-duration: 45s;
}
.bubbles li:nth-child(19) {
  bottom: -350px;
  left: 20%;
  width: 15px;
  height: 15px;
  animation-delay: 2s;
  animation-duration: 35s;
}
.bubbles li:nth-child(20) {
  bottom: -350px;
  left: 95%;
  width: 150px;
  height: 150px;
  animation-delay: 0s;
  animation-duration: 45s;
}
@keyframes animate {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 1;
    border-radius: 30%;
  }
  100% {
    transform: translateY(-1000px) rotate(720deg);
    opacity: 0;
    border-radius: 50%;
  } 
}
.front .main{
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 350px;
  height: 600px;
  background-color: #161624aa;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 5px 20px 50px #000;
  margin: auto;
  justify-content: center;
}
#chk{
  display: none;
}
.login{
  position: relative;
  width:100%;
  height:500px;
}
.user-box {
  position: relative;
  width :60%;
  margin:0px auto;
}
.user-box label#consent {
  position: relative;
  display: inline-block;
  padding-left: 20px;
  margin-bottom: 0;
  font-weight: 400;
  vertical-align: middle;
  cursor: pointer;
  pointer-events: all;
}
.user-box label#consent input[type=checkbox] {
  position: absolute;
  margin-top: 4px\9;
  margin-left: -20px;
}
button{
	width: 60%;
	height: 40px;
	margin: 10px auto;
	justify-content: center;
	display: block;
	color: #fff;
	background: #573b8a;
	font-size: 1em;
	font-weight: bold;
	margin-top: 10px;
	outline: none;
	border: none;
	border-radius: 5px;
	transition: .2s ease-in;
	cursor: pointer;
}
button:hover{
  background: #6d44b8;
}
.signup{
  height: 600px;
  min-height: 100px;
  background: #eee;
  border-radius: 60% / 10%;
  transform: translateY(-130px);
  transition: .8s ease-in-out;
}
.signup > form > .user-box,
.signup > form > button {
  display: none;
}
#chk:checked ~ .signup{
  transform: translateY(-530px);
}
#chk:checked ~ .signup > form > .user-box,
#chk:checked ~ .signup > form > button {
  display: block;
}
#chk:checked ~ .login > form > .user-box,
#chk:checked ~ .login > form > button {
  display: none;
}
#chk:checked ~ .signup label{
  transform: scale(1);
}
#chk:checked ~ .login .log{
  transform: scale(.6);
  margin-top:10px;
}
.user-box label {
  position: absolute;
  top:0px;
  left: 0px;
  font-size: 16px;
  color: #fff;
  pointer-events: none;
  transition: .5s;
}
.user-box input {
  padding: 10px 0;
  font-size: 16px;
  color: #fff;
  margin-bottom: 30px;
  border: none;
  border-bottom: 1px solid #fff;
  outline: none;
  background: transparent;
}
.user-box input:focus ~ label,
.user-box input:valid ~ label {
  top: -20px;
  left: 0;
  color: #f2363c;
  font-size: 12px;
  font-weight:bold;
}
label[for="chk"] {
	font-size: 2.3em;
	justify-content: center;
	display: flex;
	font-weight: bold;
	cursor: pointer;
	transition: .5s ease-in-out;
} 
.log{
  color:#fff;
	margin: 40px;
}
.sig{
	margin: 80px;
}
.signup label , .signup input{
  color:#573b8a;
}
.signup input{
  border-color:#573b8a;
}
footer {
  margin-top: 5em;
  width: 100%;
  position: relative;
  text-align: center;
}
span {
  font-size: 1.5em;
  color: #777777;
  font-family: "Nunito Sans", sans-serif;
}
.UnstyledLink {
  text-decoration: none;
}
/* ------ MANAGMENT ------ */
/* NAVBAR */
.sidenav-container {
  position: relative;
  width: 112px;
  float: left;
  text-align: center;
  height: 100%;
  transition: all 0.3s ease-in-out;
  border: 1px solid silver;
}
.sidenav-container aside h1 {
  color: white;
  border-radius: 100%;
  width: 45px;
  height: 45px;
  margin: 25px auto;
  background: #0FA0EB;
}
.sidenav-container aside ul {
  list-style: none;
  padding-left: 0;
}
.sidenav-container aside ul li {
  padding: 20px 0 10px 0;
  cursor: pointer;
}
.sidenav-container aside ul li:hover {
  border-left: 3px solid #0FA0EB;
  background: ghostwhite;
}
.sidenav-container aside ul li:hover i {
  color: #0FA0EB !important;
}
.sidenav-container aside ul li a {
  text-decoration: none;
  color: #858E99;
}
.sidenav-container aside ul li .nav-item {
  display: inline-block;
  width: 40px;
  overflow: hidden;
  height: 20px;
  transition: width 0.3s ease-in-out;
  white-space: nowrap;
  color: #858E99;
}
.sidenav-container aside ul li .nav-item i {
  float: left;
  position: relative;
  color: #858E99;
  font-size: 20px;
}
.sidenav-container aside ul li .nav-item span {
  opacity: 0;
  transition: all 0.2s ease-in-out;
  font-size: 20px;
}
.sidenav-container aside ul .active {
  border-left: 3px solid #0FA0EB;
  background: ghostwhite;
}
.sidenav-container aside ul .active i {
  color: #0FA0EB !important;
}
.sidenav-container aside ul:nth-child(3) {
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
}
.sidenav-container:hover {
  width: 300px;
  transition: all 0.3s ease-in-out;
}
.sidenav-container:hover .nav-item {
  display: inline-block;
  width: 200px;
  overflow: hidden;
  height: 30px;
  transition: all 0.3s ease-in-out;
}
.sidenav-container:hover .nav-item i {
  float: left;
}
.sidenav-container:hover .nav-item span {
  opacity: 1;
}
/* PAGE */
main {
  float: left;
  width: calc(100% - 114px);
  height: 100%;
  transition: all 0.3s ease-in-out;
}
body main #blackout-on-hover {
  transition: opacity 0.3s ease-in-out;
  opacity: 0;
}
body main header {
  position: relative;
  background: #0FA0EB;
  width: 100%;
  height: 264px;
}
body main header h2 {
  position: absolute;
  bottom: 0;
  color: white;
  font-size: 34px;
  left: 20px;
}
body main header nav {
  position: fixed;
  right: 20px;
  top: 10px;
  padding: 25px;
  font-weight: 100;
  color: white;
}

body div.sidenav-container:hover ~ main {
  width: calc(100% - 302px);
  transition: all 0.3s ease-in-out;
}
main h1 {
  text-align: center;
}
/* Tabels */
#Customers table,
#Subscriptions table {
  border: 1px solid #ccc;
  border-collapse: collapse;
  margin: 0;
  padding: 0;
  width: 100%;
  table-layout: fixed;
}
#Customers table caption,
#Subscriptions table caption {
  font-size: 1.5em;
  margin: .5em 0 .75em;
}
#Customers table tr,
#Subscriptions table tr {
  background-color: #f8f8f8;
  border: 1px solid #ddd;
  padding: .35em;
}
#Customers table th,
#Customers table td,
#Subscriptions table th,
#Subscriptions table td {
  padding: .625em;
  text-align: center;
}
#Customers table th,
#Subscriptions table th {
  font-size: .85em;
  letter-spacing: .1em;
  text-transform: uppercase;
}
@media screen and (max-width: 600px) {
  #Customers table,
  #Subscriptions table {
    border: 0;
  }
  #Customers table caption,
  #Subscriptions table caption {
    font-size: 1.3em;
  }
  #Customers table thead,
  #Subscriptions table thead {
    border: none;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }
  #Customers table tr,
  #Subscriptions table tr {
    border-bottom: 3px solid #ddd;
    display: block;
    margin-bottom: .625em;
  }
  #Customers table td,
  #Subscriptions table td {
    border-bottom: 1px solid #ddd;
    display: block;
    font-size: .8em;
    text-align: right;
  }
  #Customers table td::before,
  #Subscriptions table td::before {
    /*
    * aria-label has no advantage, it won't be read inside a table
    content: attr(aria-label);
    */
    content: attr(data-label);
    float: left;
    font-weight: bold;
    text-transform: uppercase;
  } 
  #Customers table td:last-child,
  #Subscriptions table td:last-child {
    border-bottom: 0;
  }
}
/* Create new form */
form#Dinero_add_subscription {
  width: 400px;
  display: flex;
  flex-flow: column wrap;
  align-items: center;
  justify-content: center;
}
form#Dinero_add_subscription div,
form#Dinero_add_subscription label,
form#Dinero_add_subscription input,
form#Dinero_add_subscription textarea {
  width: 100%;
}

form#Dinero_add_subscription .field:nth-of-type(2) {
  margin: 16px 0;
}

form#Dinero_add_subscription label, 
form#Dinero_add_subscription input, 
form#Dinero_add_subscription textarea {
  padding: 8px;
}

form#Dinero_add_subscription label, [placeholder] {
  color: #555;
}

form#Dinero_add_subscription label i {
  margin: 0 10px 0 0;
}

form#Dinero_add_subscription .field:focus-within label {
  color: #000;
  letter-spacing: 2px;
}

form#Dinero_add_subscription input,
form#Dinero_add_subscription textarea {
  background: rgba(255, 255, 255, 0.5);
  border: none;
  border-radius: 4px;
  box-shadow: 0 8px 6px -6px #555;
}
form#Dinero_add_subscription input:focus,
form#Dinero_add_subscription textarea:focus {
  background: white;
  box-shadow: none;
}

form#Dinero_add_subscription textarea {
  resize: none;
}
form#Dinero_add_subscription textarea::-webkit-scrollbar {
  width: 0;
}

form#Dinero_add_subscription button {
  background: #2f4ad0;
  margin: 16px 0 50px 0;
  padding: 8px 16px;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  box-shadow: 0 8px 6px -6px #555;
}
form#Dinero_add_subscription button:hover {
  letter-spacing: 2px;
  box-shadow: none;
}
@media (max-width: 425px) {
  form#Dinero_add_subscription {
    width: 100%;
  }
}