/* style.css - Base CSS Variables and Styles */

:root {
  --custom-blue: #3548db;
  --custom-red: #db432c;
  --custom-green: #4cc76c;
  --light-blue: #b4dae9;
  --light-gray: #f0f0f0;
  --dark-gray: #333333;
  --black: #000000;
  --white: #ffffff;
}

/* Table Styles */
.table_standard {
  border-collapse: collapse;
  width: 100%;
  table-layout:fixed;
  word-break:break-all;
}
.table_standard th,
.table_standard td {
  border: 1px solid black;
  padding: 7px;
}

.table_blue {
  border-collapse: collapse;
  width: 100%;
}
.table_blue th {
  background-color: #4dc2f0;
  border: 1px solid black;
  padding: 7px;
}
.table_blue td {
  border: 1px solid black;
  padding: 7px;
}
.table_gray {
  border-collapse: collapse;
  width: 100%;
}

.table_gray th {
  background-color: #a0b4bc;
  border: 1px solid black;
  padding: 7px;
}

.table_gray td {
  border: 1px solid black;
  padding: 7px;
}

.table_green {
  border-collapse: collapse;
  width: 100%;
}
.table_green th {
  background-color: #65e084;
  border: 1px solid black;
  padding: 7px;
}
.table_green td {
  border: 1px solid black;
  padding: 7px;
}

.table_red {
  border-collapse: collapse;
  width: 100%;
}
.table_red th {
  background-color: #e63f30;
  border: 1px solid black;
  padding: 7px;
}
.table_red td {
  border: 1px solid black;
  padding: 7px;
}

.table_dark {
  border-collapse: collapse;
  width: 100%;
}
.table_dark th {
  background-color: #333333;
  color: white;
  border: 1px solid black;
  padding: 7px;
}
.table_dark td {
  border: 1px solid black;
  padding: 7px;
}

/* Display utility classes */
.disp_none {
  display: none;
}
.disp_flex {
  display: flex;
}
.disp_block {
  display: block;
}
.disp_inline {
  display: inline;
}
.disp_inline_block {
  display: inline-block;
}
.disp_inline_flex {
  display: inline-flex;
}
.disp_grid {
  display: grid;
}
.disp_inline_grid {
  display: inline-grid;
}

/* Flex utilities */
.jc_center {
  justify-content: center;
}
.jc_se {
  justify-content: space-evenly;
}
.jc_sb {
  justify-content: space-between;
}
.jc_sa {
  justify-content: space-around;
}
.jc_start {
  justify-content: flex-start;
}
.jc_end {
  justify-content: flex-end;
}

.ai_start {
  align-items: flex-start;
}
.ai_center {
  align-items: center;
}
.ai_end {
  align-items: flex-end;
}
.ai_stretch {
  align-items: stretch;
}
.ai_baseline {
  align-items: baseline;
}

.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_one {
  flex: 1;
}

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

/* Grid utilities */
.grid_cols_1 {
  grid-template-columns: repeat(1, 1fr);
}
.grid_cols_2 {
  grid-template-columns: repeat(2, 1fr);
}
.grid_cols_3 {
  grid-template-columns: repeat(3, 1fr);
}
.grid_cols_4 {
  grid-template-columns: repeat(4, 1fr);
}
.grid_cols_5 {
  grid-template-columns: repeat(5, 1fr);
}
.grid_cols_6 {
  grid-template-columns: repeat(6, 1fr);
}

.grid_rows_1 {
  grid-template-rows: repeat(1, 1fr);
}
.grid_rows_2 {
  grid-template-rows: repeat(2, 1fr);
}
.grid_rows_3 {
  grid-template-rows: repeat(3, 1fr);
}
.grid_rows_4 {
  grid-template-rows: repeat(4, 1fr);
}

/* Overflow utilities */
.overflow_auto {
  overflow: auto;
}
.overflow_hidden {
  overflow: hidden;
}
.overflow_scroll {
  overflow: scroll;
}
.overflow_visible {
  overflow: visible;
}

.overflow_x_auto {
  overflow-x: auto;
}
.overflow_x_hidden {
  overflow-x: hidden;
}
.overflow_x_scroll {
  overflow-x: scroll;
}
.overflow_x_visible {
  overflow-x: visible;
}

.overflow_y_auto {
  overflow-y: auto;
}
.overflow_y_hidden {
  overflow-y: hidden;
}
.overflow_y_scroll {
  overflow-y: scroll;
}
.overflow_y_visible {
  overflow-y: visible;
}

/* Typography */
.fw_light,
.fw_300 {
  font-weight: 300;
}
.fw_normal,
.fw_400 {
  font-weight: 400;
}
.fw_medium,
.fw_500 {
  font-weight: 500;
}
.fw_semibold,
.fw_600 {
  font-weight: 600;
}
.fw_bold,
.fw_700 {
  font-weight: 700;
}
.fw_800 {
  font-weight: 800;
}
.fw_900 {
  font-weight: 900;
}

.align_left {
  text-align: left;
}
.align_center {
  text-align: center;
}
.align_right {
  text-align: right;
}
.align_justify {
  text-align: justify;
}

.text_underline {
  text-decoration: underline;
}
.text_overline {
  text-decoration: overline;
}
.text_line_through {
  text-decoration: line-through;
}
.text_no_decoration {
  text-decoration: none;
}

.text_uppercase {
  text-transform: uppercase;
}
.text_lowercase {
  text-transform: lowercase;
}
.text_capitalize {
  text-transform: capitalize;
}

.list_none {
  list-style: none;
}
.list_disc {
  list-style: disc;
}
.list_circle {
  list-style: circle;
}
.list_square {
  list-style: square;
}
.list_decimal {
  list-style: decimal;
}
.list_roman {
  list-style: upper-roman;
}
.list_alpha {
  list-style: lower-alpha;
}

/* Some basic color classes */
.bg_blue {
  background-color: var(--custom-blue);
}
.bg_red {
  background-color: var(--custom-red);
}
.bg_green {
  background-color: var(--custom-green);
}
.bg_white {
  background-color: var(--white);
}
.bg_black {
  background-color: var(--black);
}

.color_blue {
  color: var(--custom-blue);
}
.color_red {
  color: var(--custom-red);
}
.color_green {
  color: var(--custom-green);
}
.color_white {
  color: var(--white);
}
.color_black {
  color: var(--black);
}

mark {
  background: yellow;
  padding: 0 2px;
  border-radius: 3px;
}

.custom30-hidden {
  display: none !important;
}

.imp {
  color: red;
}

.c_pointer {
  cursor: pointer;
}

.input_info {
  font-size: 12px;
  padding-bottom: 5px;
  font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
    "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
  color: rgb(90, 85, 85);
}