@tailwind base;
@tailwind components;
@tailwind utilities;

label { cursor: pointer; }

.field_with_errors label {
  @apply text-red-500;
}
.field_with_errors .input-field {
  @apply border-red-500;
}

.slide-in-right {
  transform: translateX(100%);
  -webkit-transform: translateX(100%);
  animation: slide-in 0.3s forwards;
  -webkit-animation: slide-in 0.3s forwards;
}

@keyframes slide-in-right {
  100% { transform: translateX(0%); }
}

@-webkit-keyframes slide-in-right {
  100% { -webkit-transform: translateX(0%); }
}

.slide-in {
  transform: translateX(-100%);
  -webkit-transform: translateX(-100%);
  animation: slide-in 0.3s forwards;
  -webkit-animation: slide-in 0.3s forwards;
}
@keyframes slide-in {
  100% { transform: translateX(0%); }
}

@-webkit-keyframes slide-in {
  100% { -webkit-transform: translateX(0%); }
}

.slide-out {
  animation: slide-out 0.2s forwards;
  -webkit-animation: slide-out 0.2s forwards;
}

@keyframes slide-out {
  0% { transform: translateX(0%); }
  100% { transform: translateX(-100%); }
}

@-webkit-keyframes slide-out {
  0% { -webkit-transform: translateX(0%); }
  100% { -webkit-transform: translateX(-100%); }
}

.slide-out-right {
  animation: slide-out-right 0.5s forwards;
  -webkit-animation: slide-out-right 0.5s forwards;
}

@keyframes slide-out-right {
  0% { transform: translateX(0%); }
  100% { transform: translateX(150%); }
}

@-webkit-keyframes slide-out-right {
  0% { -webkit-transform: translateX(0%); }
  100% { -webkit-transform: translateX(150%); }
}

@layer components {}

.radial-progress {
  position: relative;
  display: inline-grid;
  height: var(--size);
  width: var(--size);
  place-content: center;
  border-radius: 9999px;
  background-color: transparent;
  vertical-align: middle;
  box-sizing: content-box;
  --value: 0;
  --size: 5rem;
  --thickness: calc(var(--size) / 10);
}
.radial-progress:before, .radial-progress:after {
  position: absolute;
  border-radius: 9999px;
  content: "";
}
.radial-progress:before {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: radial-gradient(farthest-side,currentColor 98%,#0000) top/var(--thickness) var(--thickness) no-repeat,conic-gradient(currentColor calc(var(--value) * 1%),#0000 0);
  -webkit-mask: radial-gradient(farthest-side,#0000 calc(99% - var(--thickness)),#000 calc(100% - var(--thickness)));
  mask: radial-gradient(farthest-side,#0000 calc(99% - var(--thickness)),#000 calc(100% - var(--thickness)));
}
.radial-progress:after {
  inset: calc(50% - var(--thickness)/2);
  transform: rotate(calc(var(--value) * 3.6deg - 90deg)) translate(calc(var(--size)/2 - 50%));
  background-color: currentColor;
}

#edit_income_form {
  display: none;
}
#edit_income:checked ~ #budget_overview {
  display: none;
}
#edit_income:checked ~ #edit_income_form {
  display: block;
}

div.dropdown + ul.dropdown {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  transition: all 0.5s ease;
  display: none;
  right: 0;
}
div.dropdown:hover + ul.dropdown,
div.dropdown + ul.dropdown:hover {
  visibility: visible;
  opacity: 1;
  display: block;
}

.add_expense {
  display: none;
}
.add_expense:checked + dialog {
  display: block;
}

.file-field {
  @apply p-0 cursor-pointer file:cursor-pointer file:mr-4 file:py-2 file:px-4 file:rounded-r-md file:border-0 file:text-sm file:font-semibold file:bg-gray-200 file:text-slate-700 hover:file:bg-slate-300
}

.turbo-progress-bar {
  height: 6px;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  background: white;
  border-left: none;
}

.fade-in-no-js {
  animation: fadeInNoJs 5s;
}
@keyframes fadeInNoJs {
  0% { opacity: 0; display:none; }
  100% { opacity: 1; display:block;}
}

input.edit {
  display: none;
}
input.edit ~ .label {
  display: block;
}
input.edit ~ .fields {
  display: none;
}

input.edit:checked ~ .label {
  display: none;
}
input.edit:checked ~ .fields {
  display: block;
}

@media screen and (max-width: 767px) {
  input, select, textarea {
    font-size: 16px !important;
  }
}
svg {
  max-width: 100%;
}
.graphBackground {
  fill: #ffffff !important;
}

.line1 {
  stroke: rgb(16, 142, 233) !important;
  stroke-width: 4px !important;
}
.key1, g .dataPoint1 {
  fill: rgb(16, 142, 233) !important;
}


.line2 {
  stroke: rgb(135, 208, 104) !important;
  stroke-width: 4px !important;
}
.key2, g .dataPoint2 {
  fill: rgb(135, 208, 104) !important;
}

.line3 {
  stroke: rgb(255, 85, 0) !important;
  stroke-width: 4px !important;
}
.key3, g .dataPoint3 {
  fill: rgb(255, 85, 0) !important;
}

.guideLines {
  stroke-dasharray: unset !important;
  stroke: rgb(230, 230, 230) !important;
}
#xAxis {
  stroke: rgba(230, 230, 230, 0) !important;
}
#yAxis {
  stroke: rgb(230, 230, 230) !important;
}
.tooltip-box {
  fill: #fff;
}
.tooltip-box.red {
  stroke: rgb(255, 85, 0) !important;
}
.tooltip-box.green {
  stroke: rgb(135, 208, 104) !important;
}
.tooltip-box.blue {
  stroke: rgb(16, 142, 233) !important;
}
.popup-ball.red {
  fill: rgb(255, 85, 0) !important;
}
.popup-ball.green {
  fill: rgb(135, 208, 104) !important;
}
.popup-ball.blue {
  fill: rgb(16, 142, 233) !important;
}





.pie-chart .key1, .pie-chart .fill1 {
  fill: rgb(220 38 38) !important;
  stroke: rgb(220 38 38) !important;
  stroke-width: 0px;
}
.pie-chart .key2, .pie-chart .fill2 {
  fill: rgb(244 114 182) !important;
  stroke: rgb(244 114 182) !important;
  stroke-width: 0px;
}
.pie-chart .key3, .pie-chart .fill3 {
  fill: rgb(251 146 60) !important;
  stroke: rgb(251 146 60) !important;
  stroke-width: 0px;
}
.pie-chart .key4, .pie-chart .fill4 {
  fill: rgb(56 189 248) !important;
  stroke: rgb(56 189 248) !important;
  stroke-width: 0px;
}
.pie-chart .key5, .pie-chart .fill5 {
  fill: rgb(220 38 38) !important;
  stroke: rgb(220 38 38) !important;
  stroke-width: 0px;
}
.pie-chart .key6, .pie-chart .fill6 {
  fill: rgb(154 52 18) !important;
  stroke: rgb(154 52 18) !important;
  stroke-width: 0px;
}
.pie-chart .key7, .pie-chart .fill7 {
  fill: rgb(37 99 235) !important;
  stroke: rgb(37 99 235) !important;
  stroke-width: 0px;
}
.pie-chart .key8, .pie-chart .fill8 {
  fill: rgb(250 204 21) !important;
  stroke: rgb(250 204 21) !important;
  stroke-width: 0px;
}
.pie-chart .key9, .pie-chart .fill9 {
  fill: rgb(56 189 248) !important;
  stroke: rgb(56 189 248) !important;
  stroke-width: 0px;
}
.pie-chart .key10, .pie-chart .fill10 {
  fill: rgb(156 163 175) !important;
  stroke: rgb(156 163 175) !important;
  stroke-width: 0px;
}
.pie-chart .key11, .pie-chart .fill11 {
  fill: rgb(251 146 60) !important;
  stroke: rgb(251 146 60) !important;
  stroke-width: 0px;
}
.pie-chart .key12, .pie-chart .fill12 {
  fill: rgb(75 85 99) !important;
  stroke: rgb(75 85 99) !important;
  stroke-width: 0px;
}

.pie-chart path + text, .pie-chart path + text + text {
  font-size: 16px;
  display: none;
}
.pie-chart path:hover {
  cursor: pointer;
  stroke-width: 10px;
  stroke-opacity: 0.55;
}
.pie-chart path:hover + text + text,
.pie-chart path:hover + text {
  display: block;
}
/*
 * 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.
 *


 */