.calculator {

  /* Flexbox Utilities */
  .flex {
    display: flex;
  }

  .inline-flex {
    display: inline-flex;
  }

  .flex-row {
    flex-direction: row;
  }

  .flex-col {
    flex-direction: column;
  }

  .flex-row-reverse {
    flex-direction: row-reverse;
  }

  .flex-col-reverse {
    flex-direction: column-reverse;
  }

  .flex-wrap {
    flex-wrap: wrap;
  }

  .flex-wrap-reverse {
    flex-wrap: wrap-reverse;
  }

  .flex-nowrap {
    flex-wrap: nowrap;
  }

  .flex-1 {
    flex: 1;
  }

  /* Flexbox Alignment Utilities */
  .items-start {
    align-items: flex-start;
  }

  .items-center {
    align-items: center;
  }

  .items-end {
    align-items: flex-end;
  }

  .items-baseline {
    align-items: baseline;
  }

  .items-stretch {
    align-items: stretch;
  }

  .justify-start {
    justify-content: flex-start;
  }

  .justify-center {
    justify-content: center;
  }

  .justify-end {
    justify-content: flex-end;
  }

  .justify-between {
    justify-content: space-between;
  }

  .justify-around {
    justify-content: space-around;
  }

  .justify-evenly {
    justify-content: space-evenly;
  }

  .content-start {
    align-content: flex-start;
  }

  .content-center {
    align-content: center;
  }

  .content-end {
    align-content: flex-end;
  }

  .content-between {
    align-content: space-between;
  }

  .content-around {
    align-content: space-around;
  }

  .content-stretch {
    align-content: stretch;
  }

  .flex-grow-0 {
    flex-grow: 0;
  }

  .flex-grow-1 {
    flex-grow: 1;
  }

  .flex-shrink-0 {
    flex-shrink: 0;
  }

  .flex-shrink-1 {
    flex-shrink: 1;
  }

  /* Flexbox Order Utilities */
  .order-first {
    order: -9999;
  }

  .order-last {
    order: 9999;
  }

  .order-none {
    order: 0;
  }

  .order-1 {
    order: 1;
  }

  .order-2 {
    order: 2;
  }

  .order-3 {
    order: 3;
  }

  .order-4 {
    order: 4;
  }

  .order-5 {
    order: 5;
  }

  .order-6 {
    order: 6;
  }

  .order-7 {
    order: 7;
  }

  .order-8 {
    order: 8;
  }

  .order-9 {
    order: 9;
  }

  .order-10 {
    order: 10;
  }

  .order-11 {
    order: 11;
  }

  .order-12 {
    order: 12;
  }

  /* Flexbox Self Alignment Utilities */
  .self-auto {
    align-self: auto;
  }

  .self-start {
    align-self: flex-start;
  }

  .self-center {
    align-self: center;
  }

  .self-end {
    align-self: flex-end;
  }

  .self-baseline {
    align-self: baseline;
  }

  .self-stretch {
    align-self: stretch;
  }

  /* Flexbox Combo Utilities */
  .flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .flex-start {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
  }

  .flex-end {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
  }

  .flex-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .flex-around {
    display: flex;
    justify-content: space-around;
    align-items: center;
  }

  .flex-evenly {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
  }

  .flex-col-center {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .flex-col-start {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
  }

  .flex-col-end {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-end;
  }

  .flex-col-between {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
  }

  .flex-col-around {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
  }

  .flex-col-evenly {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
  }

  /* Margin Utilities */
  .m-0 {
    margin: 0px;
  }

  .m-4 {
    margin: 4px;
  }

  .m-8 {
    margin: 8px;
  }

  .m-10 {
    margin: 10px;
  }

  .m-12 {
    margin: 12px;
  }

  .m-16 {
    margin: 16px;
  }

  .m-20 {
    margin: 20px;
  }

  .m-24 {
    margin: 24px;
  }

  .m-30 {
    margin: 30px;
  }

  .m-40 {
    margin: 40px;
  }

  .m-50 {
    margin: 50px;
  }

  .m-60 {
    margin: 60px;
  }

  /* Margin Top Utilities */
  .mt-5px {
    margin-top: 5px;
  }

  .mt-0 {
    margin-top: 0px;
  }

  .mt-4 {
    margin-top: 4px;
  }

  .mt-8 {
    margin-top: 8px;
  }

  .mt-10 {
    margin-top: 10px;
  }

  .mt-12 {
    margin-top: 12px;
  }

  .mt-16 {
    margin-top: 16px;
  }

  .mt-20 {
    margin-top: 20px;
  }

  .mt-24 {
    margin-top: 24px;
  }

  .mt-30 {
    margin-top: 30px;
  }

  .mt-40 {
    margin-top: 40px;
  }

  .mt-50 {
    margin-top: 50px;
  }

  .mt-60 {
    margin-top: 60px;
  }

  /* Margin Bottom Utilities */
  .mb-0 {
    margin-bottom: 0px;
  }

  .mb-4 {
    margin-bottom: 4px;
  }

  .mb-8 {
    margin-bottom: 8px;
  }

  .mb-10 {
    margin-bottom: 10px;
  }

  .mb-12 {
    margin-bottom: 12px;
  }

  .mb-16 {
    margin-bottom: 16px;
  }

  .mb-20 {
    margin-bottom: 20px;
  }

  .mb-24 {
    margin-bottom: 24px;
  }

  .mb-30 {
    margin-bottom: 30px;
  }

  .mb-40 {
    margin-bottom: 40px;
  }

  .mb-50 {
    margin-bottom: 50px;
  }

  .mb-60 {
    margin-bottom: 60px;
  }

  /* Margin Left Utilities */
  .ml-0 {
    margin-left: 0px;
  }

  .ml-4 {
    margin-left: 4px;
  }

  .ml-8 {
    margin-left: 8px;
  }

  .ml-10 {
    margin-left: 10px;
  }

  .ml-12 {
    margin-left: 12px;
  }

  .ml-16 {
    margin-left: 16px;
  }

  .ml-20 {
    margin-left: 20px;
  }

  .ml-24 {
    margin-left: 24px;
  }

  .ml-30 {
    margin-left: 30px;
  }

  .ml-40 {
    margin-left: 40px;
  }

  .ml-50 {
    margin-left: 50px;
  }

  .ml-60 {
    margin-left: 60px;
  }

  /* Margin Right Utilities */
  .mr-0 {
    margin-right: 0px;
  }

  .mr-4 {
    margin-right: 4px;
  }

  .mr-8 {
    margin-right: 8px;
  }

  .mr-10 {
    margin-right: 10px;
  }

  .mr-12 {
    margin-right: 12px;
  }

  .mr-16 {
    margin-right: 16px;
  }

  .mr-20 {
    margin-right: 20px;
  }

  .mr-24 {
    margin-right: 24px;
  }

  .mr-30 {
    margin-right: 30px;
  }

  .mr-40 {
    margin-right: 40px;
  }

  .mr-50 {
    margin-right: 50px;
  }

  .mr-60 {
    margin-right: 60px;
  }

  /* Margin X Utilities (Left and Right) */
  .mx-0 {
    margin-left: 0px;
    margin-right: 0px;
  }

  .mx-4 {
    margin-left: 4px;
    margin-right: 4px;
  }

  .mx-8 {
    margin-left: 8px;
    margin-right: 8px;
  }

  .mx-10 {
    margin-left: 10px;
    margin-right: 10px;
  }

  .mx-12 {
    margin-left: 12px;
    margin-right: 12px;
  }

  .mx-16 {
    margin-left: 16px;
    margin-right: 16px;
  }

  .mx-20 {
    margin-left: 20px;
    margin-right: 20px;
  }

  .mx-24 {
    margin-left: 24px;
    margin-right: 24px;
  }

  .mx-30 {
    margin-left: 30px;
    margin-right: 30px;
  }

  .mx-40 {
    margin-left: 40px;
    margin-right: 40px;
  }

  .mx-50 {
    margin-left: 50px;
    margin-right: 50px;
  }

  .mx-60 {
    margin-left: 60px;
    margin-right: 60px;
  }

  /* Margin Y Utilities (Top and Bottom) */
  .my-0 {
    margin-top: 0px;
    margin-bottom: 0px;
  }

  .my-4 {
    margin-top: 4px;
    margin-bottom: 4px;
  }

  .my-8 {
    margin-top: 8px;
    margin-bottom: 8px;
  }

  .my-10 {
    margin-top: 10px;
    margin-bottom: 10px;
  }

  .my-12 {
    margin-top: 12px;
    margin-bottom: 12px;
  }

  .my-16 {
    margin-top: 16px;
    margin-bottom: 16px;
  }

  .my-20 {
    margin-top: 20px;
    margin-bottom: 20px;
  }

  .my-24 {
    margin-top: 24px;
    margin-bottom: 24px;
  }

  .my-30 {
    margin-top: 30px;
    margin-bottom: 30px;
  }

  .my-40 {
    margin-top: 40px;
    margin-bottom: 40px;
  }

  .my-50 {
    margin-top: 50px;
    margin-bottom: 50px;
  }

  .my-60 {
    margin-top: 60px;
    margin-bottom: 60px;
  }

  /* Padding Utilities */
  .p-0 {
    padding: 0px;
  }

  .p-4 {
    padding: 4px;
  }

  .p-8 {
    padding: 8px;
  }

  .p-10 {
    padding: 10px;
  }

  .p-12 {
    padding: 12px;
  }

  .p-16 {
    padding: 16px;
  }

  .p-20 {
    padding: 20px;
  }

  .p-24 {
    padding: 24px;
  }

  .p-30 {
    padding: 30px;
  }

  .p-40 {
    padding: 40px;
  }

  .p-50 {
    padding: 50px;
  }

  .p-60 {
    padding: 60px;
  }

  /* Padding Top Utilities */
  .pt-0 {
    padding-top: 0px;
  }

  .pt-4 {
    padding-top: 4px;
  }

  .pt-8 {
    padding-top: 8px;
  }

  .pt-10 {
    padding-top: 10px;
  }

  .pt-12 {
    padding-top: 12px;
  }

  .pt-16 {
    padding-top: 16px;
  }

  .pt-20 {
    padding-top: 20px;
  }

  .pt-24 {
    padding-top: 24px;
  }

  .pt-30 {
    padding-top: 30px;
  }

  .pt-40 {
    padding-top: 40px;
  }

  .pt-50 {
    padding-top: 50px;
  }

  .pt-60 {
    padding-top: 60px;
  }

  /* Padding Bottom Utilities */
  .pb-0 {
    padding-bottom: 0px;
  }

  .pb-4 {
    padding-bottom: 4px;
  }

  .pb-8 {
    padding-bottom: 8px;
  }

  .pb-10 {
    padding-bottom: 10px;
  }

  .pb-12 {
    padding-bottom: 12px;
  }

  .pb-16 {
    padding-bottom: 16px;
  }

  .pb-20 {
    padding-bottom: 20px;
  }

  .pb-24 {
    padding-bottom: 24px;
  }

  .pb-30 {
    padding-bottom: 30px;
  }

  .pb-40 {
    padding-bottom: 40px;
  }

  .pb-50 {
    padding-bottom: 50px;
  }

  .pb-60 {
    padding-bottom: 60px;
  }

  /* Padding Left Utilities */
  .pl-0 {
    padding-left: 0px;
  }

  .pl-4 {
    padding-left: 4px;
  }

  .pl-8 {
    padding-left: 8px;
  }

  .pl-10 {
    padding-left: 10px;
  }

  .pl-12 {
    padding-left: 12px;
  }

  .pl-16 {
    padding-left: 16px;
  }

  .pl-20 {
    padding-left: 20px;
  }

  .pl-24 {
    padding-left: 24px;
  }

  .pl-30 {
    padding-left: 30px;
  }

  .pl-40 {
    padding-left: 40px;
  }

  .pl-50 {
    padding-left: 50px;
  }

  .pl-60 {
    padding-left: 60px;
  }

  /* Padding Right Utilities */
  .pr-0 {
    padding-right: 0px;
  }

  .pr-4 {
    padding-right: 4px;
  }

  .pr-8 {
    padding-right: 8px;
  }

  .pr-10 {
    padding-right: 10px;
  }

  .pr-12 {
    padding-right: 12px;
  }

  .pr-16 {
    padding-right: 16px;
  }

  .pr-20 {
    padding-right: 20px;
  }

  .pr-24 {
    padding-right: 24px;
  }

  .pr-30 {
    padding-right: 30px;
  }

  .pr-40 {
    padding-right: 40px;
  }

  .pr-50 {
    padding-right: 50px;
  }

  .pr-60 {
    padding-right: 60px;
  }

  /* Padding X Utilities (Left and Right) */
  .px-0 {
    padding-left: 0px;
    padding-right: 0px;
  }

  .px-4 {
    padding-left: 4px;
    padding-right: 4px;
  }

  .px-8 {
    padding-left: 8px;
    padding-right: 8px;
  }

  .px-10 {
    padding-left: 10px;
    padding-right: 10px;
  }

  .px-12 {
    padding-left: 12px;
    padding-right: 12px;
  }

  .px-16 {
    padding-left: 16px;
    padding-right: 16px;
  }

  .px-20 {
    padding-left: 20px;
    padding-right: 20px;
  }

  .px-24 {
    padding-left: 24px;
    padding-right: 24px;
  }

  .px-30 {
    padding-left: 30px;
    padding-right: 30px;
  }

  .px-40 {
    padding-left: 40px;
    padding-right: 40px;
  }

  .px-50 {
    padding-left: 50px;
    padding-right: 50px;
  }

  .px-60 {
    padding-left: 60px;
    padding-right: 60px;
  }

  /* Padding Y Utilities (Top and Bottom) */
  .py-0 {
    padding-top: 0px !important;
    padding-bottom: 0px !important;
  }

  .py-4 {
    padding-top: 4px;
    padding-bottom: 4px;
  }

  .py-8 {
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .py-10 {
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .py-12 {
    padding-top: 12px;
    padding-bottom: 12px;
  }

  .py-16 {
    padding-top: 16px;
    padding-bottom: 16px;
  }

  .py-20 {
    padding-top: 20px;
    padding-bottom: 20px;
  }

  .py-24 {
    padding-top: 24px;
    padding-bottom: 24px;
  }

  .py-30 {
    padding-top: 30px;
    padding-bottom: 30px;
  }

  .py-40 {
    padding-top: 40px;
    padding-bottom: 40px;
  }

  .py-50 {
    padding-top: 50px;
    padding-bottom: 50px;
  }

  .py-60 {
    padding-top: 60px;
    padding-bottom: 60px;
  }

  /* Gap Utilities */
  .gap-0 {
    gap: 0px !important;
  }

  .gap-4 {
    gap: 4px !important;
  }

  .gap-8 {
    gap: 8px !important;
  }

  .gap-10 {
    gap: 10px !important;
  }

  .gap-12 {
    gap: 12px !important;
  }

  .gap-16 {
    gap: 16px !important;
  }

  .gap-20 {
    gap: 20px !important;
  }

  .gap-24 {
    gap: 24px !important;
  }

  .gap-30 {
    gap: 30px !important;
  }

  .gap-40 {
    gap: 40px !important;
  }

  .gap-50 {
    gap: 50px !important;
  }

  .gap-60 {
    gap: 60px !important;
  }

  /* Position Utilities */
  .relative {
    position: relative;
  }

  .absolute {
    position: absolute;
  }

  .fixed {
    position: fixed;
  }

  .sticky {
    position: sticky;
  }

  .static {
    position: static;
  }

  /* Position Top Utilities */
  .top-0 {
    top: 0;
  }

  .top-4 {
    top: 4px;
  }

  .top-8 {
    top: 8px;
  }

  .top-10 {
    top: 10px;
  }

  .top-12 {
    top: 12px;
  }

  .top-16 {
    top: 16px;
  }

  .top-20 {
    top: 20px;
  }

  .top-24 {
    top: 24px;
  }

  .top-30 {
    top: 30px;
  }

  .top-40 {
    top: 40px;
  }

  .top-50 {
    top: 50px;
  }

  .top-60 {
    top: 60px;
  }

  /* Position Right Utilities */
  .right-0 {
    right: 0;
  }

  .right-4 {
    right: 4px;
  }

  .right-8 {
    right: 8px;
  }

  .right-10 {
    right: 10px;
  }

  .right-12 {
    right: 12px;
  }

  .right-16 {
    right: 16px;
  }

  .right-20 {
    right: 20px;
  }

  .right-24 {
    right: 24px;
  }

  .right-30 {
    right: 30px;
  }

  .right-40 {
    right: 40px;
  }

  .right-50 {
    right: 50px;
  }

  .right-60 {
    right: 60px;
  }

  /* Position Bottom Utilities */
  .bottom-0 {
    bottom: 0;
  }

  .bottom-4 {
    bottom: 4px;
  }

  .bottom-8 {
    bottom: 8px;
  }

  .bottom-10 {
    bottom: 10px;
  }

  .bottom-12 {
    bottom: 12px;
  }

  .bottom-16 {
    bottom: 16px;
  }

  .bottom-20 {
    bottom: 20px;
  }

  .bottom-24 {
    bottom: 24px;
  }

  .bottom-30 {
    bottom: 30px;
  }

  .bottom-40 {
    bottom: 40px;
  }

  .bottom-50 {
    bottom: 50px;
  }

  .bottom-60 {
    bottom: 60px;
  }

  /* Position Left Utilities */
  .left-0 {
    left: 0;
  }

  .left-4 {
    left: 4px;
  }

  .left-8 {
    left: 8px;
  }

  .left-10 {
    left: 10px;
  }

  .left-12 {
    left: 12px;
  }

  .left-16 {
    left: 16px;
  }

  .left-20 {
    left: 20px;
  }

  .left-24 {
    left: 24px;
  }

  .left-30 {
    left: 30px;
  }

  .left-40 {
    left: 40px;
  }

  .left-50 {
    left: 50px;
  }

  .left-60 {
    left: 60px;
  }

  /* Width Utilities */
  .w-full {
    width: 100%;
  }

  .w-screen {
    width: 100vw;
  }

  .w-fit {
    width: fit-content;
  }

  .w-auto {
    width: auto;
  }

  /* Height Utilities */
  .h-full {
    height: 100%;
  }

  .h-screen {
    height: 100vh;
  }

  .h-fit {
    height: fit-content;
  }

  .h-auto {
    height: auto;
  }

  /* Max-Width Utilities */
  .max-w-full {
    max-width: 100%;
  }

  .max-w-screen {
    max-width: 100vw;
  }

  .max-w-fit {
    max-width: fit-content;
  }

  .max-w-none {
    max-width: none;
  }

  /* Max-Height Utilities */
  .max-h-full {
    max-height: 100%;
  }

  .max-h-screen {
    max-height: 100vh;
  }

  .max-h-fit {
    max-height: fit-content;
  }

  .max-h-none {
    max-height: none;
  }

  /* Font Size Utilities */
  .text-xs {
    font-size: 0.75rem;
  }

  .text-sm {
    font-size: 0.875rem;
  }

  .text-base {
    font-size: 1rem;
  }

  .text-lg {
    font-size: 1.125rem;
  }

  .text-xl {
    font-size: 1.25rem;
  }

  /* Font Weight Utilities */
  .font-thin {
    font-weight: 100;
  }

  .font-light {
    font-weight: 300;
  }

  .font-normal {
    font-weight: 400;
  }

  .font-bold {
    font-weight: 700;
  }

  .font-black {
    font-weight: 900;
  }

  /* Text Alignment Utilities */
  .text-left {
    text-align: left;
  }

  .text-center {
    text-align: center;
  }

  .text-right {
    text-align: right;
  }

  /* Media Queries for Responsive Utilities */

  /* Extra large devices (1200px and below) */
  @media (max-width: 1200px) {
    .xl\:flex-col {
      flex-direction: column;
    }

    .xl\:flex-row {
      flex-direction: row;
    }
  }

  /* Large devices (992px and below) */
  @media (max-width: 992px) {
    .lg\:flex-col {
      flex-direction: column;
    }

    .lg\:flex-row {
      flex-direction: row;
    }
  }

  /* Medium devices (768px and below) */
  @media (max-width: 768px) {
    .md\:flex-col {
      flex-direction: column;
    }

    .md\:flex-row {
      flex-direction: row;
    }
  }

  /* Small devices (600px and below) */
  @media (max-width: 600px) {
    .sm\:flex-col {
      flex-direction: column;
    }

    .sm\:flex-row {
      flex-direction: row;
    }
  }

  /* Extra small devices (480px and below) */
  @media (max-width: 480px) {
    .xs\:flex-col {
      flex-direction: column;
    }
  }
}