/* This CSS is for Stand WebApp, version 0.1.0. */
/* -------------------------- Basisopmaak --------------------------------- */
html {
  box-sizing: border-box; }

body {
  box-sizing: border-box;
  margin: 0px;
  padding: 0px;
  font-family: verdana, sans-serif;
  background-color: #E5E2DD; }

#container {
  background-color: #E5E2DD;
  margin: auto;
  width: 980px; }

.header {
  padding-top: 30px;
  padding-bottom: 30px;
  background-color: #A23070;
  color: white;
  margin-bottom: 25px;
  box-shadow: 0 6px 12px 0 rgba(0, 0, 0, 0.2); }

.header_btnSidemenu {
  display: none;
  float: left;
  font-size: 50px;
  padding-left: 30px;
  cursor: pointer; }

.header_btnSidemenu.active {
  display: block; }

.header_caption {
  float: center;
  text-align: center;
  font-size: 70px; }

table, tr, td {
  border-spacing: 0px;
  padding: 0px; }

/* -------------------------- CARD: Generiek --------------------------------- */
div.card {
  display: none;
  padding: 0px;
  background-color: white;
  color: black;
  border-radius: 25px;
  margin-left: 20px;
  margin-right: 20px;
  margin-top: 10px;
  margin-bottom: 25px;
  box-shadow: 0 8px 12px 0 rgba(0, 0, 0, 0.2);
  transition: 0.3s; }

.card.show {
  display: block !important; }

div.card:hover {
  box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.2); }

div.card_header {
  padding-top: 25px;
  padding-bottom: 25px;
  font-size: 50px;
  background-color: #A23070;
  color: white;
  border-top-left-radius: 25px;
  border-top-right-radius: 25px; }

div.card_body {
  box-sizing: border-box; }

div.card_footer {
  color: black;
  padding-bottom: 25px;
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
  border-bottom-left-radius: 25px;
  border-bottom-right-radius: 25px; }

/* ---------------------- ID specifiek : Inloggen ---------------------- */
#inlog_header {
  background-color: white;
  color: #414141;
  text-align: center;
  border-bottom: 2px solid #F4F4F4; }

.btnInlog {
  cursor: pointer;
  font-size: 50px;
  font-weight: 500;
  background-color: #3B82FF;
  color: white;
  padding: 20px;
  width: 400px;
  /* ### TODO: calc */
  margin-top: 20px;
  margin-bottom: 20px;
  margin-left: auto;
  margin-right: auto;
  text-align: center; }

/* ---------------------- ID specifiek : Huidige stand ---------------------- */
#huidigestand {
  color: #414141;
  padding-top: 25px;
  padding-bottom: 25px;
  margin: auto;
  text-align: center; }

#huidigeStand_bedrag {
  font-size: 150px;
  font-weight: 700; }

#huidigeStand_voorwie {
  font-size: 70px;
  font-weight: 500; }

#huidigeStand_gelijk {
  font-size: 70px;
  font-weight: 700;
  padding-top: 50px;
  padding-bottom: 50px; }

#plusknop {
  padding-right: 20px;
  font-size: 150px;
  color: grey; }

#plusknop.active {
  cursor: pointer;
  color: #3B82FF; }

/* ---------------------- ID specifiek : Invoeren ---------------------- */
#invoeren {
  padding-top: 25px; }

#invoeren_header {
  box-sizing: border-box;
  padding-left: 25px;
  width: 820px;
  height: 80px;
  font-size: 60px;
  display: inline-block; }

#wisselgebruiker {
  box-sizing: border-box;
  cursor: pointer;
  font-size: 70px;
  align: right;
  width: 100px;
  height: 80px; }

.invoerknop {
  box-sizing: border-box;
  cursor: pointer;
  color: grey; }

.invoerknop.active {
  color: #3B82FF; }

#invoeren_datum {
  box-sizing: border-box;
  text-align: center;
  font-size: 55px;
  color: #414141; }

#invoeren_bedrag {
  box-sizing: border-box;
  text-align: center;
  font-size: 80px;
  color: #414141; }

#Invoeren_voor {
  box-sizing: border-box;
  width: 660px;
  text-align: center;
  font-size: 55px;
  color: #414141;
  margin-left: 25px;
  margin-right: 25px;
  border-top: none;
  border-left: none;
  border-right: none;
  border-bottom: 1px solid grey; }

#invoeren_cancel {
  color: #FF234F;
  cursor: pointer;
  font-size: 110px;
  padding-bottom: 25px; }

#invoeren_ok {
  color: grey;
  cursor: default;
  font-size: 110px;
  font-weight: 600;
  padding-bottom: 25px; }

#invoeren_ok.active {
  color: green;
  cursor: pointer;
  font-size: 110px; }

/* -------------------  Modal voor bestemmingen lijst ------------------------------ */
.invoer_bestemming {
  text-align: left;
  font-size: 50px;
  background-color: white;
  color: #414141;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 25px;
  padding-bottom: 25px;
  border-top: 1px solid grey;
  border-bottom: 1px solid grey; }

/* -------------------  Specifiek: Recente uitgaven ------------------------------ */
#recenteuitgaven_header {
  text-align: center; }

.accordion {
  color: black;
  cursor: pointer;
  width: 100%;
  padding-top: 20px;
  padding-bottom: 20px;
  text-align: left;
  outline: none;
  font-size: 35px;
  border-top: 1px solid grey;
  border-bottom: 1px solid grey; }

div.accordion:after {
  font-size: 30px;
  color: black;
  float: right;
  margin: 5px; }

div.panel {
  display: none;
  width: 100%;
  background-color: white;
  border-collapse: collapse;
  margin-top: 10px;
  margin-bottom: 10px; }

div.panel.show {
  display: block !important; }

/* ----------------------- inhoud van de panels ------------------------- */
.uitgavetabel {
  border-collapse: collapse;
  text-align: left; }

.uitgaveregel {
  display: none;
  color: #414141;
  font-weight: 300;
  background-color: white; }

.uitgaveregel.show {
  display: block; }

.uitgaveDetailRegel {
  display: none;
  width: 940px;
  font-size: 20px;
  color: #414141;
  background-color: #E9f4ff;
  margin-bottom: 5px; }

.uitgaveDetailRegel.show {
  display: block; }

.uitgaveregel_gereset {
  display: none;
  color: grey;
  background-color: white;
  font-style: italic;
  font-weight: 300; }

.uitgaveregel_gereset.show {
  display: block; }

.uitgaveDetailRegel_gereset {
  display: none;
  width: 940px;
  font-size: 20px;
  font-style: italic;
  font-weight: 300;
  color: grey;
  background-color: #E9f4ff;
  margin-bottom: 5px; }

.uitgaveDetailRegel_gereset.show {
  display: block; }

.resetregel_laatste {
  width: 815px;
  color: white;
  background-color: #C6D8FF;
  border-radius: 25px;
  padding-bottom: 5px;
  margin-left: 75px;
  margin-top: 10px;
  margin-bottom: 10px; }

i.uitgave_icon {
  color: #3B82FF;
  font-size: 50px;
  vertical-align: middle;
  margin-left: 25px;
  margin-right: 25px; }

.resetregel_eerdere {
  width: 815px;
  color: white;
  background-color: grey;
  border-radius: 25px;
  padding-bottom: 10px;
  margin-left: 75px;
  margin-top: 10px;
  margin-bottom: 10px; }

.uitgavereset {
  font-size: 50px;
  text-align: center;
  vertical-align: middle; }

#resetUndoKnop {
  width: 120px;
  font-size: 70px;
  text-align: center;
  vertical-align: middle;
  color: white;
  cursor: pointer; }

.uitgave {
  width: 740px;
  max-width: 640px;
  padding-left: 100px;
  font-size: 40px;
  vertical-align: middle;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; }

.uitgavebedrag {
  width: 200px;
  font-size: 70px;
  font-weight: 500;
  padding-right: 50px;
  text-align: right; }

.uitgaveDetail {
  width: 710px;
  padding-left: 100px;
  padding-bottom: 10px;
  font-size: 30px;
  vertical-align: middle; }

.uitgaveDetailActie {
  width: 180px;
  padding-right: 50px;
  text-align: right;
  vertical-align: bottom; }

#DeleteKnop {
  color: #FF234F;
  font-size: 70px;
  padding-bottom: 10px; }

/* --------------------  Modal confirm ---------------------- */
#confirmContent {
  padding: 20px;
  color: #414141;
  background-color: white;
  font-size: 70px;
  text-align: center;
  vertical-align: middle; }

#confirmCancelBtn {
  color: #FF234F;
  cursor: pointer;
  font-size: 100px; }

#confirmOkBtn {
  color: green;
  cursor: pointer;
  font-size: 100px; }

/* --------------------  Modal uitgave details ---------------------- */
/*
#uitgaveDetailsContent {
	padding: 20px;
	color: $Grey_dark;
	background-color: $Wit;
	font-size: 30px;
	text-align: left;
	vertical-align: middle;
}

#uitgaveDeleteBtn {
    color: $Cancel_rood;
	cursor: pointer;
	font-size: 110px;
}

#uitgaveOkBtn {
    color: $OK_groen;
	cursor: pointer;
	font-size: 110px;
}

*/
/* --------------------  Specifiek sidemenu ---------------------- */
.overlay {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #222323;
  overflow-x: hidden;
  transition: 0.3s; }

.sidemenu_close {
  position: absolute;
  top: 20px;
  right: 45px;
  color: white;
  font-size: 80px !important; }

.sidemenu_account_icon {
  vertical-align: middle;
  color: #818181;
  height: 70px; }

.sidemenu_user {
  padding-left: 25px;
  padding-top: 120px;
  padding-bottom: 70px;
  font-size: 50px;
  color: white;
  background-color: #111111;
  text-align: left;
  vertical-align: middle; }

.sidemenu_function {
  padding: 25px;
  text-align: left;
  text-decoration: none;
  font-size: 40px;
  color: white;
  background-color: #222323;
  display: block;
  border-top: solid 3px #2D2E2E;
  border-bottom: solid 3px black; }

.sidemenu_version {
  font-size: 20px;
  color: #818181;
  text-align: left;
  padding: 25px; }

.sidemenu_function:hover, .sidemenu_function:focus {
  color: #3B82FF;
  border-left: 3px solid #3B82FF;
  padding-left: 22px; }

/* -------------------------- Pinpad ------------------------ */
/* The Modal (background) */
.modal {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 1;
  /* Sit on top */
  padding-top: 100px;
  /* Location of the box */
  padding-bottom: 100px;
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  background-color: black;
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4);
  /* Black w/ opacity */ }

/* Modal Content */
.modal-content {
  margin: auto;
  padding: 0px;
  width: 724px;
  padding-bottom: 200px; }

#keypad {
  box-sizing: border-box;
  border: 1px solid #414141;
  border-collapse: collapse; }

#numBox {
  box-sizing: border-box;
  width: 720px;
  height: 150px;
  text-align: right;
  vertical-align: middle;
  padding-right: 25px;
  font-size: 90px;
  font-weight: 500;
  color: #414141;
  background-color: white;
  border: 1px solid #414141;
  overflow: hidden;
  border-collapse: collapse; }

.numKey {
  width: 140px;
  height: 160px;
  background-color: white;
  color: #414141;
  text-align: center;
  font-size: 80px;
  font-weight: 200;
  cursor: pointer;
  border: 1px solid #414141; }

.numKey:active, .numKey:hover {
  background-color: #92EE8E; }

.numDel {
  width: 140px;
  height: 160px;
  background-color: white;
  color: grey;
  font-weight: 500;
  text-align: center;
  cursor: pointer;
  border: 1px solid #414141;
  border-collapse: collapse; }

.numOk {
  width: 140px;
  height: 160px;
  background-color: white;
  color: green;
  text-align: center;
  cursor: pointer;
  border: 1px solid #414141;
  border-collapse: collapse; }

.numOk:active, .numOk:hover {
  background-color: #92EE8E; }

/*# sourceMappingURL=stand.css.map */