/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */

body {
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

.avatar {
	width: 40px;
	height: 40px;
	text-align: center;
	line-height: 36px;
	flex-shrink: 0;
	border: 2px solid #dedede;
	border-radius: 50%;
	color: #fff;
	background: #d5d5d5;
}

.devise-controller {
	max-width: 350px;
	padding: 1rem;
}


.devise-form {
  max-width: 330px;
  padding: 1rem;
}

.devise-form .form-floating:focus-within {
  z-index: 2;
}

.devise-form input[type="email"] {
  margin-bottom: -1px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.devise-form input[type="password"].first {
  border-radius: 0;
}

.devise-form input[type="password"].last {
  margin-bottom: 10px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.bottom-navbar {
  padding-bottom: env(safe-area-inset-bottom) !important;
}

.bottom-navbar a {
  text-decoration: none;
}

.bottom-navbar a.active {
  color: var(--bs-success);
}

.bottom-navbar small {
  margin-top: -5px;
  font-size: 10px;
}

.bottom-navbar .tabs {
  width: 100%;
}

.bottom-navbar .add-expense {
  display: block;
  font-size: 60px;
  position: absolute;
  top: -50px;
  left: 0;
}

.bottom-navbar .add-expense .icon {
  display: block;
}

.bottom-navbar .add-expense-wraper {
  width: 60px;
  height: 20px;
  flex-shrink: 0;
}

body {
  padding-top: 90px;
  padding-bottom: 80px;
}

@media (min-width: 768px) {
  body {
    padding-top: 56px;
    padding-bottom: 0;
  }
}

.category-select .category {
  color: #aaa;
  cursor: pointer;
}

.category-select .selected {
  color: inherit;
}

.add-expense-modal {
  height: calc(100% - var(--bs-modal-margin) * 2);
}
.add-expense-modal .modal-content {
  height: 100%;
}

.add-expense-modal .modal-body {
  height: calc(100% - 65px);
}

.add-expense-modal .modal-content form {
  height: 100%;
}