.bg-menu {
  background-color: var(--menu-bg)
}
.blog-post li
{
    list-style: inherit;
}
.toast{
  --bs-toast-bg: rgba(var(--bs-body-bg-rgb), 1);
}
.detail-view:hover
{
  background-color: var(--bs-body-bg);
}
.table-hover > tbody > .detail-view:hover > * {
  --bs-table-bg-state: #fff;
}
caption {
  caption-side: top;
  text-align: left;
  padding-bottom: 10px;
  font-weight: bold;
}
.lh-page-title{
  line-height: 75px;
}
.pointer {
  cursor: pointer;
}
.required:after { 
  content:" *"; 
}
input[type="radio"]+label:after{
  content:""; 
} 
.form-check-input[type=checkbox]:indeterminate
 {
    background-color: #0d6efd;
    border-color: #0d6efd;
    --bs-form-check-bg-image: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e);
}
.navbar {
  background: var(--topbar-bg);
  -webkit-box-shadow: var(--box-shadow);
  box-shadow: var(--box-shadow);
  /*min-height: var(--topbar-height); */ 
/*  right: 0;
  left: 0;
  top: 0;
  position: fixed;*/
  -webkit-transition: all .25s ease-in-out;
  transition: all .25s ease-in-out;
  z-index: 1000;
  border-bottom: var(--border-width) solid var(--border-color);
}
.nav-link {
  padding: 0;
  position: relative;
  color: var(--topbar-item-color);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  cursor: pointer;
}
.topbar .nav-link {
  height: var(--topbar-height);
}
.nav-user {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 10px;
  /*border-width: 0 1px;
  border-style: solid;
  border-color: var(--topbar-user-border);
  background-color: var(--topbar-user-bg);*/
  min-height: var(--topbar-height);
  -webkit-transition: none;
  transition: none;
}
.navbar .topbar {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin: 0 auto;
}
.navbar .topbar-menu {
  position: relative;
  list-style-type: none;
  margin-bottom: 0;
  color: var(--body-color);
}
.navbar .topbar-menu {
  position: relative;
  list-style-type: none;
  margin-bottom: 0;
}
.arrow-none:after {
  display: none;
}
.navbar .topbar-menu li {
  max-height: var(--topbar-height);
}
.dropdown{
  font-size: var(--dropdown-font-size);
}
.dropdown-menu {   
  padding: 0;
}
.navbar .dropdown-menu { 
  border-top:none;
  padding: 0;
}
.navbar .dropdown-menu hr{ 
  margin: 0;
  border-color: var(--topbar-user-border);
}
header, header a{
  color: var(--dropdown-link-color);
  text-decoration: none;
}
header a:hover{
  color: hsl(210, 50%, calc(40%));
}
.dropdown-item {
  width: 100%;
  padding: var(--dropdown-item-padding-y) var(--dropdown-item-padding-x);
  display: block; 
  clear: both;
  font-weight: 400;
  color: var(--dropdown-link-color);
  text-align: inherit;
  white-space: nowrap;
  background-color: transparent;
  border: 0;
  font-size: var(--dropdown-font-size);
  border-radius: var(--dropdown-item-border-radius, 0);  
  --bs-dropdown-link-active-bg: transparent; 
}
.dropdown-item:focus, .dropdown-item:hover{
  color: var(--body-color);
}
.button-toggle-close{
  transform: translateY(-50%);
  color: var(--topbar-item-color);  
  background-color: transparent;
  font-size: 24px;
  cursor: pointer;
  border: none;
}
.button-toggle-menu {  
  border: none;
  color: var(--topbar-item-color);  
  background-color: transparent;
  font-size: 24px;
  cursor: pointer;
  z-index: 1;
  position: relative;
}
.logo span.logo-lg {
  display: block;
}
.logo {
  display: block;
  top: 0;
  position: sticky;
  text-align: center;
  line-height: var(--topbar-height);
  padding: 0 calc(var(--sidebar-width-sm)* .5 - var(--logo-sm-height)* .7);
  -webkit-transition: all .25s ease-in-out;
  transition: all .25s ease-in-out;
}
.logo-lg img, .logo-lg i {
  /*height: var(--logo-lg-height); */
  font-size: var(--logo-lg-height);
  vertical-align: middle;  
}
.card {
  -webkit-box-shadow: var(--box-shadow);
  box-shadow: var(--box-shadow);
  margin-bottom: 1.5rem;
}
.card-header {  
  font-weight: var(--card-header-font-weight);
}
.card-body {
  -webkit-box-flex: 1;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  padding: var(--card-spacer-y) var(--card-spacer-x);
  color: var(--table-color);
}
.table>:not(caption)>*>* {
  padding: .7rem;
  color: var(--table-color);  
}
.table-sm>:not(caption)>*>* {
  padding: .25rem .25rem;
}
.form-signin {
  max-width: 500px;
  padding: 1rem;
}
.custom_error {
  max-width: 750px;
  padding: 1rem;
}
.wrapper .toast-container
{  
  margin-top: calc(var(--topbar-height) / 2 - (47px / 2) );  
}
.toast-container
{
  margin-top: calc(var(--topbar-height) / 2 - (47px / 2) );
  margin-left: calc(var(--topbar-height) / 2 - (47px / 2) );
}
.card{
  border: 0;  
}
.btn-clipboard {    
  color: var(--bs-body-color);
  background-color: transparent;
  border: 0;
}
.btn-clipboard:hover {
  color: var(--bs-link-hover-color);
}
.bd-callout {  
  padding: 1.25rem;
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
  color: var(--bd-callout-color, inherit);
  background-color: var(--bd-callout-bg, var(--bs-gray-100));
  border-left: 0.25rem solid var(--bd-callout-border, var(--bs-gray-300));
}
.bd-callout-info {
  --bd-callout-color: var(--bs-info-text-emphasis);
  --bd-callout-bg: var(--bs-info-bg-subtle);
  --bd-callout-border: var(--bs-info-border-subtle);
}
.bd-callout-warning {
  --bd-callout-color: var(--bs-warning-text-emphasis);
  --bd-callout-bg: var(--bs-warning-bg-subtle);
  --bd-callout-border: var(--bs-warning-border-subtle);
}
.bd-callout-danger {
  --bd-callout-color: var(--bs-danger-text-emphasis);
  --bd-callout-bg: var(--bs-danger-bg-subtle);
  --bd-callout-border: var(--bs-danger-border-subtle);
}
.bd-callout-success {
  --bd-callout-color: var(--bs-success-text-emphasis);
  --bd-callout-bg: var(--bs-success-bg-subtle);
  --bd-callout-border: var(--bs-success-border-subtle);
}
.bd-callout-primary-subtle {
  --bd-callout-color: var(--bs-primary-text-emphasis);
  --bd-callout-bg: var(--bs-primary-bg-subtle);
  --bd-callout-border: var(--bs-primary-border-subtle);
}

/*.bd-callout a{
  color: inherit;
  text-decoration: underline;
}*/
.nav-tabs.nav-bordered {
  border-bottom: 2px solid var(--border-color);
}
.nav-tabs {
  --nav-tabs-border-width: var(--border-width);
  --nav-tabs-border-color: var(--border-color);
  --nav-tabs-border-radius: var(--border-radius);
  --nav-tabs-link-hover-border-color: var(--secondary-bg) var(--secondary-bg) var(--border-color);
  --nav-tabs-link-active-color: var(--emphasis-color);
  --nav-tabs-link-active-bg: var(--secondary-bg);
  --nav-tabs-link-active-border-color: var(--border-color) var(--border-color) var(--secondary-bg);
  border-bottom: var(--nav-tabs-border-width) solid var(--nav-tabs-border-color);
}
.nav {
  --nav-link-padding-x: 1rem;
  --nav-link-padding-y: 0.5rem;
  --nav-link-color: var(--link-color);
  --nav-link-hover-color: var(--link-hover-color);  
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}
.nav-tabs.nav-bordered .nav-item {
  margin-bottom: -1px;
}
.nav-tabs.nav-bordered li a.active {
  border-bottom: 2px solid var(--primary-bg);
  /*font-weight: 500;*/
  color: var(--primary-bg);
}
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
  color: var(--nav-tabs-link-active-color);
  background-color: var(--nav-tabs-link-active-bg);
  border-color: var(--nav-tabs-link-active-border-color);
}
.nav-tabs.nav-bordered li a {
  border: 0;
  padding: .625rem 1.25rem;
}
.nav-tabs .nav-link {
  margin-bottom: calc(-1 * var(--nav-tabs-border-width));
  border: var(--nav-tabs-border-width) solid transparent;
  border-top-left-radius: var(--nav-tabs-border-radius);
  border-top-right-radius: var(--nav-tabs-border-radius);
}
.nav-pills>li>a, .nav-tabs>li>a {
  color: var(--secondary-color);
  font-weight: 400;
}
.nav-link:focus, .nav-link:hover {
  color: var(--primary-hover);
}
.btn-group-sm .btn{
  --bs-border-width: 0;
  border-left: 1px solid var(--bs-border-color);
}
.btn-group-sm .btn:first-child{
  border-left: 0;
}
.btn-light {
  --bs-btn-color: var(--menu-bg);  
  --bs-btn-hover-color: var(--menu-bg);
}
input[readonly] {
  background-color: var(--bs-gray-200);
}
button[submitting]:BEFORE,a[submitting]:BEFORE
{    
  content: '';
  border: var(--bs-spinner-border-width) solid currentcolor;
  border-right-color: transparent;
  display: inline-block;
  width: var(--bs-spinner-width);
  height: var(--bs-spinner-height);
  vertical-align: var(--bs-spinner-vertical-align);
  border-radius: 50%;
  animation: var(--bs-spinner-animation-speed) linear infinite var(--bs-spinner-animation-name);  
  margin: auto;
}
div[submitting]:BEFORE,td[submitting]:BEFORE{  
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: calc(0px - var(--bs-spinner-width)/2);  
  margin-top: calc(0px - var(--bs-spinner-height)/2);  
  content: '';
  border: var(--bs-spinner-border-width) solid currentcolor;
  border-right-color: transparent;
  display: inline-block;
  width: var(--bs-spinner-width);
  height: var(--bs-spinner-height);
  vertical-align: var(--bs-spinner-vertical-align);
  border-radius: 50%;
  animation: var(--bs-spinner-animation-speed) linear infinite var(--bs-spinner-animation-name);   
}
.table-grid, .table-grid-vertical{
  overflow: hidden;  
}
/*.table-grid>:not(thead)>*>* 
{
  background-color: transparent;
}*/
.table-grid td, .table-grid th, .table-grid-vertical td, .table-grid-vertical th {
  position: relative;
}
.table-grid>:not(caption)>tr>:nth-child(4n) {
    --bs-table-color-type: var(--bs-primary-bg-subtle);
    --bs-table-bg-type: var(--bs-primary-bg-subtle);
}
.table-grid>:not(caption)>tr>:nth-child(4n+1) {
    --bs-table-color-type: var(--bs-primary-bg-subtle);
    --bs-table-bg-type: var(--bs-primary-bg-subtle);
}
.table-grid-vertical .pairs
{
  --bs-table-color-type: var(--bs-primary-bg-subtle);
  --bs-table-bg-type: var(--bs-primary-bg-subtle);
}

.table-grid td, .table-grid-vertical td, .table-grid-player td
{
  padding: .3rem;
}
.table-grid td .card, .table-grid-vertical td .card, .table-grid-player td .card
{
  margin: 0;
  padding: .6rem;
  box-shadow: var(--bs-box-shadow-sm) !important;
  cursor: pointer;
}
.table-grid td .card:hover, .table-grid-vertical td .card:hover, .table-grid-player td .card:hover{
  filter: brightness(95%);
}
.z-index {
  z-index: 10;
}
.form-check{
  margin: 0;
}
.same_opponent
{
  background-color: var(--bs-danger) !important;  
  --bs-table-bg-type: var(--bs-danger) !important;
}
.same_box{
  background-color: var(--bs-warning) !important;
  --bs-table-bg-type: var(--bs-warning) !important;
}
.ui-droppable.drop-hover {
  filter: brightness(95%);
}
.input-group-prepend .input-group-text{
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.input-group-append .input-group-text{
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
input[type="number"]{
  text-align: right;
}
.modal-header .btn-close{
  margin-bottom: auto;
}
.modal-icon{
  padding-right: calc(var(--bs-modal-header-padding-x) * .5);  
}
.spinner-border-lg {
    --bs-spinner-width: 3rem;
    --bs-spinner-height: 3rem;
    --bs-spinner-border-width: 0.2em
}
.modal-xsm {
    max-width: 100px;
    margin-right: auto;
    margin-left: auto;
}
.ranking-bg-first{
  color: var(--ranking-bg-first) !important;
}
.ranking-bg-second{
  color: var(--ranking-bg-second) !important;   
}
.ranking-bg-third{
  color: var(--ranking-bg-third) !important;
}
.bg-me td{
  background-color: var(--bs-light) !important;
 
}
.color-body{
  color: var(--body-color);
}
.footer_reset
{
  margin-bottom:var(--footer-height);
}
.btn-group-xl > .btn, .btn-xl {  
  padding: 1rem 1.25rem;
  font-size: 1.5rem;   
}
.btn-xl::before{
  box-sizing: border-box;
}
.btn-xl::after{
  content: "";
  box-sizing: border-box;
}
#gameplay .middle_title{  
  border-left: 1px solid var(--bs-border-color);
  border-right: 1px solid var(--bs-border-color);  
  background-color: rgba(var(--bs-tertiary-bg-rgb), var(--bs-bg-opacity)) !important;
}
#gameplay .play thead td, #gameplay .play thead th{
  background-color: transparent;
}
#gameplay .play td, #gameplay .play th{
  padding: .5rem;  
  vertical-align: middle !important;
}
#gameplay tbody .play th{
  border-bottom: 1px solid var(--bs-border-color);
}
#gameplay .page_loader .modal-content, #scoreboard .page_loader .modal-content{
  background-color: rgba(33, 37, 41, 0.65);
}
.sticky-col {
    position: sticky;
    left: 0;           /* Fixálja az oszlopot a bal szélhez */
    z-index: 100;      /* Biztosítja, hogy a többi cella felett maradjon */    
    box-shadow: 2px 0 5px -2px rgba(0,0,0,0.2); /* Opcionális: kis árnyék az elválasztáshoz */
}
*, ::after, ::before {
    box-sizing: border-box;
}
.form-check-input:checked {
    background-color: var(--primary-bg);
    border-color: var(--primary-bg);
}
.form-check .form-check {
  display: flex;
  align-items: center;
}

.form-check-switch-lg .form-check-input {
    width: 2.9rem;      
    height: 1.75rem;    
    cursor: pointer;
    margin-top: 0;
}
.form-check-switch-lg .form-check-label {   
    cursor: pointer;    
    padding-left: .3rem;
}
.perforated-top {
    --size: 15px; 
    --mask: radial-gradient(var(--size) at 50% var(--size), #0000 98%, #000) 50% calc(-1 * var(--size)) / calc(1.5 * var(--size)) 100% repeat-x;
    -webkit-mask: var(--mask);
    mask: var(--mask);    
    padding-top: 5px;
    margin-top: -5px;
}
.perforated-left {    
    --size: 15px;         
    --mask: radial-gradient(var(--size) at var(--size) 50%, #0000 98%, #000) calc(-1 * var(--size)) 50% / 100% calc(1.5 * var(--size)) repeat-y;
    -webkit-mask: var(--mask);
    mask: var(--mask);    
    padding-left: 5px;
}
.perforated-bottom {
    --size: 15px;     
    --mask: radial-gradient(var(--size) at 50% 100%, #0000 98%, #000) 50% 100% / calc(1.5 * var(--size)) 100% repeat-x;    
    -webkit-mask: var(--mask);
    mask: var(--mask);            
    padding-bottom: 5px;    
}