.center-contents-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.left-contents-container {
  display: flex;
  justify-content: left;
  align-items: center;
}

.right-contents-container {
  display: flex;
  justify-content: right;
  align-items: center;
}

.d-pt-2 {
  padding-top: 2px !important;
}

.d-pt-4 {
  padding-top: 4px !important;
}

.d-pb-2 {
  padding-bottom: 2px !important;
}

.d-pa-1 {
  padding: 1px !important;
}

.d-pa-2 {
  padding: 2px !important;
}

.d-pa-4 {
  padding: 4px !important;
}

.d-gap-3 {
  gap: 3px !important;
}

.d-ma-4 {
  margin: 4px !important;
}

.d-width-login {
  width: 100%;
  margin: 0 auto;
}

.d-width-key-label {
  width: 70%;
  margin: 0 auto;
}

.d-width-listsettings-field {
  width: 40%;
}

.item-details-image {
  width: 90px;
  height: 90px;
}

.mud-nav-link-text {
  padding-top: 2px !important;
}


.fixed-buttons-top-right {
  position: fixed;
  right: 14px;
  top: 89px;
  z-index: 1350;
}

  @media only screen and (min-width: 500px) {

    .d-pt-2 {
      padding-top: 8px !important;
    }

    .d-pt-4 {
      padding-top: 16px !important;
    }

    .d-pb-2 {
      padding-bottom: 8px !important;
    }

    .d-pa-1 {
      padding: 4px !important;
    }

    .d-pa-2 {
      padding: 8px !important;
    }

    .d-pa-4 {
      padding: 16px !important;
    }

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

    .d-ma-4 {
      margin: 16px !important;
    }

    .d-width-login {
      width: 75%;
      margin: 0 auto;
    }

  .d-width-key-label {
    width: 50%;
    margin: 0 auto;
  }

    .d-width-listsettings-field {
      width: 30%;
    }

    .item-details-image {
      width: 120px;
      height: 120px;
    }

    .mud-nav-link-text {
      padding-top: 0px !important;
    }


    .fixed-buttons-top-right {
      position: fixed;
      right: 14px;
      top: 98px;
      z-index: 1350;
    }
  }

  @media only screen and (min-width: 1000px) {
    .d-width-login {
      width: 50%;
      margin: 0 auto;
    }

    .d-width-key-label {
      width: 40%;
      margin: 0 auto;
    }

    .d-width-listsettings-field {
      width: 20%;
    }

  .item-details-image {
    width: 150px;
    height: 150px;
  }
  }
  /* These are the default font sizes */
:root {
  --mud-typography-default-size: .875rem !important;
  --mud-typography-h1-size: 6rem !important;
  --mud-typography-h2-size: 3.75rem !important;
  --mud-typography-h3-size: 3rem !important;
  --mud-typography-h4-size: 2.125rem !important;
  --mud-typography-h5-size: 1.5rem !important;
  --mud-typography-h6-size: 1.25rem !important;
  --mud-typography-subtitle1-size: 1rem !important;
  --mud-typography-subtitle2-size: .875rem !important;
  --mud-typography-body1-size: 1rem !important;
  --mud-typography-body2-size: .875rem !important;
  --mud-typography-input-size: 1rem !important;
  --mud-typography-button-size: .875rem !important;
  --mud-palette-divider: rgba(255,255,255, 0.3) !important;
/*  --mud-zindex-popover: 1420 !important;*/
}

/* These are the font sizes that kick in at 500px width or LESS */
@media only screen and (max-width: 500px) {
  :root {
    --mud-typography-default-size: .700rem !important;
    --mud-typography-h1-size: 4.800rem !important;
    --mud-typography-h2-size: 3.000rem !important;
    --mud-typography-h3-size: 2.400rem !important;
    --mud-typography-h4-size: 1.700rem !important;
    --mud-typography-h5-size: 1.200rem !important;
    --mud-typography-h6-size: 1.000rem !important;
    --mud-typography-subtitle1-size: 0.800rem !important;
    --mud-typography-subtitle2-size: 0.700rem !important;
    --mud-typography-body1-size: 0.800rem !important;
    --mud-typography-body2-size: 0.700rem !important;
    --mud-typography-input-size: 0.800rem !important;
    --mud-typography-button-size: 0.700rem !important;
  }
}


/*  TOOL TIP END   */
















.my-mud-list-item-clickable {
  color: var(--mud-palette-text-primary);
  background-color: rgba(40, 40, 40, 1) !important;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--mud-default-borderradius);
  margin: 0;
  outline: 0;
  user-select: none;
  vertical-align: middle;
  background-color: rgba(0,0,0,0);
  -webkit-appearance: none;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
  padding-left: 4px;
  padding-right: 4px;
}

.filter-icon-style {
  padding-left: 4px;
  padding-top: 4px;
}


.thin-outline {
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--mud-default-borderradius);
  transition: border-width,border-color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms
}

  .thin-outline:hover {
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--mud-default-borderradius);
    border-color: var(--mud-palette-action-default);
  }

.selected-item-thin-outline {
  border: 1px solid var(--mud-palette-primary);
  border-radius: var(--mud-default-borderradius);
}

  .selected-item-thin-outline:hover {
    border: 1px solid var(--mud-palette-primary);
    border-radius: var(--mud-default-borderradius);
  }

.my-hoverable-div {
  transition: background-color 0.2s ease-in-out; 
}

  .my-hoverable-div:hover {
    background-color: var(--mud-palette-primary-hover);
    cursor: pointer;
  }


.links-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}





.clickable-element {
  cursor: default; /* Default cursor */
}

.clickable-element:hover {
  cursor: pointer; /* Hand cursor */
}

.mud-nav-item {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  text-decoration: none;
  cursor: pointer;
}


.image-container {
  position: relative; /* Enable absolute positioning for child elements */
}

.item-image {
  width: 100%; /* Stretch image to fill container */
  height: 100%;
}

.circle-button {
  position: absolute; /* Make button absolute relative to container */
  top: 5px; /* Adjust top position for overlap */
  right: 5px; /* Adjust right position for overlap */
}

.item-text-div {
  padding-left: 5px;
  padding-right: 5px;
  text-align: center;
}


.item-text-font-size {
  font-size: 9px;
}

@media only screen and (min-width: 500px) {
  .item-text-font-size {
    font-size: 10px;
  }
}

@media only screen and (min-width: 1000px) {
  .item-text-font-size {
    font-size: 12px;
  }
}



.d-item-width {
  width: 20%
}

@media only screen and (min-width: 500px) {
  .d-item-width {
    width: 12%
  }
}

@media only screen and (min-width: 1000px) {
  .d-item-width {
    width: 10%
  }
}

.right-drawer-nav-link > div {
  padding-inline-start: 10px !important;
  padding-left: 10px !important;
}


.item-details-in-dialog {
  min-height: 100px
}

.select-section-image {
  height: 20px;
  width: 20px;
}

.select-section-row {
  margin-top: -1px
}

.select-color-row {
  padding-left: 2px;
}

@media only screen and (min-width: 500px) {
  .item-details-in-dialog {
    min-height: 130px
  }

  .select-section-image {
    height: 23px;
    width: 23px;
  }

  .select-section-row {
    margin-top: -1px
  }

  .select-color-row {
    padding-left: 4px;
  }
}

@media only screen and (min-width: 1000px) {
  .item-details-in-dialog {
    min-height: 170px
  }

  .select-section-image {
    height: 25px;
    width: 25px;
  }

  .select-section-row {
    margin-top: -2px
  }

  .select-color-row {
    padding-left: 5px;
  }
}


.mud-drawer {
  display: flex;
  flex-shrink: 0;
  flex-grow: 1;
  flex: 0 0 auto;
  outline: 0;
  position: fixed;
  z-index: var(--mud-zindex-drawer);
  overflow-y: auto;
  flex-direction: column;
  color: var(--mud-palette-drawer-text);
  background-color: var(--mud-palette-drawer-background);
  --mud-drawer-content-height: 0;
  box-shadow: none;
}


.item-image-size {
  height: 50px;
  width: 50px;
}


.my-mudpaper {
  padding: 5px;
}

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

.my-pagelevel-margin {
  margin-left: 10px;
  margin-right: 10px;
}


.item-image-in-dialog {
  width: 25px;
  height: 25px;
}

@media only screen and (min-width: 500px) {
  .item-image-in-dialog {
    width: 40px;
    height: 40px;
  }
}

.mud-drop-container .ma-4 {
  margin: 0px !important;
}

.clickable-link {
  text-decoration: none;
}

.clickable-link:hover {
  text-decoration: underline !important;
}

.dialog-max-height {
  max-height: 500px;
  overflow-y: auto;
  scroll-behavior: smooth;
  padding: 4px 4px; /* top & bottom | left & right */
}

.my-lined-border {
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--mud-default-borderradius);
}

.item-skeleton {
  border-radius: 5px
}

.bolded {
  color: var(--mud-palette-primary);
}




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

.clickable-tab {
  cursor: pointer;
}

.clickable-tab * {
  text-decoration: none; /* Remove default underline */
}

.clickable-tab:hover * {
  text-decoration: underline; /* Add underline on hover */
}




.my-container {
  background-color: rgba(39,39,39,1)
}