/* Width Utility Classes */

/* .at_h-full-screen{
  height: calc(100vh - 64px);
} */

.at_has_border {
  border: 3px solid;
}

.at_h-responsive-64 {
  height: calc(100vh - 64px);
}

.at_h-responsive-10 {
  height: calc(100vh - 10px);
}

.at_h-responsive-264 {
  height: calc(100vh - 264px);
}

.at_h-responsive-250 {
  height: calc(100vh - 250px);
}

.at_h-responsive-268 {
  height: calc(100vh - 268px);
}

.at_h-responsive-290 {
  height: calc(100vh - 290px)
}

.at_h-responsive-304 {
  height: calc(100vh - 304px)
}

.at_h-responsive-650 {
  height: calc(100vh - 650px);
}

.at_w-responsive-61{
   width: calc(100vw - 61px);
}
.at_p-2{
  padding: 0.5rem;
}

.at_px-1 {
  padding: 0 0.2rem;
}

.at_px-2 {
  padding: 0 0.5rem;
}

.at_py-2 {
  padding: 0.5rem 0;
}

.at_py-3 {
  padding: 0.75rem 0;
}

.at_pt-2 {
  padding-top: 0.5rem;
}

.at_mb-2 {
  margin-bottom: 5px;
}

.at_w-auto {
  width: auto;
}

.at_w-full {
  width: 100%;
}

.at_w-screen {
  width: 100vw;
}

.at_w-1 {
  width: 0.25rem;
}

.at_w-2 {
  width: 0.5rem;
}

.at_w-3 {
  width: 1rem;
}

.at_w-4 {
  width: 1.5rem;
}

.at_w-5 {
  width: 3rem;
}

.at_w-6 {
  width: 4rem;
}

.at_w-8 {
  width: 6rem;
}

.at_w-10 {
  width: 10rem;
}

.at_w-11 {
  width: 14rem;
}

.at_w-12 {
  width: 18rem;
}

.at_w-13 {
  width: 22rem;
}

.at_w-14 {
  width: 26rem;
}

.at_w-15 {
  width: 20rem;
}


.at_mx-w-8 {
  max-width: 8rem;
}

.at_mx-w-16 {
  max-width: 16rem;
}

.at_mx-w-18 {
  max-width: 18rem;
  ;
}



/* Height Utility Classes */

.at_h-auto {
  height: auto;
}

.at_h-1 {
  height: 0.25rem;
}

.at_h-2 {
  height: 0.5rem;
}

.at_h-3 {
  height: 1rem;
}

.at_h-4 {
  height: 1.5rem;
}

.at_h-5 {
  height: 3rem;
}

.at_h-6 {
  height: 4rem;
}

.at_h-8 {
  height: 6rem;
}

.at_h-10 {
  height: 10rem;
}

.at_h-12 {
  height: 12rem;
}

.at_h-14 {
  height: 14rem;
}

.at_h-16 {
  height: 16rem;
}

.at_h-18 {
  height: 18rem;
}

.at_h-full {
  height: 100%;
}

.at_h-screen {
  height: 100vh;
}

.at_h-min-15 {
  min-height: 15vh;
}

.at_h-min-20 {
  min-height: 20vh;
}

.at_h-min-25 {
  min-height: 25vh;
}

.at_h-min-40 {
  min-height: 40vh;
}

.at_h-min-45 {
  min-height: 45vh;
}

.at_h-min-50 {
  min-height: 50vh;
}

.at_h-min-60 {
  min-height: 60vh;
}

.at_h-min-64 {
  min-height: 64vh;
}

.at_h-min-68 {
  min-height: 68vh;
}

.at_h-min-70 {
  min-height: 70vh;
}

.at_h-min-92 {
  min-height: 92vh;
}

.at_h-min-98 {
  min-height: 98vh;
}

.at_h-max-65 {
  max-height: 65vh;
}

.at_h-max-77 {
  max-height: 77vh;
}

.at_h-max-92 {
  max-height: 92vh;
}

.at_h-max-95 {
  max-height: 95vh;
}

.at_h-max-100 {
  max-height: 100vh;
}

.at_rounded {
  border-radius: 6px;
}

.at_circled {
  border-radius: 50%;
}

.at_disabled {
  pointer-events: none !important;
  opacity: 0.6;
}

.at_hidden {
  display: none;
}

.at_hide {
  visibility: hidden;
}

.at_bolder {
  font-weight: bolder;
}

.at_text_xxs {
  font-size: 0.65em
}

.at_text_xs {
  font-size: 0.75rem !important;
}

.at_text_sm {
  font-size: 0.875rem;
}

.at_text_base {
  font-size: 1rem;
}

.at_text_lg {
  font-size: 1.125rem;
}

.at_text_xl {
  font-size: 1.25rem;
}

.at_text-xxl {
  font-size: 32px;
}

.at_text_white {
  color: white;
}

.at_opacity_5 {
  opacity: 50%
}

.at_rotate_minus_90 {
  display: inline-block;
  transform: rotate(-90deg);
  transition: transform 0.3s ease;
}

.at_pull_right {
  float: right;
}

.at_pull_left {
  float: left;
}

.at_mx-auto {
  margin: auto;
}

.at_ml_0 {
  margin-left: 0 !important;
}

.at_ml_1 {
  margin-left: 0.25rem !important;
}

.at_ml_2 {
  margin-left: 0.5rem !important;
}

.at_ml_3 {
  margin-left: 0.75rem !important;
}

.at_ml_4 {
  margin-left: 1rem !important;
}

.at_mb_0 {
  margin-bottom: 0 !important;
}

  /* Margin Bottom */
  .at_mb_1 {
    margin-bottom: 0.25rem !important; /* 4px */
  }
  
  .at_mb_2 {
    margin-bottom: 0.5rem !important;  /* 8px */
  }

  .at_mb_3 {
    margin-bottom: 0.75rem !important; /* 12px */
  }

  .at_mb_4 {
    margin-bottom: 1rem !important;    /* 16px */
  }

  .at_mb_5 {
    margin-bottom: 1.25rem !important; /* 20px */
  }

  .at_mb_6 {
    margin-bottom: 1.5rem !important;  /* 24px */
  }

  /* Margin Top */
  .at_mt_1 {
    margin-top: 0.25rem !important;
  }

  .at_mt_2 {
    margin-top: 0.5rem !important;
  }

  .at_mt_3 {
    margin-top: 0.75rem !important;
  }

  .at_mt_4 {
    margin-top: 1rem !important;
  }

  .at_mt_5 {
    margin-top: 1.25rem !important;
  }

  .at_mt_6 {
    margin-top: 1.5rem !important;
  }

  
  .at_mb_3 {
    margin-bottom:  0.75rem !important;
  }

   .at_mb_4 {
    margin-bottom: 2rem !important;
  }
  
  .at_mb_3 {
    margin-bottom:  0.75rem !important;
  }

.at_mb_4 {
  margin-bottom: 2rem !important;
}

.at_gap_1 {
  gap: 0.25rem;
}

.at_gap_2 {
  gap: 0.5rem;
}

.at_gap_3 {
  gap: 0.75rem;
}

.at_gap_4 {
  gap: 1rem;
}

.at_absolute {
  position: absolute;
}

  .at_inline_block{
    display: inline-block
  }

  .at_p-1 {
    padding: 0.25rem !important; /* 4px */
  }

  .at_p-2 {
    padding: 0.5rem !important; /* 8px */
  }

  .at_p-3 {
    padding: 0.75rem !important; /* 12px */
  }

  .at_p-4 {
    padding: 1rem !important; /* 16px */
  }

  .at_p-5 {
    padding: 1.25rem !important; /* 20px */
  }

  .at_p-6 {
    padding: 1.5rem !important; /* 24px */
  }


.no_scroll {
  overflow: hidden !important;
}

/* Spinner container style */
.at_spinner {
  border: 8px solid grey;
  border-radius: 50%;
  border-top: 8px solid #222;
  width: 50px;
  height: 50px;
  position: absolute;
  top: 45%;
  left: 45%;
  z-index: 2;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
  display: none;
}

/* Safari */
@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.at_rotate-90 {
  -ms-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}

.at_rotate-180 {
  -ms-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}

.at_rotate-270 {
  -ms-transform: rotate(270deg);
  -webkit-transform: rotate(270deg);
  transform: rotate(270deg);
}

.at_rotate-360 {
  -ms-transform: rotate(360deg);
  -webkit-transform: rotate(360deg);
  transform: rotate(360deg);
}

.at_width_full{
  width: 100%;
}

.at_text_red_50 { color: #fef2f2; }
.at_text_red_100 { color: #fee2e2; }
.at_text_red_200 { color: #fecaca; }
.at_text_red_300 { color: #fca5a5; }
.at_text_red_400 { color: #f87171; }
.at_text_red_500 { color: #ef4444; }
.at_text_red_600 { color: #dc2626; }
.at_text_red_700 { color: #b91c1c; }
.at_text_red_800 { color: #991b1b; }
.at_text_red_900 { color: #7f1d1d; }
.at_text_red_950 { color: #450a0a; }

.at_text_yellow_50 { color: #fefce8; }
.at_text_yellow_100 { color: #fef9c3; }
.at_text_yellow_200 { color: #fef08a; }
.at_text_yellow_300 { color: #fde047; }
.at_text_yellow_400 { color: #facc15; }
.at_text_yellow_500 { color: #eab308; }
.at_text_yellow_600 { color: #ca8a04; }
.at_text_yellow_700 { color: #a16207; }
.at_text_yellow_800 { color: #854d0e; }
.at_text_yellow_900 { color: #713f12; }
.at_text_yellow_950 { color: #422006; }

.at_text_blue_50 { color: #eff6ff; }
.at_text_blue_100 { color: #dbeafe; }
.at_text_blue_200 { color: #bfdbfe; }
.at_text_blue_300 { color: #93c5fd; }
.at_text_blue_400 { color: #60a5fa; }
.at_text_blue_500 { color: #3b82f6; }
.at_text_blue_600 { color: #2563eb; }
.at_text_blue_700 { color: #1d4ed8; }
.at_text_blue_800 { color: #1e40af; }
.at_text_blue_900 { color: #1e3a8a; }
.at_text_blue_950 { color: #172554; }

.at_text_yellowgreen_50  { color: #f7fee7; }
.at_text_yellowgreen_100 { color: #ecfccb; }
.at_text_yellowgreen_200 { color: #d9f99d; }
.at_text_yellowgreen_300 { color: #bef264; }
.at_text_yellowgreen_400 { color: #a3e635; }
.at_text_yellowgreen_500 { color: #84cc16; }
.at_text_yellowgreen_600 { color: #65a30d; }
.at_text_yellowgreen_700 { color: #4d7c0f; }
.at_text_yellowgreen_800 { color: #3f6212; }
.at_text_yellowgreen_900 { color: #365314; }
.at_text_yellowgreen_950 { color: #1a2e05; }

.at_bg_red_50 { background-color: #fef2f2; }
.at_bg_red_100 { background-color: #fee2e2; }
.at_bg_red_200 { background-color: #fecaca; }
.at_bg_red_300 { background-color: #fca5a5; }
.at_bg_red_400 { background-color: #f87171; }
.at_bg_red_500 { background-color: #ef4444; }
.at_bg_red_600 { background-color: #dc2626; }
.at_bg_red_700 { background-color: #b91c1c; }
.at_bg_red_750 { background-color: hsl(337.56deg 85.62% 30%); }
.at_bg_red_800 { background-color: #991b1b; }
.at_bg_red_850 { background-color: hsl(1.4deg 20.57% 40.98%); }
.at_bg_red_900 { background-color: #7f1d1d; }
.at_bg_red_950 { background-color: #450a0a; }

.at_bg_yellow_50 { background-color: #fefce8; }
.at_bg_yellow_100 { background-color: #fef9c3; }
.at_bg_yellow_200 { background-color: #fef08a; }
.at_bg_yellow_300 { background-color: #fde047; }
.at_bg_yellow_400 { background-color: #facc15; }
.at_bg_yellow_500 { background-color: #eab308; }
.at_bg_yellow_600 { background-color: #ca8a04; }
.at_bg_yellow_700 { background-color: #a16207; }
.at_bg_yellow_800 { background-color: #854d0e; }
.at_bg_yellow_900 { background-color: #713f12; }
.at_bg_yellow_950 { background-color: #422006; }

.at_bg_blue_50 { background-color: #eff6ff; }
.at_bg_blue_100 { background-color: #dbeafe; }
.at_bg_blue_200 { background-color: #bfdbfe; }
.at_bg_blue_300 { background-color: #93c5fd; }
.at_bg_blue_400 { background-color: #60a5fa; }
.at_bg_blue_500 { background-color: #3b82f6; }
.at_bg_blue_600 { background-color: #2563eb; }
.at_bg_blue_700 { background-color: #1d4ed8; }
.at_bg_blue_800 { background-color: #1e40af; }
.at_bg_blue_900 { background-color: #1e3a8a; }
.at_bg_blue_950 { background-color: #172554; }

.at_bg_yellowgreen_50  { background-color: #f7fee7; }
.at_bg_yellowgreen_50 { background-color: #ecfccb; }
.at_bg_yellowgreen_50 { background-color: #d9f99d; }
.at_bg_yellowgreen_50 { background-color: #bef264; }
.at_bg_yellowgreen_50 { background-color: #a3e635; }
.at_bg_yellowgreen_50 { background-color: #84cc16; }
.at_bg_yellowgreen_50 { background-color: #65a30d; }
.at_bg_yellowgreen_50 { background-color: #4d7c0f; }
.at_bg_yellowgreen_50 { background-color: #3f6212; }
.at_bg_yellowgreen_50 { background-color: #365314; }
.at_bg_yellowgreen_50 { background-color: #1a2e05; }

.at_border_red_50 { border-color: #fef2f2; }
.at_border_red_100 { border-color: #fee2e2; }
.at_border_red_200 { border-color: #fecaca; }
.at_border_red_300 { border-color: #fca5a5; }
.at_border_red_400 { border-color: #f87171; }
.at_border_red_500 { border-color: #ef4444; }
.at_border_red_600 { border-color: #dc2626; }
.at_border_red_700 { border-color: #b91c1c; }
.at_border_red_800 { border-color: #991b1b; }
.at_border_red_900 { border-color: #7f1d1d; }
.at_border_red_950 { border-color: #450a0a; }

.at_border_yellow_50 { border-color: #fefce8; }
.at_border_yellow_100 { border-color: #fef9c3; }
.at_border_yellow_200 { border-color: #fef08a; }
.at_border_yellow_300 { border-color: #fde047; }
.at_border_yellow_400 { border-color: #facc15; }
.at_border_yellow_500 { border-color: #eab308; }
.at_border_yellow_600 { border-color: #ca8a04; }
.at_border_yellow_700 { border-color: #a16207; }
.at_border_yellow_800 { border-color: #854d0e; }
.at_border_yellow_900 { border-color: #713f12; }
.at_border_yellow_950 { border-color: #422006; }


.at_border_blue_50 { border-color: #eff6ff; }
.at_border_blue_100 { border-color: #dbeafe; }
.at_border_blue_200 { border-color: #bfdbfe; }
.at_border_blue_300 { border-color: #93c5fd; }
.at_border_blue_400 { border-color: #60a5fa; }
.at_border_blue_500 { border-color: #3b82f6; }
.at_border_blue_600 { border-color: #2563eb; }
.at_border_blue_700 { border-color: #1d4ed8; }
.at_border_blue_800 { border-color: #1e40af; }
.at_border_blue_900 { border-color: #1e3a8a; }
.at_border_blue_950 { border-color: #172554; }

.at_border_yellowgreen_50  { border-color: #f7fee7; }
.at_border_yellowgreen_100 { border-color: #ecfccb; }
.at_border_yellowgreen_200 { border-color: #d9f99d; }
.at_border_yellowgreen_300 { border-color: #bef264; }
.at_border_yellowgreen_400 { border-color: #a3e635; }
.at_border_yellowgreen_500 { border-color: #84cc16; }
.at_border_yellowgreen_600 { border-color: #65a30d; }
.at_border_yellowgreen_700 { border-color: #4d7c0f; }
.at_border_yellowgreen_800 { border-color: #3f6212; }
.at_border_yellowgreen_900 { border-color: #365314; }
.at_border_yellowgreen_950 { border-color: #1a2e05; }

.at_bg-gray-800 {
  background-color: #222222 !important;
}