@tailwind erp;
.container{
  width: 100%;
}
@media (min-width: 480px){
  .container{
    max-width: 480px;
  }
}
@media (min-width: 768px){
  .container{
    max-width: 768px;
  }
}
@media (min-width: 976px){
  .container{
    max-width: 976px;
  }
}
@media (min-width: 1440px){
  .container{
    max-width: 1440px;
  }
}
.pointer-events-none{
  pointer-events: none;
}
.\!visible{
  visibility: visible !important;
}
.visible{
  visibility: visible;
}
.invisible{
  visibility: hidden;
}
.collapse{
  visibility: collapse;
}
.static{
  position: static;
}
.fixed{
  position: fixed;
}
.absolute{
  position: absolute;
}
.relative{
  position: relative;
}
.sticky{
  position: sticky;
}
.inset-x-0{
  left: 0px;
  right: 0px;
}
.-right-1{
  right: -0.25rem;
}
.-top-1{
  top: -0.25rem;
}
.bottom-0{
  bottom: 0px;
}
.bottom-4{
  bottom: 1rem;
}
.left-0{
  left: 0px;
}
.left-1\/2{
  left: 50%;
}
.left-\[0px\]{
  left: 0px;
}
.right-0{
  right: 0px;
}
.right-2{
  right: 0.5rem;
}
.top-0{
  top: 0px;
}
.top-1\/2{
  top: 50%;
}
.top-2{
  top: 0.5rem;
}
.top-\[0px\]{
  top: 0px;
}
.-z-10{
  z-index: -10;
}
.z-10{
  z-index: 10;
}
.z-\[10000\]{
  z-index: 10000;
}
.m-0{
  margin: 0px;
}
.m-1{
  margin: 0.25rem;
}
.m-2{
  margin: 0.5rem;
}
.m-\[0\]{
  margin: 0;
}
.-mx-4{
  margin-left: -1rem;
  margin-right: -1rem;
}
.mx-1{
  margin-left: 0.25rem;
  margin-right: 0.25rem;
}
.mx-4{
  margin-left: 1rem;
  margin-right: 1rem;
}
.mx-\[0\]{
  margin-left: 0;
  margin-right: 0;
}
.mx-\[auto\]{
  margin-left: auto;
  margin-right: auto;
}
.mx-auto{
  margin-left: auto;
  margin-right: auto;
}
.my-2{
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}
.my-3{
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
}
.my-\[0\]{
  margin-top: 0;
  margin-bottom: 0;
}
.mb-0{
  margin-bottom: 0px;
}
.mb-0\.5{
  margin-bottom: 0.125rem;
}
.mb-1{
  margin-bottom: 0.25rem;
}
.mb-1\.5{
  margin-bottom: 0.375rem;
}
.mb-2{
  margin-bottom: 0.5rem;
}
.mb-3{
  margin-bottom: 0.75rem;
}
.mb-4{
  margin-bottom: 1rem;
}
.mb-5{
  margin-bottom: 1.25rem;
}
.mb-6{
  margin-bottom: 1.5rem;
}
.mb-\[0\]{
  margin-bottom: 0;
}
.mb-\[16px\]{
  margin-bottom: 16px;
}
.mb-\[20px\]{
  margin-bottom: 20px;
}
.mb-\[24px\]{
  margin-bottom: 24px;
}
.mb-\[32px\]{
  margin-bottom: 32px;
}
.ml-1{
  margin-left: 0.25rem;
}
.ml-1\.5{
  margin-left: 0.375rem;
}
.ml-2{
  margin-left: 0.5rem;
}
.ml-3{
  margin-left: 0.75rem;
}
.ml-4{
  margin-left: 1rem;
}
.ml-\[0\]{
  margin-left: 0;
}
.ml-\[8px\]{
  margin-left: 8px;
}
.mr-1{
  margin-right: 0.25rem;
}
.mr-1\.5{
  margin-right: 0.375rem;
}
.mr-10{
  margin-right: 2.5rem;
}
.mr-2{
  margin-right: 0.5rem;
}
.mr-\[0\]{
  margin-right: 0;
}
.mr-\[2px\]{
  margin-right: 2px;
}
.mt-0{
  margin-top: 0px;
}
.mt-0\.5{
  margin-top: 0.125rem;
}
.mt-1{
  margin-top: 0.25rem;
}
.mt-1\.5{
  margin-top: 0.375rem;
}
.mt-10{
  margin-top: 2.5rem;
}
.mt-2{
  margin-top: 0.5rem;
}
.mt-3{
  margin-top: 0.75rem;
}
.mt-4{
  margin-top: 1rem;
}
.mt-5{
  margin-top: 1.25rem;
}
.mt-6{
  margin-top: 1.5rem;
}
.mt-\[0\]{
  margin-top: 0;
}
.mt-\[16px\]{
  margin-top: 16px;
}
.mt-\[2px\]{
  margin-top: 2px;
}
.mt-\[4px\]{
  margin-top: 4px;
}
.mt-\[6px\]{
  margin-top: 6px;
}
.mt-\[8px\]{
  margin-top: 8px;
}
.line-clamp-1{
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
.line-clamp-2{
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.\!block{
  display: block !important;
}
.block{
  display: block;
}
.inline-block{
  display: inline-block;
}
.inline{
  display: inline;
}
.flex{
  display: flex;
}
.inline-flex{
  display: inline-flex;
}
.table{
  display: table;
}
.grid{
  display: grid;
}
.contents{
  display: contents;
}
.hidden{
  display: none;
}
.h-1\.5{
  height: 0.375rem;
}
.h-10{
  height: 2.5rem;
}
.h-12{
  height: 3rem;
}
.h-16{
  height: 4rem;
}
.h-2{
  height: 0.5rem;
}
.h-2\.5{
  height: 0.625rem;
}
.h-20{
  height: 5rem;
}
.h-4{
  height: 1rem;
}
.h-5{
  height: 1.25rem;
}
.h-6{
  height: 1.5rem;
}
.h-7{
  height: 1.75rem;
}
.h-8{
  height: 2rem;
}
.h-9{
  height: 2.25rem;
}
.h-\[1px\]{
  height: 1px;
}
.h-\[22px\]{
  height: 22px;
}
.h-\[24px\]{
  height: 24px;
}
.h-\[32px\]{
  height: 32px;
}
.h-\[400px\]{
  height: 400px;
}
.h-\[64px\]{
  height: 64px;
}
.h-auto{
  height: auto;
}
.h-full{
  height: 100%;
}
.max-h-\[200px\]{
  max-height: 200px;
}
.max-h-\[48px\]{
  max-height: 48px;
}
.max-h-\[500px\]{
  max-height: 500px;
}
.min-h-0{
  min-height: 0px;
}
.min-h-3{
  min-height: 0.75rem;
}
.min-h-\[400px\]{
  min-height: 400px;
}
.w-1\.5{
  width: 0.375rem;
}
.w-10{
  width: 2.5rem;
}
.w-12{
  width: 3rem;
}
.w-16{
  width: 4rem;
}
.w-2{
  width: 0.5rem;
}
.w-2\.5{
  width: 0.625rem;
}
.w-20{
  width: 5rem;
}
.w-3{
  width: 0.75rem;
}
.w-4{
  width: 1rem;
}
.w-5{
  width: 1.25rem;
}
.w-6{
  width: 1.5rem;
}
.w-7{
  width: 1.75rem;
}
.w-8{
  width: 2rem;
}
.w-\[1px\]{
  width: 1px;
}
.w-\[24px\]{
  width: 24px;
}
.w-\[30\%\]{
  width: 30%;
}
.w-\[52px\]{
  width: 52px;
}
.w-\[60\%\]{
  width: 60%;
}
.w-\[64px\]{
  width: 64px;
}
.w-\[80\%\]{
  width: 80%;
}
.w-\[80px\]{
  width: 80px;
}
.w-\[auto\]{
  width: auto;
}
.w-\[calc\(100\%-32px\)\]{
  width: calc(100% - 32px);
}
.w-full{
  width: 100%;
}
.min-w-0{
  min-width: 0px;
}
.min-w-\[140px\]{
  min-width: 140px;
}
.min-w-\[41px\]{
  min-width: 41px;
}
.min-w-\[64px\]{
  min-width: 64px;
}
.max-w-4xl{
  max-width: 56rem;
}
.max-w-\[220px\]{
  max-width: 220px;
}
.max-w-\[300px\]{
  max-width: 300px;
}
.max-w-\[48px\]{
  max-width: 48px;
}
.max-w-\[560px\]{
  max-width: 560px;
}
.max-w-\[64px\]{
  max-width: 64px;
}
.max-w-full{
  max-width: 100%;
}
.flex-1{
  flex: 1 1 0%;
}
.flex-shrink-0{
  flex-shrink: 0;
}
.shrink-0{
  flex-shrink: 0;
}
.grow{
  flex-grow: 1;
}
.-translate-x-1\/2{
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-y-1\/2{
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-rotate-90{
  --tw-rotate: -90deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rotate-180{
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.transform{
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
@keyframes pulse{
  50%{
    opacity: .5;
  }
}
.animate-pulse{
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.cursor-col-resize{
  cursor: col-resize;
}
.cursor-default{
  cursor: default;
}
.cursor-not-allowed{
  cursor: not-allowed;
}
.cursor-pointer{
  cursor: pointer;
}
.touch-none{
  touch-action: none;
}
.select-none{
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.resize{
  resize: both;
}
.list-none{
  list-style-type: none;
}
.grid-cols-1{
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid-cols-3{
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid-cols-7{
  grid-template-columns: repeat(7, minmax(0, 1fr));
}
.flex-row{
  flex-direction: row;
}
.flex-col{
  flex-direction: column;
}
.flex-wrap{
  flex-wrap: wrap;
}
.items-start{
  align-items: flex-start;
}
.items-end{
  align-items: flex-end;
}
.items-center{
  align-items: center;
}
.items-stretch{
  align-items: stretch;
}
.justify-start{
  justify-content: flex-start;
}
.justify-end{
  justify-content: flex-end;
}
.justify-center{
  justify-content: center;
}
.justify-between{
  justify-content: space-between;
}
.justify-around{
  justify-content: space-around;
}
.gap-0{
  gap: 0px;
}
.gap-0\.5{
  gap: 0.125rem;
}
.gap-1{
  gap: 0.25rem;
}
.gap-1\.5{
  gap: 0.375rem;
}
.gap-2{
  gap: 0.5rem;
}
.gap-3{
  gap: 0.75rem;
}
.gap-4{
  gap: 1rem;
}
.gap-6{
  gap: 1.5rem;
}
.gap-\[12px\]{
  gap: 12px;
}
.gap-\[16px\]{
  gap: 16px;
}
.gap-\[4px\]{
  gap: 4px;
}
.gap-x-3{
  -moz-column-gap: 0.75rem;
       column-gap: 0.75rem;
}
.gap-y-1{
  row-gap: 0.25rem;
}
.space-y-2 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}
.space-y-3 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}
.space-y-4 > :not([hidden]) ~ :not([hidden]){
  --tw-space-y-reverse: 0;
  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}
.overflow-hidden{
  overflow: hidden;
}
.overflow-x-auto{
  overflow-x: auto;
}
.overflow-y-auto{
  overflow-y: auto;
}
.truncate{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.text-ellipsis{
  text-overflow: ellipsis;
}
.whitespace-nowrap{
  white-space: nowrap;
}
.whitespace-pre-line{
  white-space: pre-line;
}
.whitespace-pre-wrap{
  white-space: pre-wrap;
}
.text-nowrap{
  text-wrap: nowrap;
}
.break-words{
  overflow-wrap: break-word;
}
.break-all{
  word-break: break-all;
}
.rounded{
  border-radius: 0.25rem;
}
.rounded-2xl{
  border-radius: 1rem;
}
.rounded-\[999px\]{
  border-radius: 999px;
}
.rounded-full{
  border-radius: 9999px;
}
.rounded-lg{
  border-radius: 0.5rem;
}
.rounded-md{
  border-radius: 0.375rem;
}
.rounded-none{
  border-radius: 0px;
}
.rounded-xl{
  border-radius: 0.75rem;
}
.rounded-b-none{
  border-bottom-right-radius: 0px;
  border-bottom-left-radius: 0px;
}
.rounded-t-none{
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
}
.border{
  border-width: 1px;
}
.border-0{
  border-width: 0px;
}
.border-2{
  border-width: 2px;
}
.border-y-2{
  border-top-width: 2px;
  border-bottom-width: 2px;
}
.border-b{
  border-bottom-width: 1px;
}
.border-b-2{
  border-bottom-width: 2px;
}
.border-l-2{
  border-left-width: 2px;
}
.border-l-4{
  border-left-width: 4px;
}
.border-r-2{
  border-right-width: 2px;
}
.border-t{
  border-top-width: 1px;
}
.border-t-2{
  border-top-width: 2px;
}
.border-dashed{
  border-style: dashed;
}
.border-none{
  border-style: none;
}
.border-\[color\:var\(--ion-border-color\2c rgba\(0\2c 0\2c 0\2c 0\.08\)\)\]{
  border-color: var(--ion-border-color,rgba(0,0,0,0.08));
}
.border-\[color\:var\(--ion-border-color\2c rgba\(0\2c 0\2c 0\2c 0\.13\)\)\]{
  border-color: var(--ion-border-color,rgba(0,0,0,0.13));
}
.border-\[color\:var\(--ion-color-medium\)\]{
  border-color: var(--ion-color-medium);
}
.border-\[var\(--ion-border-color\2c rgba\(0\2c 0\2c 0\2c 0\.08\)\)\]{
  border-color: var(--ion-border-color,rgba(0,0,0,0.08));
}
.border-\[var\(--ion-color-danger\)\]{
  border-color: var(--ion-color-danger);
}
.border-\[var\(--ion-color-light-shade\)\]{
  border-color: var(--ion-color-light-shade);
}
.border-\[var\(--ion-color-medium\)\]{
  border-color: var(--ion-color-medium);
}
.border-\[var\(--ion-color-primary\)\]{
  border-color: var(--ion-color-primary);
}
.border-\[var\(--ion-color-secondary\)\]{
  border-color: var(--ion-color-secondary);
}
.border-\[var\(--ion-color-success\)\]{
  border-color: var(--ion-color-success);
}
.border-\[var\(--ion-color-tertiary\)\]{
  border-color: var(--ion-color-tertiary);
}
.border-\[var\(--ion-color-warning\)\]{
  border-color: var(--ion-color-warning);
}
.border-amber-200{
  --tw-border-opacity: 1;
  border-color: rgb(253 230 138 / var(--tw-border-opacity, 1));
}
.border-black{
  --tw-border-opacity: 1;
  border-color: rgb(0 0 0 / var(--tw-border-opacity, 1));
}
.border-cyan-700{
  --tw-border-opacity: 1;
  border-color: rgb(14 116 144 / var(--tw-border-opacity, 1));
}
.border-gray-200{
  --tw-border-opacity: 1;
  border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
}
.border-gray-300{
  --tw-border-opacity: 1;
  border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
}
.border-gray-700{
  --tw-border-opacity: 1;
  border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
}
.border-green-500{
  --tw-border-opacity: 1;
  border-color: rgb(34 197 94 / var(--tw-border-opacity, 1));
}
.border-orange-200{
  --tw-border-opacity: 1;
  border-color: rgb(254 215 170 / var(--tw-border-opacity, 1));
}
.border-red-200{
  --tw-border-opacity: 1;
  border-color: rgb(254 202 202 / var(--tw-border-opacity, 1));
}
.border-slate-200{
  --tw-border-opacity: 1;
  border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
}
.border-slate-300{
  --tw-border-opacity: 1;
  border-color: rgb(203 213 225 / var(--tw-border-opacity, 1));
}
.border-b-\[color\:var\(--ion-border-color\)\]{
  border-bottom-color: var(--ion-border-color);
}
.bg-\[color\:var\(--ion-item-background\)\]{
  background-color: var(--ion-item-background);
}
.bg-\[rgba\(var\(--ion-color-danger-rgb\)\2c 0\.1\)\]{
  background-color: rgba(var(--ion-color-danger-rgb),0.1);
}
.bg-\[rgba\(var\(--ion-color-medium-rgb\)\2c 0\.12\)\]{
  background-color: rgba(var(--ion-color-medium-rgb),0.12);
}
.bg-\[rgba\(var\(--ion-color-success-rgb\)\2c 0\.1\)\]{
  background-color: rgba(var(--ion-color-success-rgb),0.1);
}
.bg-\[rgba\(var\(--ion-color-warning-rgb\)\2c 0\.1\)\]{
  background-color: rgba(var(--ion-color-warning-rgb),0.1);
}
.bg-\[var\(--ion-background-color\)\]{
  background-color: var(--ion-background-color);
}
.bg-\[var\(--ion-background-color\2c _var\(--ion-color-light\2c _\#fff\)\)\]{
  background-color: var(--ion-background-color, var(--ion-color-light, #fff));
}
.bg-\[var\(--ion-color-light\)\]{
  background-color: var(--ion-color-light);
}
.bg-\[var\(--ion-color-light-shade\)\]{
  background-color: var(--ion-color-light-shade);
}
.bg-\[var\(--ion-color-medium\)\]{
  background-color: var(--ion-color-medium);
}
.bg-\[var\(--ion-color-medium-shade\)\]{
  background-color: var(--ion-color-medium-shade);
}
.bg-\[var\(--ion-color-primary\)\]{
  background-color: var(--ion-color-primary);
}
.bg-\[var\(--ion-color-primary-tint\)\]{
  background-color: var(--ion-color-primary-tint);
}
.bg-\[var\(--ion-color-secondary-tint\)\]{
  background-color: var(--ion-color-secondary-tint);
}
.bg-\[var\(--ion-color-tertiary-tint\)\]{
  background-color: var(--ion-color-tertiary-tint);
}
.bg-\[var\(--ion-color-warning-tint\)\]{
  background-color: var(--ion-color-warning-tint);
}
.bg-\[var\(--ion-item-background\)\]{
  background-color: var(--ion-item-background);
}
.bg-amber-50{
  --tw-bg-opacity: 1;
  background-color: rgb(255 251 235 / var(--tw-bg-opacity, 1));
}
.bg-black{
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
}
.bg-blue-500{
  --tw-bg-opacity: 1;
  background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1));
}
.bg-gray-200{
  --tw-bg-opacity: 1;
  background-color: rgb(229 231 235 / var(--tw-bg-opacity, 1));
}
.bg-gray-400{
  --tw-bg-opacity: 1;
  background-color: rgb(156 163 175 / var(--tw-bg-opacity, 1));
}
.bg-gray-50{
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1));
}
.bg-green-500{
  --tw-bg-opacity: 1;
  background-color: rgb(34 197 94 / var(--tw-bg-opacity, 1));
}
.bg-green-500\/10{
  background-color: rgb(34 197 94 / 0.1);
}
.bg-green-500\/20{
  background-color: rgb(34 197 94 / 0.2);
}
.bg-indigo-500{
  --tw-bg-opacity: 1;
  background-color: rgb(99 102 241 / var(--tw-bg-opacity, 1));
}
.bg-orange-50{
  --tw-bg-opacity: 1;
  background-color: rgb(255 247 237 / var(--tw-bg-opacity, 1));
}
.bg-orange-500{
  --tw-bg-opacity: 1;
  background-color: rgb(249 115 22 / var(--tw-bg-opacity, 1));
}
.bg-pink-500{
  --tw-bg-opacity: 1;
  background-color: rgb(236 72 153 / var(--tw-bg-opacity, 1));
}
.bg-purple-500{
  --tw-bg-opacity: 1;
  background-color: rgb(168 85 247 / var(--tw-bg-opacity, 1));
}
.bg-red-50{
  --tw-bg-opacity: 1;
  background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1));
}
.bg-red-500{
  --tw-bg-opacity: 1;
  background-color: rgb(239 68 68 / var(--tw-bg-opacity, 1));
}
.bg-teal-500{
  --tw-bg-opacity: 1;
  background-color: rgb(20 184 166 / var(--tw-bg-opacity, 1));
}
.bg-transparent{
  background-color: transparent;
}
.bg-white{
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.bg-white\/95{
  background-color: rgb(255 255 255 / 0.95);
}
.bg-opacity-50{
  --tw-bg-opacity: 0.5;
}
.bg-gradient-to-tr{
  background-image: linear-gradient(to top right, var(--tw-gradient-stops));
}
.from-blue-600{
  --tw-gradient-from: #2563eb var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(37 99 235 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-red-600{
  --tw-gradient-from: #dc2626 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(220 38 38 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.from-teal-600{
  --tw-gradient-from: #0d9488 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(13 148 136 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.to-blue-400{
  --tw-gradient-to: #60a5fa var(--tw-gradient-to-position);
}
.to-red-400{
  --tw-gradient-to: #f87171 var(--tw-gradient-to-position);
}
.to-teal-400{
  --tw-gradient-to: #2dd4bf var(--tw-gradient-to-position);
}
.bg-clip-border{
  background-clip: border-box;
}
.p-0{
  padding: 0px;
}
.p-1{
  padding: 0.25rem;
}
.p-2{
  padding: 0.5rem;
}
.p-3{
  padding: 0.75rem;
}
.p-4{
  padding: 1rem;
}
.p-6{
  padding: 1.5rem;
}
.p-8{
  padding: 2rem;
}
.p-\[20px\]{
  padding: 20px;
}
.px-0{
  padding-left: 0px;
  padding-right: 0px;
}
.px-1{
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}
.px-2{
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.px-3{
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
.px-4{
  padding-left: 1rem;
  padding-right: 1rem;
}
.px-6{
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.px-8{
  padding-left: 2rem;
  padding-right: 2rem;
}
.px-\[10px\]{
  padding-left: 10px;
  padding-right: 10px;
}
.py-0\.5{
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}
.py-1{
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}
.py-1\.5{
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}
.py-10{
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}
.py-12{
  padding-top: 3rem;
  padding-bottom: 3rem;
}
.py-2{
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.py-2\.5{
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}
.py-3{
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.py-4{
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.py-8{
  padding-top: 2rem;
  padding-bottom: 2rem;
}
.py-\[0\]{
  padding-top: 0;
  padding-bottom: 0;
}
.pb-0{
  padding-bottom: 0px;
}
.pb-1{
  padding-bottom: 0.25rem;
}
.pb-14{
  padding-bottom: 3.5rem;
}
.pb-2{
  padding-bottom: 0.5rem;
}
.pb-4{
  padding-bottom: 1rem;
}
.pb-6{
  padding-bottom: 1.5rem;
}
.pb-\[55vh\]{
  padding-bottom: 55vh;
}
.pl-2{
  padding-left: 0.5rem;
}
.pl-4{
  padding-left: 1rem;
}
.pr-2{
  padding-right: 0.5rem;
}
.pt-0{
  padding-top: 0px;
}
.pt-0\.5{
  padding-top: 0.125rem;
}
.pt-1{
  padding-top: 0.25rem;
}
.pt-2{
  padding-top: 0.5rem;
}
.pt-3{
  padding-top: 0.75rem;
}
.pt-\[80px\]{
  padding-top: 80px;
}
.text-left{
  text-align: left;
}
.text-center{
  text-align: center;
}
.align-middle{
  vertical-align: middle;
}
.font-\[normal\]{
  font-family: normal;
}
.font-sans{
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
.text-2xl{
  font-size: 1.5rem;
  line-height: 2rem;
}
.text-3xl{
  font-size: 1.875rem;
  line-height: 2.25rem;
}
.text-4xl{
  font-size: 2.25rem;
  line-height: 2.5rem;
}
.text-5xl{
  font-size: 3rem;
  line-height: 1;
}
.text-\[0\.5rem\]{
  font-size: 0.5rem;
}
.text-\[0\.65rem\]{
  font-size: 0.65rem;
}
.text-\[0\.6rem\]{
  font-size: 0.6rem;
}
.text-\[0\.72rem\]{
  font-size: 0.72rem;
}
.text-\[10px\]{
  font-size: 10px;
}
.text-\[11px\]{
  font-size: 11px;
}
.text-\[12px\]{
  font-size: 12px;
}
.text-\[13px\]{
  font-size: 13px;
}
.text-\[14px\]{
  font-size: 14px;
}
.text-\[15px\]{
  font-size: 15px;
}
.text-\[16px\]{
  font-size: 16px;
}
.text-\[2em\]{
  font-size: 2em;
}
.text-\[48px\]{
  font-size: 48px;
}
.text-\[64px\]{
  font-size: 64px;
}
.text-base{
  font-size: 1rem;
  line-height: 1.5rem;
}
.text-lg{
  font-size: 1.125rem;
  line-height: 1.75rem;
}
.text-sm{
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.text-xl{
  font-size: 1.25rem;
  line-height: 1.75rem;
}
.text-xs{
  font-size: 0.75rem;
  line-height: 1rem;
}
.font-black{
  font-weight: 900;
}
.font-bold{
  font-weight: 700;
}
.font-medium{
  font-weight: 500;
}
.font-normal{
  font-weight: 400;
}
.font-semibold{
  font-weight: 600;
}
.uppercase{
  text-transform: uppercase;
}
.capitalize{
  text-transform: capitalize;
}
.italic{
  font-style: italic;
}
.tabular-nums{
  --tw-numeric-spacing: tabular-nums;
  font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction);
}
.leading-7{
  line-height: 1.75rem;
}
.leading-8{
  line-height: 2rem;
}
.leading-\[1\.5\]{
  line-height: 1.5;
}
.leading-none{
  line-height: 1;
}
.leading-relaxed{
  line-height: 1.625;
}
.leading-snug{
  line-height: 1.375;
}
.tracking-normal{
  letter-spacing: 0em;
}
.tracking-wider{
  letter-spacing: 0.05em;
}
.text-\[color\:\#ff6b6b\]{
  --tw-text-opacity: 1;
  color: rgb(255 107 107 / var(--tw-text-opacity, 1));
}
.text-\[color\:var\(--ion-color-danger\)\]{
  color: var(--ion-color-danger);
}
.text-\[color\:var\(--ion-color-dark\)\]{
  color: var(--ion-color-dark);
}
.text-\[color\:var\(--ion-color-light\)\]{
  color: var(--ion-color-light);
}
.text-\[color\:var\(--ion-color-medium\)\]{
  color: var(--ion-color-medium);
}
.text-\[color\:var\(--ion-color-medium-contrast\)\]{
  color: var(--ion-color-medium-contrast);
}
.text-\[color\:var\(--ion-color-primary\)\]{
  color: var(--ion-color-primary);
}
.text-\[color\:var\(--ion-color-secondary\)\]{
  color: var(--ion-color-secondary);
}
.text-\[color\:var\(--ion-color-success\)\]{
  color: var(--ion-color-success);
}
.text-\[color\:var\(--ion-color-tertiary\)\]{
  color: var(--ion-color-tertiary);
}
.text-\[color\:var\(--ion-color-warning\)\]{
  color: var(--ion-color-warning);
}
.text-\[var\(--ion-color-danger\)\]{
  color: var(--ion-color-danger);
}
.text-\[var\(--ion-color-medium\)\]{
  color: var(--ion-color-medium);
}
.text-\[var\(--ion-color-primary\)\]{
  color: var(--ion-color-primary);
}
.text-\[var\(--ion-color-success\)\]{
  color: var(--ion-color-success);
}
.text-\[var\(--ion-color-tertiary\)\]{
  color: var(--ion-color-tertiary);
}
.text-\[var\(--ion-text-color\)\]{
  color: var(--ion-text-color);
}
.text-gray-400{
  --tw-text-opacity: 1;
  color: rgb(156 163 175 / var(--tw-text-opacity, 1));
}
.text-gray-500{
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / var(--tw-text-opacity, 1));
}
.text-gray-600{
  --tw-text-opacity: 1;
  color: rgb(75 85 99 / var(--tw-text-opacity, 1));
}
.text-gray-700{
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity, 1));
}
.text-green-500{
  --tw-text-opacity: 1;
  color: rgb(34 197 94 / var(--tw-text-opacity, 1));
}
.text-orange-500{
  --tw-text-opacity: 1;
  color: rgb(249 115 22 / var(--tw-text-opacity, 1));
}
.text-orange-600{
  --tw-text-opacity: 1;
  color: rgb(234 88 12 / var(--tw-text-opacity, 1));
}
.text-orange-700{
  --tw-text-opacity: 1;
  color: rgb(194 65 12 / var(--tw-text-opacity, 1));
}
.text-red-500{
  --tw-text-opacity: 1;
  color: rgb(239 68 68 / var(--tw-text-opacity, 1));
}
.text-red-600{
  --tw-text-opacity: 1;
  color: rgb(220 38 38 / var(--tw-text-opacity, 1));
}
.text-red-700{
  --tw-text-opacity: 1;
  color: rgb(185 28 28 / var(--tw-text-opacity, 1));
}
.text-rose-600{
  --tw-text-opacity: 1;
  color: rgb(225 29 72 / var(--tw-text-opacity, 1));
}
.text-slate-600{
  --tw-text-opacity: 1;
  color: rgb(71 85 105 / var(--tw-text-opacity, 1));
}
.text-slate-900{
  --tw-text-opacity: 1;
  color: rgb(15 23 42 / var(--tw-text-opacity, 1));
}
.text-white{
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.underline{
  text-decoration-line: underline;
}
.line-through{
  text-decoration-line: line-through;
}
.antialiased{
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.opacity-25{
  opacity: 0.25;
}
.opacity-30{
  opacity: 0.3;
}
.opacity-60{
  opacity: 0.6;
}
.opacity-70{
  opacity: 0.7;
}
.opacity-\[0\]{
  opacity: 0;
}
.shadow{
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-\[0_-6px_12px_rgba\(0\2c 0\2c 0\2c 0\.22\)\]{
  --tw-shadow: 0 -6px 12px rgba(0,0,0,0.22);
  --tw-shadow-colored: 0 -6px 12px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-lg{
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-md{
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-none{
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-blue-500\/20{
  --tw-shadow-color: rgb(59 130 246 / 0.2);
  --tw-shadow: var(--tw-shadow-colored);
}
.shadow-gray-500\/10{
  --tw-shadow-color: rgb(107 114 128 / 0.1);
  --tw-shadow: var(--tw-shadow-colored);
}
.shadow-red-500\/20{
  --tw-shadow-color: rgb(239 68 68 / 0.2);
  --tw-shadow: var(--tw-shadow-colored);
}
.shadow-teal-500\/20{
  --tw-shadow-color: rgb(20 184 166 / 0.2);
  --tw-shadow: var(--tw-shadow-colored);
}
.outline{
  outline-style: solid;
}
.blur{
  --tw-blur: blur(8px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.filter{
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.backdrop-blur{
  --tw-backdrop-blur: blur(8px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.transition{
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-all{
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-colors{
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.ease-in-out{
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.ease-out{
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
.\[--height\:90\%\]{
  --height: 90%;
}
.\[--min-height\:38px\]{
  --min-height: 38px;
}
.\[--min-height\:40px\]{
  --min-height: 40px;
}

/* Ionic CSS Variables */
:root {
  --ion-color-primary: #3880ff;
  --ion-color-primary-rgb: 56, 128, 255;
  --ion-color-primary-contrast: #ffffff;
  --ion-color-primary-contrast-rgb: 255, 255, 255;
  --ion-color-primary-shade: #3171e0;
  --ion-color-primary-tint: #4c8dff;

  --ion-color-secondary: #3dc2ff;
  --ion-color-secondary-rgb: 61, 194, 255;
  --ion-color-secondary-contrast: #ffffff;
  --ion-color-secondary-contrast-rgb: 255, 255, 255;
  --ion-color-secondary-shade: #36abe0;
  --ion-color-secondary-tint: #50c8ff;

  --ion-color-tertiary: #5260ff;
  --ion-color-tertiary-rgb: 82, 96, 255;
  --ion-color-tertiary-contrast: #ffffff;
  --ion-color-tertiary-contrast-rgb: 255, 255, 255;
  --ion-color-tertiary-shade: #4854e0;
  --ion-color-tertiary-tint: #6370ff;

  --ion-color-success: #2dd36f;
  --ion-color-success-rgb: 45, 211, 111;
  --ion-color-success-contrast: #ffffff;
  --ion-color-success-contrast-rgb: 255, 255, 255;
  --ion-color-success-shade: #28ba62;
  --ion-color-success-tint: #42d77d;

  --ion-color-warning: #ffc409;
  --ion-color-warning-rgb: 255, 196, 9;
  --ion-color-warning-contrast: #000000;
  --ion-color-warning-contrast-rgb: 0, 0, 0;
  --ion-color-warning-shade: #e0ac08;
  --ion-color-warning-tint: #ffca22;

  --ion-color-danger: #eb445a;
  --ion-color-danger-rgb: 235, 68, 90;
  --ion-color-danger-contrast: #ffffff;
  --ion-color-danger-contrast-rgb: 255, 255, 255;
  --ion-color-danger-shade: #cf3c4f;
  --ion-color-danger-tint: #ed576b;

  --ion-color-dark: #222428;
  --ion-color-dark-rgb: 34, 36, 40;
  --ion-color-dark-contrast: #ffffff;
  --ion-color-dark-contrast-rgb: 255, 255, 255;
  --ion-color-dark-shade: #1e2023;
  --ion-color-dark-tint: #383a3e;

  --ion-color-medium: #92949c;
  --ion-color-medium-rgb: 146, 148, 156;
  --ion-color-medium-contrast: #ffffff;
  --ion-color-medium-contrast-rgb: 255, 255, 255;
  --ion-color-medium-shade: #808289;
  --ion-color-medium-tint: #9d9fa6;

  --ion-color-light: #f4f5f8;
  --ion-color-light-rgb: 244, 245, 248;
  --ion-color-light-contrast: #000000;
  --ion-color-light-contrast-rgb: 0, 0, 0;
  --ion-color-light-shade: #d7d8da;
  --ion-color-light-tint: #f5f6f9;
}

/* Dark theme */
.dark-theme {
  --ion-color-primary: #428cff;
  --ion-color-primary-rgb: 66, 140, 255;
  --ion-color-primary-contrast: #ffffff;
  --ion-color-primary-contrast-rgb: 255, 255, 255;
  --ion-color-primary-shade: #3a7be0;
  --ion-color-primary-tint: #5598ff;

  --ion-color-secondary: #50c8ff;
  --ion-color-secondary-rgb: 80, 200, 255;
  --ion-color-secondary-contrast: #ffffff;
  --ion-color-secondary-contrast-rgb: 255, 255, 255;
  --ion-color-secondary-shade: #46b0e0;
  --ion-color-secondary-tint: #62ceff;

  --ion-color-tertiary: #6a64ff;
  --ion-color-tertiary-rgb: 106, 100, 255;
  --ion-color-tertiary-contrast: #ffffff;
  --ion-color-tertiary-contrast-rgb: 255, 255, 255;
  --ion-color-tertiary-shade: #5d58e0;
  --ion-color-tertiary-tint: #7974ff;

  --ion-color-success: #2fdf75;
  --ion-color-success-rgb: 47, 223, 117;
  --ion-color-success-contrast: #000000;
  --ion-color-success-contrast-rgb: 0, 0, 0;
  --ion-color-success-shade: #29c467;
  --ion-color-success-tint: #44e283;

  --ion-color-warning: #ffd534;
  --ion-color-warning-rgb: 255, 213, 52;
  --ion-color-warning-contrast: #000000;
  --ion-color-warning-contrast-rgb: 0, 0, 0;
  --ion-color-warning-shade: #e2bb2e;
  --ion-color-warning-tint: #ffd948;

  --ion-color-danger: #ff4961;
  --ion-color-danger-rgb: 255, 73, 97;
  --ion-color-danger-contrast: #ffffff;
  --ion-color-danger-contrast-rgb: 255, 255, 255;
  --ion-color-danger-shade: #e04055;
  --ion-color-danger-tint: #ff5b71;

  --ion-color-dark: #f4f5f8;
  --ion-color-dark-rgb: 244, 245, 248;
  --ion-color-dark-contrast: #000000;
  --ion-color-dark-contrast-rgb: 0, 0, 0;
  --ion-color-dark-shade: #d7d8da;
  --ion-color-dark-tint: #f5f6f9;

  --ion-color-medium: #989aa2;
  --ion-color-medium-rgb: 152, 154, 162;
  --ion-color-medium-contrast: #000000;
  --ion-color-medium-contrast-rgb: 0, 0, 0;
  --ion-color-medium-shade: #86888f;
  --ion-color-medium-tint: #a2a4ab;

  --ion-color-light: #222428;
  --ion-color-light-rgb: 34, 36, 40;
  --ion-color-light-contrast: #ffffff;
  --ion-color-light-contrast-rgb: 255, 255, 255;
  --ion-color-light-shade: #1e2023;
  --ion-color-light-tint: #383a3e;
}
.hover\:border-\[color\:var\(--ion-color-primary\)\]:hover{
  border-color: var(--ion-color-primary);
}
.hover\:bg-slate-50:hover{
  --tw-bg-opacity: 1;
  background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));
}
.hover\:text-\[color\:var\(--ion-color-primary\)\]:hover{
  color: var(--ion-color-primary);
}
.hover\:underline:hover{
  text-decoration-line: underline;
}
.hover\:shadow-lg:hover{
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.hover\:shadow-blue-500\/40:hover{
  --tw-shadow-color: rgb(59 130 246 / 0.4);
  --tw-shadow: var(--tw-shadow-colored);
}
.hover\:shadow-red-500\/40:hover{
  --tw-shadow-color: rgb(239 68 68 / 0.4);
  --tw-shadow: var(--tw-shadow-colored);
}
.hover\:shadow-teal-500\/40:hover{
  --tw-shadow-color: rgb(20 184 166 / 0.4);
  --tw-shadow: var(--tw-shadow-colored);
}
.focus\:outline-none:focus{
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.focus\:ring-2:focus{
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus\:ring-slate-400\/50:focus{
  --tw-ring-color: rgb(148 163 184 / 0.5);
}
.focus-visible\:outline:focus-visible{
  outline-style: solid;
}
.focus-visible\:outline-2:focus-visible{
  outline-width: 2px;
}
.focus-visible\:outline-offset-\[-2px\]:focus-visible{
  outline-offset: -2px;
}
.focus-visible\:outline-\[var\(--ion-color-primary\)\]:focus-visible{
  outline-color: var(--ion-color-primary);
}
.active\:bg-slate-100:active{
  --tw-bg-opacity: 1;
  background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1));
}
.active\:opacity-\[0\.85\]:active{
  opacity: 0.85;
}
.disabled\:pointer-events-none:disabled{
  pointer-events: none;
}
.disabled\:opacity-50:disabled{
  opacity: 0.5;
}
.disabled\:shadow-none:disabled{
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
@media (min-width: 768px){
  .md\:mx-0{
    margin-left: 0px;
    margin-right: 0px;
  }
  .md\:block{
    display: block;
  }
  .md\:hidden{
    display: none;
  }
  .md\:grid-cols-2{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .md\:px-0{
    padding-left: 0px;
    padding-right: 0px;
  }
}
@media (min-width: 976px){
  .lg\:grid-cols-3{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (prefers-color-scheme: dark){
  .dark\:border-gray-700{
    --tw-border-opacity: 1;
    border-color: rgb(55 65 81 / var(--tw-border-opacity, 1));
  }
  .dark\:border-orange-800{
    --tw-border-opacity: 1;
    border-color: rgb(154 52 18 / var(--tw-border-opacity, 1));
  }
  .dark\:border-red-800{
    --tw-border-opacity: 1;
    border-color: rgb(153 27 27 / var(--tw-border-opacity, 1));
  }
  .dark\:border-slate-600{
    --tw-border-opacity: 1;
    border-color: rgb(71 85 105 / var(--tw-border-opacity, 1));
  }
  .dark\:border-slate-700{
    --tw-border-opacity: 1;
    border-color: rgb(51 65 85 / var(--tw-border-opacity, 1));
  }
  .dark\:bg-gray-700{
    --tw-bg-opacity: 1;
    background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
  }
  .dark\:bg-gray-800{
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
  }
  .dark\:bg-gray-900{
    --tw-bg-opacity: 1;
    background-color: rgb(17 24 39 / var(--tw-bg-opacity, 1));
  }
  .dark\:bg-orange-900\/20{
    background-color: rgb(124 45 18 / 0.2);
  }
  .dark\:bg-red-900\/20{
    background-color: rgb(127 29 29 / 0.2);
  }
  .dark\:bg-slate-900\/95{
    background-color: rgb(15 23 42 / 0.95);
  }
  .dark\:text-gray-300{
    --tw-text-opacity: 1;
    color: rgb(209 213 219 / var(--tw-text-opacity, 1));
  }
  .dark\:text-gray-400{
    --tw-text-opacity: 1;
    color: rgb(156 163 175 / var(--tw-text-opacity, 1));
  }
  .dark\:text-orange-300{
    --tw-text-opacity: 1;
    color: rgb(253 186 116 / var(--tw-text-opacity, 1));
  }
  .dark\:text-orange-400{
    --tw-text-opacity: 1;
    color: rgb(251 146 60 / var(--tw-text-opacity, 1));
  }
  .dark\:text-red-300{
    --tw-text-opacity: 1;
    color: rgb(252 165 165 / var(--tw-text-opacity, 1));
  }
  .dark\:text-red-400{
    --tw-text-opacity: 1;
    color: rgb(248 113 113 / var(--tw-text-opacity, 1));
  }
  .dark\:text-slate-300{
    --tw-text-opacity: 1;
    color: rgb(203 213 225 / var(--tw-text-opacity, 1));
  }
  .dark\:text-slate-50{
    --tw-text-opacity: 1;
    color: rgb(248 250 252 / var(--tw-text-opacity, 1));
  }
  .dark\:hover\:bg-slate-800:hover{
    --tw-bg-opacity: 1;
    background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1));
  }
  .dark\:active\:bg-slate-700:active{
    --tw-bg-opacity: 1;
    background-color: rgb(51 65 85 / var(--tw-bg-opacity, 1));
  }
}
.\[\&\:\:part\(button\)\]\:mx-2::part(button){
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}
.\[\&\:\:part\(button\)\]\:rounded-md::part(button){
  border-radius: 0.375rem;
}
.\[\&\:\:part\(button\)\]\:bg-\[var\(--ion-color-contrast\)\]::part(button){
  background-color: var(--ion-color-contrast);
}
.\[\&\:\:part\(button\)\]\:px-3::part(button){
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
.\[\&\:\:part\(button\)\]\:font-semibold::part(button){
  font-weight: 600;
}
.\[\&\:\:part\(button\)\]\:text-\[var\(--rns-toast-button-text\2c var\(--ion-color-base\)\)\]::part(button){
  color: var(--rns-toast-button-text,var(--ion-color-base));
}
.\[\&\:\:part\(button\)\]\:opacity-100::part(button){
  opacity: 1;
}
.\[\&_strong\]\:text-sm strong{
  font-size: 0.875rem;
  line-height: 1.25rem;
}
/* Ionic scopes .alert-button at 0,2,0 and injects it at runtime — the element selector outranks it regardless of order. */
ion-alert .alert-button.rns-alert-confirm-medium {
  color: var(--ion-color-medium);
}

ion-alert .alert-button.rns-alert-confirm-primary {
  color: var(--ion-color-primary);
}

ion-alert .alert-button.rns-alert-confirm-secondary {
  color: var(--ion-color-secondary);
}

ion-alert .alert-button.rns-alert-confirm-tertiary {
  color: var(--ion-color-tertiary);
}

ion-alert .alert-button.rns-alert-confirm-success {
  color: var(--ion-color-success);
}

ion-alert .alert-button.rns-alert-confirm-warning {
  color: var(--ion-color-warning);
}

ion-alert .alert-button.rns-alert-confirm-danger {
  color: var(--ion-color-danger);
}
.commonsDynamicFormGrid {
  --ion-grid-padding: 0px;
  --ion-grid-column-padding: 0px;
}

/* Outline-fill input floats its label above its own top edge; item clips it there — structural, not opt-in. */

ion-item:has(.input-fill-outline) {
  overflow: visible;
}

/* Light / default: border must read on pale backgrounds (avoid white-on-white fallback). */

.commons-outlined-item {
  --border-color: var(--ion-border-color, rgba(0, 0, 0, 0.12));
  --border-width: 1px;
  --border-style: solid;
  --border-radius: 12px;
  --background: transparent;
  --min-height: 52px;
  --padding-start: 12px;
  --inner-padding-end: 12px;
}

/* An input with Ionic's outline fill draws its own frame; the item's would be a second one
   around it. Only the wrapping item gives it up — switches and editors keep theirs. */

.commons-outlined-item:has(.input-fill-outline) {
  --border-width: 0;
}

html.ion-palette-dark .commons-outlined-item {
  --border-color: var(--ion-color-step-250, rgba(255, 255, 255, 0.12));
}

.commonsOutlinedBox {
  border: 1px solid var(--ion-border-color, rgba(0, 0, 0, 0.12));
  border-radius: 12px;
  background: transparent;
}

html.ion-palette-dark .commonsOutlinedBox {
  border-color: var(--ion-color-step-250, rgba(255, 255, 255, 0.12));
}

/*
 * Ionic Variables and Theming
 * ----------------------------------------------------------------------------
 * For more information, please see
 * https://www.ionicframework.com/docs/theming/
 */

/*
 * Ionic Colors
 * ----------------------------------------------------------------------------
 * Named colors make it easy to reuse colors on various components.
 * It's highly recommended to change the default colors
 * to match your app's branding. Ionic provides nine layered colors
 * that can be changed to theme an app. Additional colors can be
 * added as well (see below). For more information, please see
 * https://www.ionicframework.com/docs/theming/colors
 *
 * To easily create custom color palettes for your app’s UI,
 * check out our color generator:
 * https://www.ionicframework.com/docs/theming/color-generator
 */

:root {
  /** primary **/
  --ion-color-primary: #3880ff;
  --ion-color-primary-rgb: 56, 128, 255;
  --ion-color-primary-contrast: #ffffff;
  --ion-color-primary-contrast-rgb: 255, 255, 255;
  --ion-color-primary-shade: #3171e0;
  --ion-color-primary-tint: #4c8dff;

  /** secondary **/
  --ion-color-secondary: #3dc2ff;
  --ion-color-secondary-rgb: 61, 194, 255;
  --ion-color-secondary-contrast: #ffffff;
  --ion-color-secondary-contrast-rgb: 255, 255, 255;
  --ion-color-secondary-shade: #36abe0;
  --ion-color-secondary-tint: #50c8ff;

  /** tertiary **/
  --ion-color-tertiary: #5260ff;
  --ion-color-tertiary-rgb: 82, 96, 255;
  --ion-color-tertiary-contrast: #ffffff;
  --ion-color-tertiary-contrast-rgb: 255, 255, 255;
  --ion-color-tertiary-shade: #4854e0;
  --ion-color-tertiary-tint: #6370ff;

  /** success **/
  --ion-color-success: #2dd36f;
  --ion-color-success-rgb: 45, 211, 111;
  --ion-color-success-contrast: #ffffff;
  --ion-color-success-contrast-rgb: 255, 255, 255;
  --ion-color-success-shade: #28ba62;
  --ion-color-success-tint: #42d77d;

  /** warning **/
  --ion-color-warning: #ffc409;
  --ion-color-warning-rgb: 255, 196, 9;
  --ion-color-warning-contrast: #000000;
  --ion-color-warning-contrast-rgb: 0, 0, 0;
  --ion-color-warning-shade: #e0ac08;
  --ion-color-warning-tint: #ffca22;

  /** danger **/
  --ion-color-danger: #eb445a;
  --ion-color-danger-rgb: 235, 68, 90;
  --ion-color-danger-contrast: #ffffff;
  --ion-color-danger-contrast-rgb: 255, 255, 255;
  --ion-color-danger-shade: #cf3c4f;
  --ion-color-danger-tint: #ed576b;

  /** dark **/
  --ion-color-dark: #222428;
  --ion-color-dark-rgb: 34, 36, 40;
  --ion-color-dark-contrast: #ffffff;
  --ion-color-dark-contrast-rgb: 255, 255, 255;
  --ion-color-dark-shade: #1e2023;
  --ion-color-dark-tint: #383a3e;

  /** medium **/
  --ion-color-medium: #92949c;
  --ion-color-medium-rgb: 146, 148, 156;
  --ion-color-medium-contrast: #ffffff;
  --ion-color-medium-contrast-rgb: 255, 255, 255;
  --ion-color-medium-shade: #808289;
  --ion-color-medium-tint: #9d9fa6;

  /** light **/
  --ion-color-light: #f4f5f8;
  --ion-color-light-rgb: 244, 245, 248;
  --ion-color-light-contrast: #000000;
  --ion-color-light-contrast-rgb: 0, 0, 0;
  --ion-color-light-shade: #d7d8da;
  --ion-color-light-tint: #f5f6f9;
}

/* Toast button is inverted (base text on contrast background); these bases fall below WCAG AA there. */

ion-toast.ion-color-success { --rns-toast-button-text: #1a7a40; }

ion-toast.ion-color-danger { --rns-toast-button-text: #b3243a; }

ion-toast.ion-color-primary { --rns-toast-button-text: #1b4fb8; }

ion-toast.ion-color-medium { --rns-toast-button-text: #5b5d63; }

/* Top toast clears the header/top-tab-bar stack; RnsToast measures it into --rns-toast-top-offset. */

ion-toast.rns-toast-top { top: var(--rns-toast-top-offset, 0px); }

/*
 * Additional Ionic Colors
 * ----------------------------------------------------------------------------
 * In order to add colors to be used within Ionic components,
 * the color should be added as a class with the convention `.ion-color-{COLOR}`
 * where `{COLOR}` is the color to be used on the Ionic component.
 * For more information on adding new colors, please see
 * https://ionicframework.com/docs/theming/colors#adding-colors
 *
 * To generate the code for a new color, check out our new color creator:
 * https://ionicframework.com/docs/theming/colors#new-color-creator
 */

:root {
  --ion-color-favorite: #69bb7b;
  --ion-color-favorite-rgb: 105, 187, 123;
  --ion-color-favorite-contrast: #ffffff;
  --ion-color-favorite-contrast-rgb: 255, 255, 255;
  --ion-color-favorite-shade: #5ca56c;
  --ion-color-favorite-tint: #78c288;

  --ion-color-twitter: #1da1f4;
  --ion-color-twitter-rgb: 29, 161, 244;
  --ion-color-twitter-contrast: #ffffff;
  --ion-color-twitter-contrast-rgb: 255, 255, 255;
  --ion-color-twitter-shade: #1a8ed7;
  --ion-color-twitter-tint: #34aaf5;

  --ion-color-instagram: #5956d8;
  --ion-color-instagram-rgb: 89, 86, 216;
  --ion-color-instagram-contrast: #ffffff;
  --ion-color-instagram-contrast-rgb: 255, 255, 255;
  --ion-color-instagram-shade: #4e4cbe;
  --ion-color-instagram-tint: #6a67dc;

  --ion-color-vimeo: #23b6ea;
  --ion-color-vimeo-rgb: 35, 182, 234;
  --ion-color-vimeo-contrast: #ffffff;
  --ion-color-vimeo-contrast-rgb: 255, 255, 255;
  --ion-color-vimeo-shade: #1fa0ce;
  --ion-color-vimeo-tint: #39bdec;

  --ion-color-facebook: #3b5998;
  --ion-color-facebook-rgb: 59, 89, 152;
  --ion-color-facebook-contrast: #ffffff;
  --ion-color-facebook-contrast-rgb: 255, 255, 255;
  --ion-color-facebook-shade: #344e86;
  --ion-color-facebook-tint: #4f6aa2;
}

.ion-color-favorite {
  --ion-color-base: var(--ion-color-favorite);
  --ion-color-base-rgb: var(--ion-color-favorite-rgb);
  --ion-color-contrast: var(--ion-color-favorite-contrast);
  --ion-color-contrast-rgb: var(--ion-color-favorite-contrast-rgb);
  --ion-color-shade: var(--ion-color-favorite-shade);
  --ion-color-tint: var(--ion-color-favorite-tint);
}

.ion-color-twitter {
  --ion-color-base: var(--ion-color-twitter);
  --ion-color-base-rgb: var(--ion-color-twitter-rgb);
  --ion-color-contrast: var(--ion-color-twitter-contrast);
  --ion-color-contrast-rgb: var(--ion-color-twitter-contrast-rgb);
  --ion-color-shade: var(--ion-color-twitter-shade);
  --ion-color-tint: var(--ion-color-twitter-tint);
}

.ion-color-google {
  --ion-color-base: var(--ion-color-google);
  --ion-color-base-rgb: var(--ion-color-google-rgb);
  --ion-color-contrast: var(--ion-color-google-contrast);
  --ion-color-contrast-rgb: var(--ion-color-google-contrast-rgb);
  --ion-color-shade: var(--ion-color-google-shade);
  --ion-color-tint: var(--ion-color-google-tint);
}

.ion-color-instagram {
  --ion-color-base: var(--ion-color-instagram);
  --ion-color-base-rgb: var(--ion-color-instagram-rgb);
  --ion-color-contrast: var(--ion-color-instagram-contrast);
  --ion-color-contrast-rgb: var(--ion-color-instagram-contrast-rgb);
  --ion-color-shade: var(--ion-color-instagram-shade);
  --ion-color-tint: var(--ion-color-instagram-tint);
}

.ion-color-vimeo {
  --ion-color-base: var(--ion-color-vimeo);
  --ion-color-base-rgb: var(--ion-color-vimeo-rgb);
  --ion-color-contrast: var(--ion-color-vimeo-contrast);
  --ion-color-contrast-rgb: var(--ion-color-vimeo-contrast-rgb);
  --ion-color-shade: var(--ion-color-vimeo-shade);
  --ion-color-tint: var(--ion-color-vimeo-tint);
}

.ion-color-facebook {
  --ion-color-base: var(--ion-color-facebook);
  --ion-color-base-rgb: var(--ion-color-facebook-rgb);
  --ion-color-contrast: var(--ion-color-facebook-contrast);
  --ion-color-contrast-rgb: var(--ion-color-facebook-contrast-rgb);
  --ion-color-shade: var(--ion-color-facebook-shade);
  --ion-color-tint: var(--ion-color-facebook-tint);
}

.ion-color-github {
  --ion-color-base: #211f1f;
  --ion-color-base-rgb: 33, 31, 31;
  --ion-color-contrast: #ffffff;
  --ion-color-contrast-rgb: 255, 255, 255;
  --ion-color-shade: #1d1b1b;
  --ion-color-tint: #373535;
}

.ion-color-instagram {
  --ion-color-base: #9537bc;
  --ion-color-base-rgb: 149, 55, 188;
  --ion-color-contrast: #ffffff;
  --ion-color-contrast-rgb: 255, 255, 255;
  --ion-color-shade: #8330a5;
  --ion-color-tint: #a04bc3;
}

/*
 * Shared Variables
 * ----------------------------------------------------------------------------
 * To customize the look and feel of this app, you can override
 * the CSS variables found in Ionic's source files.
 * To view all of the possible Ionic variables, see:
 * https://ionicframework.com/docs/theming/css-variables#ionic-variables
 */

@font-face {
  font-family: RobotoRegular;
  src: url('/app/assets/Roboto-Regular-Dj9u0zRN.ttf');
}

:root {
  --ion-font-family: RobotoRegular;
  --ion-headings-font-weight: 300;

  --ion-color-angular: #ac282b;
  --ion-color-communication: #8e8d93;
  --ion-color-tooling: #fe4c52;
  --ion-color-services: #fd8b2d;
  --ion-color-design: #fed035;
  --ion-color-workshop: #69bb7b;
  --ion-color-food: #3bc7c4;
  --ion-color-documentation: #b16be3;
  --ion-color-navigation: #6600cc;
}

/*
 * App iOS Variables
 * ----------------------------------------------------------------------------
 * iOS only CSS variables can go here
 */

.ios {
}

/*
 * App Material Design Variables
 * ----------------------------------------------------------------------------
 * Material Design only CSS variables can go here
 */

.md {
}

/*
 * App Theme
 * ----------------------------------------------------------------------------
 * Ionic apps can have different themes applied, which can
 * then be further customized. These variables come last
 * so that the above variables are used by default.
 */

/*
 * Dark Theme
 * ----------------------------------------------------------------------------
 */

.dark-theme {
  --ion-color-primary: #428cff;
  --ion-color-primary-rgb: 66, 140, 255;
  --ion-color-primary-contrast: #ffffff;
  --ion-color-primary-contrast-rgb: 255, 255, 255;
  --ion-color-primary-shade: #3a7be0;
  --ion-color-primary-tint: #5598ff;

  --ion-color-secondary: #50c8ff;
  --ion-color-secondary-rgb: 80, 200, 255;
  --ion-color-secondary-contrast: #ffffff;
  --ion-color-secondary-contrast-rgb: 255, 255, 255;
  --ion-color-secondary-shade: #46b0e0;
  --ion-color-secondary-tint: #62ceff;

  --ion-color-tertiary: #6a64ff;
  --ion-color-tertiary-rgb: 106, 100, 255;
  --ion-color-tertiary-contrast: #ffffff;
  --ion-color-tertiary-contrast-rgb: 255, 255, 255;
  --ion-color-tertiary-shade: #5d58e0;
  --ion-color-tertiary-tint: #7974ff;

  --ion-color-success: #2fdf75;
  --ion-color-success-rgb: 47, 223, 117;
  --ion-color-success-contrast: #000000;
  --ion-color-success-contrast-rgb: 0, 0, 0;
  --ion-color-success-shade: #29c467;
  --ion-color-success-tint: #44e283;

  --ion-color-warning: #ffd534;
  --ion-color-warning-rgb: 255, 213, 52;
  --ion-color-warning-contrast: #000000;
  --ion-color-warning-contrast-rgb: 0, 0, 0;
  --ion-color-warning-shade: #e0bb2e;
  --ion-color-warning-tint: #ffd948;

  --ion-color-danger: #ff4961;
  --ion-color-danger-rgb: 255, 73, 97;
  --ion-color-danger-contrast: #ffffff;
  --ion-color-danger-contrast-rgb: 255, 255, 255;
  --ion-color-danger-shade: #e04055;
  --ion-color-danger-tint: #ff5b71;

  --ion-color-dark: #f4f5f8;
  --ion-color-dark-rgb: 244, 245, 248;
  --ion-color-dark-contrast: #000000;
  --ion-color-dark-contrast-rgb: 0, 0, 0;
  --ion-color-dark-shade: #d7d8da;
  --ion-color-dark-tint: #f5f6f9;

  --ion-color-medium: #989aa2;
  --ion-color-medium-rgb: 152, 154, 162;
  --ion-color-medium-contrast: #000000;
  --ion-color-medium-contrast-rgb: 0, 0, 0;
  --ion-color-medium-shade: #86888f;
  --ion-color-medium-tint: #a2a4ab;

  --ion-color-light: #222428;
  --ion-color-light-rgb: 34, 36, 40;
  --ion-color-light-contrast: #ffffff;
  --ion-color-light-contrast-rgb: 255, 255, 255;
  --ion-color-light-shade: #1e2023;
  --ion-color-light-tint: #383a3e;
}

/* Ionic's .ion-palette-dark gives every variant a black button background, where the raw base already passes AA. */

.ion-palette-dark ion-toast.ion-color-success,
.ion-palette-dark ion-toast.ion-color-danger,
.ion-palette-dark ion-toast.ion-color-primary,
.ion-palette-dark ion-toast.ion-color-medium { --rns-toast-button-text: var(--ion-color-base); }

.dark-theme ion-toast.ion-color-danger { --rns-toast-button-text: #b3243a; }

.dark-theme ion-toast.ion-color-primary { --rns-toast-button-text: #1b4fb8; }

.dark-theme ion-toast.ion-color-success,
.dark-theme ion-toast.ion-color-medium { --rns-toast-button-text: var(--ion-color-base); }

/*
 * iOS Dark Theme
 * ----------------------------------------------------------------------------
 */

.dark-theme.ioss {
  --ion-background-color: #000000;
  --ion-background-color-rgb: 0, 0, 0;

  --ion-text-color: #ffffff;
  --ion-text-color-rgb: 255, 255, 255;

  --ion-color-step-50: #0d0d0d;
  --ion-color-step-100: #1a1a1a;
  --ion-color-step-150: #262626;
  --ion-color-step-200: #333333;
  --ion-color-step-250: #404040;
  --ion-color-step-300: #4d4d4d;
  --ion-color-step-350: #595959;
  --ion-color-step-400: #666666;
  --ion-color-step-450: #737373;
  --ion-color-step-500: #808080;
  --ion-color-step-550: #8c8c8c;
  --ion-color-step-600: #999999;
  --ion-color-step-650: #a6a6a6;
  --ion-color-step-700: #b3b3b3;
  --ion-color-step-750: #bfbfbf;
  --ion-color-step-800: #cccccc;
  --ion-color-step-850: #d9d9d9;
  --ion-color-step-900: #e6e6e6;
  --ion-color-step-950: #f2f2f2;

  --ion-toolbar-background: #0d0d0d;

  --ion-item-background: #000000;
}

/*
 * Material Design Dark Theme
 * ----------------------------------------------------------------------------
 */

.dark-theme.md,
.dark-theme.ios {
  --ion-background-color: #121212;
  --ion-background-color-rgb: 18, 18, 18;

  --ion-text-color: #ffffff;
  --ion-text-color-rgb: 255, 255, 255;

  --ion-border-color: #222222;

  --ion-color-step-50: #1e1e1e;
  --ion-color-step-100: #2a2a2a;
  --ion-color-step-150: #363636;
  --ion-color-step-200: #414141;
  --ion-color-step-250: #4d4d4d;
  --ion-color-step-300: #595959;
  --ion-color-step-350: #656565;
  --ion-color-step-400: #717171;
  --ion-color-step-450: #7d7d7d;
  --ion-color-step-500: #898989;
  --ion-color-step-550: #949494;
  --ion-color-step-600: #a0a0a0;
  --ion-color-step-650: #acacac;
  --ion-color-step-700: #b8b8b8;
  --ion-color-step-750: #c4c4c4;
  --ion-color-step-800: #d0d0d0;
  --ion-color-step-850: #dbdbdb;
  --ion-color-step-900: #e7e7e7;
  --ion-color-step-950: #f3f3f3;

  --ion-item-background: #1e1e1e;

  --ion-toolbar-background: #1f1f1f;

  --ion-tab-bar-background: #1f1f1f;
}

ion-toolbar.actions {
  --background: #050505;
}

/* Centered page titles — md aligns left by default; mimic Ionic's iOS technique
   (absolute over the toolbar, buttons clickable via pointer-events). Rns theme
   titleAlign: 'start' puts .rns-title-start on <html> and opts an app out. */

html:not(.rns-title-start) ion-toolbar ion-title {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-inline: 90px;
  text-align: center;
  pointer-events: none;
}

/* Three surface levels: main title toolbar (strongest), secondary header
   toolbars — segments, filters… (middle), content (base). An app opts in by
   defining --rns-subheader-background per theme; without it nothing changes. */

ion-header ion-toolbar:not(.toolbar-title-default) {
  --background: var(
    --rns-subheader-background,
    var(--ion-toolbar-background, var(--ion-background-color, #fff))
  );
}
/*
 * Erp App Local Theme Variables
 * ----------------------------------------------------------------------------
 * This file contains Erp app specific theme overrides.
 * It imports the common theme from @commons/monorepo and adds Erp-specific customizations.
 */

/* Erp App Specific Colors — aligned with the design-plan mockups
   (light gray canvas, white cards, blue primary, orange accents; same palette
   the shifts calendar and planner already hardcode) */
:root {
  --ion-color-primary: #3b82f6;
  --ion-color-primary-rgb: 59, 130, 246;
  --ion-color-primary-contrast: #ffffff;
  --ion-color-primary-contrast-rgb: 255, 255, 255;
  --ion-color-primary-shade: #3472d8;
  --ion-color-primary-tint: #4f8ff7;

  --ion-color-secondary: #22c55e;
  --ion-color-secondary-rgb: 34, 197, 94;
  --ion-color-secondary-contrast: #ffffff;
  --ion-color-secondary-contrast-rgb: 255, 255, 255;
  --ion-color-secondary-shade: #1ead53;
  --ion-color-secondary-tint: #38cb6e;

  --ion-color-success: #22c55e;
  --ion-color-success-rgb: 34, 197, 94;
  --ion-color-success-contrast: #ffffff;
  --ion-color-success-contrast-rgb: 255, 255, 255;
  --ion-color-success-shade: #1ead53;
  --ion-color-success-tint: #38cb6e;

  --ion-color-warning: #f97316;
  --ion-color-warning-rgb: 249, 115, 22;
  --ion-color-warning-contrast: #ffffff;
  --ion-color-warning-contrast-rgb: 255, 255, 255;
  --ion-color-warning-shade: #db6513;
  --ion-color-warning-tint: #fa812d;

  --ion-color-tertiary: #a855f7;
  --ion-color-tertiary-rgb: 168, 85, 247;
  --ion-color-tertiary-contrast: #ffffff;
  --ion-color-tertiary-contrast-rgb: 255, 255, 255;
  --ion-color-tertiary-shade: #944bd9;
  --ion-color-tertiary-tint: #b166f8;

  /* Light gray app canvas with white cards, as in the mockups */
  --ion-background-color: #f2f4f8;
  --ion-background-color-rgb: 242, 244, 248;
  --ion-card-background: #ffffff;
  --ion-item-background: #ffffff;
  --ion-toolbar-background: #ffffff;
  --ion-tab-bar-background: #ffffff;
  --rns-subheader-background: #f8f9fc;

  /* Erp App Accent - Custom Orange */
  --ion-color-accent: #f97316;
  --ion-color-accent-rgb: 249, 115, 22;
  --ion-color-accent-contrast: #ffffff;
  --ion-color-accent-contrast-rgb: 255, 255, 255;
  --ion-color-accent-shade: #db6513;
  --ion-color-accent-tint: #fa812d;

  /* Erp App Custom Font */
  --ion-font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  
  /* Erp App Custom Spacing */
  --ion-padding: 20px;
  --ion-margin: 20px;
  
  /* Erp App Custom Border Radius */
  --ion-border-radius: 12px;
  --ion-border-radius-small: 6px;
  --ion-border-radius-large: 16px;
}

/* Erp App Dark Theme Overrides */
.dark-theme {
  /* Erp App Dark Primary */
  --ion-color-primary: #60a5fa;
  --ion-color-primary-rgb: 96, 165, 250;
  --ion-color-primary-contrast: #000000;
  --ion-color-primary-contrast-rgb: 0, 0, 0;
  --ion-color-primary-shade: #5491dc;
  --ion-color-primary-tint: #70aefb;

  --ion-background-color: #0f172a;
  --ion-background-color-rgb: 15, 23, 42;
  --ion-card-background: #1e293b;
  --ion-item-background: #1e293b;
  --ion-toolbar-background: #1e293b;
  --ion-tab-bar-background: #1e293b;
  --rns-subheader-background: #172033;

  /* Erp App Dark Secondary */
  --ion-color-secondary: #66bb6a;
  --ion-color-secondary-rgb: 102, 187, 106;
  --ion-color-secondary-contrast: #000000;
  --ion-color-secondary-contrast-rgb: 0, 0, 0;
  --ion-color-secondary-shade: #5aa55e;
  --ion-color-secondary-tint: #75c279;

  /* Erp App Dark Accent */
  --ion-color-accent: #ffb74d;
  --ion-color-accent-rgb: 255, 183, 77;
  --ion-color-accent-contrast: #000000;
  --ion-color-accent-contrast-rgb: 0, 0, 0;
  --ion-color-accent-shade: #e0a144;
  --ion-color-accent-tint: #ffbe5f;
}

/* Erp App Specific Component Styles */
.base-app-card {
  --ion-card-background: var(--ion-color-light);
  --ion-card-border-radius: var(--ion-border-radius);
  --ion-card-box-shadow: var(--ion-box-shadow);
}

.base-app-button {
  --ion-button-border-radius: var(--ion-border-radius);
  --ion-button-font-weight: 500;
}

/* Erp App Custom Classes */
.ion-color-accent {
  --ion-color-base: var(--ion-color-accent);
  --ion-color-base-rgb: var(--ion-color-accent-rgb);
  --ion-color-contrast: var(--ion-color-accent-contrast);
  --ion-color-contrast-rgb: var(--ion-color-accent-contrast-rgb);
  --ion-color-shade: var(--ion-color-accent-shade);
  --ion-color-tint: var(--ion-color-accent-tint);
}