:root {
  --display_w: 500px;
  --Height: calc(100vh - 50px);
}

.p-abs {position: absolute;}
.p-rel {position: relative !important;}
.d-none {display: none;}
.d-flex {display: flex;}
.d-block { display: block;}
.jc-center {justify-content: center;}
.jc-around {justify-content: space-around;}
.jc-between {justify-content: space-between;}
.jc-evenly {justify-content: space-evenly;}
.flex-wrap {flex-wrap: wrap;}
.flex1 {flex: 1;}
.flex10 {flex:10%}
.flex20 {flex:20%}
.flex25 {flex:25%}
.flex30 {flex:30%}


.flexCenter {
  display: flex;
  justify-content: center;
  align-items: center;
}
.flexBetween {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.flexStart {
  display: flex;
  justify-content: start;
  align-items: center;
}
.flexEnd {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.g-1 {
  gap: 2px;
}
.g-2 {
  gap: 4px;
}
.g-3 {
  gap: 6px;
}
.g-4 {
  gap: 8px;
}
.g-5 {
  gap: 10px;
}


.pointer {cursor: pointer !important;}

.w-20 { width: 20%; }
.w-33 { width: 33.3%; }

.fs-10px {font-size: 10px !important;}
.fs-12px {font-size: 12px !important;}
.fs-14px {font-size: 14px !important;}
.fs-18px {font-size: 18px !important;}
.fs-20px {font-size: 20px !important;}
.fs-22px {font-size: 22px !important;}
.fs-24px {font-size: 24px !important;}
.fs-26px {font-size: 26px !important;}
.fs-28px {font-size: 28px !important;}
.fs-30px {font-size: 30px !important;}
.fs-32px {font-size: 32px !important;}
.fs-34px {font-size: 34px !important;}
.fs-36px {font-size: 36px !important;}
.fs-38px {font-size: 38px !important;}
.fs-40px {font-size: 40px !important;}
.fs-42px {font-size: 42px !important;}
.fs-44px {font-size: 44px !important;}
.fs-46px {font-size: 46px !important;}
.fs-50px {font-size: 50px !important;}

.fw-500 {font-weight: 500;}
.fw-600 {font-weight: 600;}
.fw-700 {font-weight: 700;}
.fw-800 {font-weight: 800;}
.fw-900 {font-weight: 900;}

.lh-12 { line-height: 1.2 !important;}
.lh-15 { line-height: 1.5 !important;}

.nowrap { white-space: nowrap; }
.text-up{text-transform: uppercase;}
.text {word-break: break-all;}

.border {
  border-color:#2b2a2a;
}


/* Основной стиль select */
select {
  width: 100%;
  padding: 12px;
  font-size: 16px;
  font-weight: 500;
  border-radius: 8px;
  background: #ffffff00;
  border: 1px solid #474747b3;
  color: #ffffff;
  appearance: none; /* Убирает стандартный стиль браузера */
  -webkit-appearance: none;
  -moz-appearance: none;
  position: relative;
}

/* Стиль стрелки справа */
select::after {
  content: '▼'; 
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

/* Стиль при наведении */
select:hover {
  border-color: #474747b3;
}

/* Стиль при фокусе */
select:focus {
  border-color: #474747b3;
  outline: none;
}

option {
  background-color: #181818; /* Цвет фона опции */
  color: #ffffff; /* Цвет текста опции */
}

/* Стиль опции при наведении */
select:hover option {
  background-color: #2b2a2a; /* Цвет фона при наведении */
  color: #fff; /* Цвет текста при наведении */
}

table {width: 100%;}

.table1 {
  width: 100%;
  border-collapse: collapse;
}

.table1 .thead {
  background-color: #00000000;
}

.table1 .thead th {
  padding: 10px;
  text-align: left;
  border-bottom: 1px solid #303030;
}

.table1 tr {
  transition: background-color 0.3s;
}

.table1 td {
  padding: 10px 4px;
}

.table1 tr:nth-child(even) {
  background-color: #080808;
}

.table1 tr:hover {
  background-color: #1d1d1d;
}