/* 
----use rem over px-----
benefit of using REMs is that they help
ensure consistency across different devices and screen sizes.
Since REMs are based on the root font size, 
they'll adjust automatically to fit the size of the device screen. ✅

*/

.main-container {
  padding: 1.125rem;
}

.button-shadow {
  box-shadow: 0rem 0.063rem 0.125rem 0rem #1018280d;
  height: 2.5rem;
}

.button-icons-size {
  width: 0.938rem;
  height: 0.938rem;
  margin-right: 0.313rem;
}

/* responsive text size css useCase example (text-14-normal, text-16-medium) */
[class*="text-10-"] {
  font-size: 0.625rem;
}
[class*="text-12-"] {
  font-size: 0.75rem;
}
[class*="text-14-"] {
  font-size: 0.875rem !important;
}
[class*="text-16-"] {
  font-size: 1rem;
}
[class*="text-18-"] {
  font-size: 1.125rem;
}
[class*="text-20-"] {
  font-size: 1.25rem;
}
[class*="text-24-"] {
  font-size: 1.5rem;
}
[class*="-normal"] {
  font-weight: 400;
}
[class*="-medium"] {
  font-weight: 500;
}
[class*="-bold"] {
  font-weight: 600;
}
[class*="-extrabold"] {
  font-weight: 700;
}

/* responsive Border Radius css */

.radius-4 {
  border-radius: 0.25rem !important;
}
.radius-6 {
  border-radius: 0.375rem !important;
}
.radius-8 {
  border-radius: 0.5rem !important;
}
.radius-10 {
  border-radius: 0.625rem !important;
}
.radius-12 {
  border-radius: 0.75rem !important;
}
.radius-15 {
  border-radius: 0.938rem !important;
}

/* responsive icon size css */
.icon-size-20 {
  height: 1.25rem;
  width: 1.25rem;
}

.icon-size-30 {
  height: 1.875rem;
  width: 1.875rem;
}

.icon-size-36 {
  height: 2.25rem;
  width: 2.25rem;
}

.icon-size-40 {
  height: 2.5rem;
  width: 2.5rem;
}

.icon-size-45 {
  height: 2.813rem;
  width: 2.813rem;
}

.icon-size-50 {
  height: 3.125rem;
  width: 3.125rem;
}

.icon-size-64 {
  height: 4rem;
  width: 4rem;
}

/* gaps */
.gap-4px {
  gap: 0.25rem !important;
}
.gap-5px {
  gap: 0.313rem !important;
}
.gap-6px {
  gap: 0.375rem !important;
}
.gap-10px {
  gap: 0.625rem !important;
}
.gap-12px {
  gap: 0.75rem !important;
}
.gap-15px {
  gap: 0.938rem !important;
}
.gap-16px {
  gap: 1rem !important;
}
.gap-20px {
  gap: 1.25rem !important;
}
.gap-24px {
  gap: 1.5rem !important;
}

/* margin */
.margin-t-12 {
  margin-top: 0.75rem;
}

/* new modal styles 👇🏻 */
.round-pattern-icon {
  top: 0.063rem;
  left: 0.063rem;
  position: absolute;
  height: 12.5rem;
  width: 12.5rem;
  pointer-events: none;
}

.logo-container {
  top: 1.313rem;
  left: 1.313rem;
  position: absolute;
  height: 3rem;
  width: 3rem;
  border-radius: 0.625rem;
}

.new-modal-header {
  font-size: 1.125rem;
  font-weight: 600;
  z-index: 10;
  color: #101828;
  margin-top: 2.5rem;
}

.indicator-icon {
  height: 0.5rem;
  width: 0.5rem;
  border-radius: 0.5rem;
}

.map-fields-container {
  width: 100%;
  min-height: 2.75rem;
  word-break: break-word;
}

.map-fields-container .drop-downs {
  padding-left: 2.188rem;
  height: 100%;
}
.button-height-width {
  width: 12.313rem;
  height: 2.5rem;
}
.more-button {
  width: 2.5rem;
  height: 2.5rem;
}
.sub-item-more-button {
  height: 2.875rem;
  padding: 0.625rem 0.625rem 0.625rem 0.5rem;
}
.sub-item-more-button:hover {
  background-color: #f9fafb;
}
.sub-item-container {
  min-width: 100%;
  background-color: #ffffff;
  font-size: "14px";
  top: 2.5rem;
  left: 0px;
  border: 0.063rem solid #d1d0d0 !important;
  box-shadow: 0.063rem 0.188rem 0.313rem rgb(198, 197, 197) !important;
  border-radius: 0.313rem;
  z-index: 4;
  max-height: 12rem;
  overflow: auto;
  scrollbar-width: thin;
}
.sub-item-show-container {
  width: 16rem;
  background-color: #ffffff;
  font-size: "14px";
  top: 2.5rem;
  left: -70px;
  border: 0.063rem solid #d1d0d0 !important;
  box-shadow: 0.063rem 0.188rem 0.313rem rgb(198, 197, 197) !important;
  border-radius: 0.313rem;
  z-index: 4;
  /* height: 10rem; */
  overflow: auto;
}
.sub-item-assign-container {
  width: 12.938rem;
}
.sub-item-view-container {
  width: 10.063rem;
}
.sub-item-sortby-container {
  width: 12rem;
}
.sub-item-filter-container {
  width: 11.625rem;
}

.theme-text-color {
  color: var(--theme-color);
}

.text-underline-hover {
  text-decoration: none;
}

.text-underline-hover:hover {
  text-decoration: underline;
}

.fit-width {
  width: fit-content !important;
}

.template-select-container {
  height: 10.125rem;
  width: 10.125rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.313rem;
  cursor: pointer;
}

.template-select-container:hover {
  border: 0.125rem solid var(--theme-color) !important;
  background-color: rgba(15, 94, 251, 0.2);
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

.template-select-container.selected {
  border: 0.125rem solid var(--theme-color) !important;
  background-color: rgba(15, 94, 251, 0.5);
}

.customizeTool {
  position: absolute;
  top: 8.25rem; /* Adjust positioning as needed */
  bottom: 0px;
  left: 0px;
  right: 0px;
  width: auto; /* Customize width */
  height: auto; /* Customize height */
  box-shadow: none; /* Remove modal-like shadow */
  background: transparent; /* Transparent background if needed */
  border: none; /* Remove any borders */
  overflow: hidden;
}

.customizeToolModal-dialog {
  margin: auto !important;
  max-width: 100% !important;
}

.light-gray-bg {
  background: #f8f9fa;
}

.pointer-none {
  pointer-events: none !important;
}