* {
    box-sizing: border-box;
  }

  html, body {
    width: 100%;
    /* overflow-x: hidden; */
  }
  
  
  body {
    font-family: 'Poppins', sans-serif;
    overflow-x: hidden;
  }

  h1, h2, h3 {
    color: #fff;
  }

  .modal-body {
    padding: 5px 20px !important;
  }

  .pagination-container {
    margin-top: 20px;
    display: flex;
    justify-content: center;
  }
  
  .dropdown-menu {
    min-width: 160px;
  }
  
  .dropdown-toggle {
    background: transparent;
    border: none;
    color: black;
    padding: 0;
    outline: none;
    box-shadow: none;
  }
  
  .dropdown-toggle i {
    font-size: 20px;
    transition: color 0.3s ease;
  }
  
  .dropdown-toggle:hover i {
    color: #007bff;
  }
  
  .dropdown-toggle:focus {
    outline: none;
    box-shadow: none;
  }
  
  .dropdown-toggle:hover {
    background: transparent;
  }
  
  .dropdown-toggle::after {
    display: none;
  }
  

  th {
    background-color: #000 !important;
    color: white !important;
    padding: 20px !important;
    font-weight: bold !important;
  }
  
  td {
    padding: 10px 20px !important;
    vertical-align: middle !important;
    cursor: pointer;
  }
  
  .pagination .page-item.active .page-link {
    font-weight: bold;
    color: #007bff;
    background-color: #f8f9fa;
  }
    
  .btn-custom {
    color: #fff;
    background-color: #000;
  }
  .btn-custom:hover,
  .btn-custom:focus,
  .btn-custom:active {
    opacity: 0.9 !important;
    background-color: #161616 !important;
    color: #fff !important;
  }
  
  .form-control {
    border: 1px solid #4c4c4c;
  }
  .form-control:disabled {
    border: 1px solid #4c4c4c !important; 
  }
  
  .table-rounded {
    border-collapse: separate;
    border-spacing: 0;
    overflow-x: hidden;
    border-radius: 10px;
  }
  .form-check-label {
    padding-left: 5px; 
  }
  .form-check-input:checked {
    background-color: #000;
    border-color: #000;
  }

  .error {
    border: 1px solid red;
  }
  .error-message {
    margin: 5px 0;
    color: red;
    font-weight: bold;
  }
  .link-text {
    white-space: nowrap;
  }
  #log_out {
    margin-top: auto;
  }
  .danger,
  .danger:hover {
    background-color: red !important;
  }
  .success,
  .success:hover {
    background-color: rgb(42 175 30) !important;
  }
  .btn-smaller {
    font-size: 14px !important;
    padding: 10px !important;
  }
  
  
.d-col {
  flex-direction: column;
}
.d-row {
  flex-direction: row;
}
.d-gap {
  gap: 10px;
  align-items: center
}
.tables-container {
  margin: 20px 30px;
  display: flex;
  flex-direction: row;
  gap: 15px;
}
.tables-box {
  border: 1px solid rgba(124, 124, 124, 0.5);
  border-radius: 10px;
  position: relative;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}
.tournament-prizes-container {
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.prizes-container:nth-child(1) {
  margin-bottom: 20px;
}

.tables-box-label {
  position: absolute;
  top: -10px;
  left: 20px;
  height: 20px;
  width: fit-content;
  padding: 0 10px;
  border-radius: 5px;
  background-color: #000;
  color: #fff;
  text-align: center;
  z-index: 10;
  font-weight: bold;
}
.tables-box-label-2 {
  left: auto;
  right: 20px;
}
.option-image {
  width: 30px;
  height: 40px;
  border: 1px solid #fff;
  border-radius: 20;
}

.horisontal-menu {
  display: flex;
  flex-direction: row;
  margin: 10px 20px;
}
.horisontal-menu-menu {
  display: flex;
  flex-direction: row;
  font-size: 18px;
  gap: 20px;
  align-items: center;
  cursor: pointer;
  margin-right: 50px;
}
.horisontal-menu-image {
  width: 100%;
}
.horisontal-menu-image img {
  width: 120px;
}

.burger-menu {
  display: none;
  cursor: pointer;
  flex-direction: column;
  justify-content: space-between;
  width: 30px;
  height: 20px;
}

.burger-line {
  background-color: #fff;
  height: 3px;
  width: 100%;
}
.horisontal-menu-item {
  padding: 10px 20px;
  cursor: pointer;
}
.mobile {
  display: none;
}

@media (max-width: 768px) {
  #loginModal {
    background-color: #000;
  }

  .mobile {
    display: block;
  }

  .horisontal-menu-menu {
    display: flex;
    flex-direction: column;
    width: 100%;
    background-color: #000;
    position: absolute;
    top: 0;
    left: 0;
    padding-top: 50px;
    z-index: 1000;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    padding: 50px 0;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-100%);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s 0.3s;
  }

  .horisontal-menu-menu.open {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s 0s;
  }

  .burger-menu {
    display: flex;
    margin: auto 0;
  }
}


.modal-content {
  background-color: #121212;
  color: #fff;
  border: 1px solid #333;
}
.modal-title, label {
  color: #fff !important;
}

.modal-header, .modal-footer {
  border-color: #333;
}

.form-control {
  background-color: #1e1e1e;
  color: #fff;
  border: 1px solid #444;
}

.form-control::placeholder {
  color: #aaa;
}

.btn-custom {
  background-color: #333;
  color: #fff;
  border: 1px solid #555;
}

.btn-custom:hover {
  background-color: #444;
}

input, select {
  background-color: #1e1e1e !important;
  color: #fff;
  border: 1px solid #555;
  box-shadow: none;
}

.flatpickr-day.selected,
.flatpickr-day.selected:hover {
  background: #646464 !important; /* Оранжевый */
  border-color: #646464 !important;
  color: #fff !important; /* Белый текст */
}

.form-control:focus {
  background-color: #1e1e1e !important;
  color: #fff;
  border: 1px solid #555;
  box-shadow: none;
}
.checkbox-container {
  display: flex;
  flex-direction:  row;
}
.checkbox-container > .t-label {
  margin-left: 20px;
}

@media (max-width: 768px) {
  .tables-container {
    flex-direction: column;
    margin: 5px;
  }
  .tables-box {
    margin: 10px;
    width: auto;
  }
  .tournaments-table td:nth-child(3),
  .tournaments-table th:nth-child(3) {
    display: none;
  }

  .tournaments-table td:nth-child(6),
  .tournaments-table th:nth-child(6) {
    display: none;
  }
  table td, table th {
    padding: 5px !important; 
    font-size: 11px;
    font-weight: 300 !important;
  }
  #tournament-players tr:first-child, #tournament-players tr:first-child td {
    font-weight: bold !important;
  }

  .result-table td:nth-child(5),
  .result-table th:nth-child(5) {
    display: none;
  }
  .result-table td:nth-child(6),
  .result-table th:nth-child(6) {
    display: none;
  }

  .global-table td:nth-child(5),
  .global-table th:nth-child(5) {
    display: none;
  }
  .global-table td:nth-child(6),
  .global-table th:nth-child(6) {
    display: none;
  }
  .global-table td:nth-child(7),
  .global-table th:nth-child(7) {
    display: none;
  }
  .global-table td:nth-child(8),
  .global-table th:nth-child(8) {
    display: none;
  }
  .global-table td:nth-child(9),
  .global-table th:nth-child(9) {
    display: none;
  }
  .global-table td:nth-child(10),
  .global-table th:nth-child(10) {
    display: none;
  }
  .result-table td:nth-child(6),
  .result-table th:nth-child(6) {
    display: none;
  }
  
  .game-info td:nth-child(5),
  .game-info th:nth-child(5) {
    display: none;
  }

  .game-info td:nth-child(7),
  .game-info th:nth-child(7) {
    display: none;
  }

  .game-info td:nth-child(8),
  .game-info th:nth-child(8) {
    display: none;
  }

  .game-info td:nth-child(9),
  .game-info th:nth-child(9) {
    display: none;
  }

  .game-info td:nth-child(10),
  .game-info th:nth-child(10) {
    display: none;
  }

  .game-info td:nth-child(11),
  .game-info th:nth-child(11) {
    display: none;
  }

  .game-info td:nth-child(12),
  .game-info th:nth-child(12) {
    display: none;
  }
}

.select2-container--default .select2-selection--multiple {
  background-color: #000;
  color: #fff;
  border: 1px solid #444;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background-color: #222;
  border: 1px solid #555;
  color: #fff;
}

.select2-container--default .select2-search__field {
  background-color: #000;
  color: #fff;
  border: none;
}

.select2-dropdown {
  background-color: #000;
  color: #fff;
  border: 1px solid #444;
}

.select2-container--default .select2-results__option {
  color: #fff;
  background-color: #000;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: #444;
  color: #fff;
}

.select2-dropdown {
  z-index: 2051 !important;
}
.select2-container--default .select2-results__option[aria-selected=true] {
  background-color: #525252;
}
.win {
  color: rgb(207, 255, 207);
}
.lose {
  color: rgb(109, 109, 109);
}
.custom-checkbox-game {
  height: 44px; 
  display: flex; 
  align-items: center;
}
.custom-checkbox-game input {
  margin: 0 auto;
}
.big-modal {
  --bs-modal-width: 80%;
}

.smaller {
  width: 55px;
}
.bigger {
  width: 80px;
}
.winner {
  display: flex;
  flex-direction: row;
  /* gap: 10px; */
  justify-content: space-between;
  align-items: center;
}
.winner-select {
  width: 150px;
}

/*----*/
#game-players {
  overflow: scroll;
}
#game-players table {
  width: 100%;
  border-collapse: collapse;
}

#game-players th, #game-players td {
  padding: 10px;
  text-align: center;
}

#game-players th {
  font-weight: bold;
}

.form-select, .form-control {
  width: 100%;
}

.smaller {
  width: 60px;
}

.bigger {
  width: 80px;
}
.border-none {
  border: 1px solid #5a5a5a;
}
#rules, .rules {
  font-size: 14px;
  text-align: justify;
  white-space: pre-line;
}
#rules h3, .rules h3 {
  padding: 0;
  margin: 0;
  margin-top: 20px;
  line-height: 0;
}
label[for="editGlobalGameResult"] {
  margin-top: 5px;
  font-weight: bold;
}
.role-result {
  position: absolute;
  top: -21px;
  left: auto;
  right: 20px;
  height: 20px;
  width: fit-content;
  z-index: 10;
}
.role-icon-container, .global-role-icon-container, .role-result {
  width: 40px; 
  height: 40px;
  border-radius: 50%;
  overflow: hidden; 
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  background-color: #000; 
}

.role-result, .role-result > .role-icon {
  cursor: auto;
}

.role-icon-container:hover, .global-role-icon-container:hover {
  background-color: #444;
  border-color: #444; 
}

.role-icon {
  width: 50%;
  height: 50%;
  object-fit: contain;
  cursor: pointer;
}
.global-game-result-container {
  gap: 10px; 
  align-items: center;
}
.role-icon-container.active, .global-role-icon-container.active {
  background-color: #585858; 
}
.round-button {
  border-radius: 8px;
  padding: 7px 16px;
  background-color: #292929;
  border: 1px solid #292929;
  cursor: pointer;
  transition: all 0.3s ease;
}
.round-button:hover {
  background-color: #444;
  border-color: #444;
}

.round-button:active {
  background-color: #555;
  border-color: #555;
}
textarea.dark-theme {
  background-color: #333;
  color: #fff;
  border: 1px solid #555;
  width: 80%;
  padding: 10px;
  font-size: 16px;
  resize: none; 
  box-sizing: border-box;
}

textarea.dark-theme:focus {
  outline: none;
  border-color: #888;
}
.modal-with-comm {
  flex-wrap: nowrap;
  justify-content: space-between;
}
.fk-nickname {
  border-radius: 8px;
  background-color: #000;
  border: 1px solid #000;
  width: 20px;
  height: 20px;
  display: none;
}
.fk-nickname > .role-icon {
  width: 13px;
  height: 13px;
}
.d-fk {
  display: block;
}
.ppk {
  color: red;
} 
.smaller-box {
  width: 50%;
}
#tournament-players tr:first-child, #tournament-players tr:first-child  {
  font-weight: bold;
}
.sittings {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: stretch;
}
.arrange-info, .sittings > .game-info {
  width: fit-content;
  margin: 5px 0 10px;
  flex: 1 1 calc(20% - 20px); 
    margin: 10px; 
    box-sizing: border-box;
    min-height: calc(100% / 5); 
}

#tournament_end, #t-end, #t-sittings, #t-summ {
  display: none;
}
.rmp-box {
  width: 70%;
}
.rmp-info {
  font-size: 16px;
}
.rmp-info-img {
  width: 300px;
}
.rmp-l {
  margin-left: auto;
}
.statistic-row {
  display: flex;
  flex-direction: row;
  gap: 10px;
}
.wrap-boxes {
  flex-wrap: wrap;
  justify-content: space-between;
}
.wrap-boxes > .tables-box {
  width: fit-content;
  flex: 1 1 calc(10% - 20px);
}
.horisontal-menu-item {
  cursor: pointer;
}
.horisontal-menu-item.locked {
  opacity: 0.3;
  cursor: help;
}
#logout, #admin, #users-panel {
  display: none;
}
.user-box {
  width: fit-content;
}
.user-box select {
  height: 50px !important;
}
.user-container {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.settings-panel {
  display: flex;
  gap: 10px;
  margin-bottom: 30px;
  margin-left: 20px;
}
.settings-btn {
  padding: 10px;
  border-radius: 10px;
  background-color: #333;
  cursor: pointer;
}
.settings-btn.active {
  background-color: #4e4e4e;
}
@media (max-width: 1600px) { 
  .big-modal {
    --bs-modal-width: 95% !important;
  }


  #game-players table thead tr th:nth-child(8),
  #game-players table tbody tr td:nth-child(8) {
    display: none;
  }

}
@media (max-width: 768px) {
  .statistic-row {
    flex-direction: column;
  }
  .wrap-boxes > .tables-box, .statistic-row > .tables-box {
    width: 100%;
  }
  .game-info {
    width: 100%;
  }
  .smaller-box {
    width: 80%;
  }
  .big-modal {
    --bs-modal-width: 100% !important;
  }
  #game-players table {
    width: 100%;
    border-collapse: collapse;
    display: block;
  }

  #game-players th,
  #game-players td {
    display: block;
    text-align: left;
    padding: 10px 15px;
  }

  #game-players th {
    font-weight: bold;
  }

  #game-players td:before {
    content: attr(data-label);
    font-weight: bold;
    padding-right: 10px;
  }

  #game-players td {
    text-align: left;
  }


  #game-players td {
    display: flex;
    align-items: center;
  }
  #game-players thead {
    display: none;
  }

  #game-players td:first-child {
    border-top: none;
  }
}