.header_bl{
      width:100%;
      height:180px;
      background:white;
      margin:0px;
      padding:0px;
  }
  .header_wh{
      width:100%;
      height:180px;
      background:black;
      margin:0px;
      padding:0px;
  }
.header_toolbar_template,
.header_toolbar_template .webix_template {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
}

.header_red{
    width: 100%;
    height: 40px;
    background-color: transparent;
    font-size: 20px;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 0;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.header_red .frolic {
    color: white;
}

.header_red .her {
    color: #dd0000;
}
  .theader_bl{
      width:100%;
      color:black;
      font-weight:bold;
      background:white;
      margin:0px;
      padding:0px;
  }
  .theader_wh{
      width:100%;
      color:white;
      font-weight:bold;
      background:black;
      margin:0px;
      padding:0px;
  }
  .webix_template {
    padding: 0 !important;
    }
    
    .webix_template > div {
        margin: 0 !important;
        padding: 0 !important;
    }
  .temp_bgc{
      background:white;
      color:black;
  }
  .footer_bl,
.footer_wh .webix_template{
      font-size:x-small;
      color:black !important;
      background:white !important;
      border: 0 !important;
  }
.footer_wh,
.footer_wh .webix_template {
    font-size: x-small;
    color: white !important;
    background: black !important;
    border: 0 !important;
}
  /* width */
  ::-webkit-scrollbar {
    width: 4px;
  }
  
  /* Track */
  ::-webkit-scrollbar-track {
    background: #f1f1f1;
  }
  
  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: #888;
  }
  
  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    background: #555;
  }
  .webix_message.webix_info{
      background-color: #FEB92E;
      color:black;
      font-weight:bold;
  }
  .container {
    width: 100%;
    margin: 0px;
    padding: 0px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  .warn{
      color:red;
      font-weight:bold;
  }
  .calObj {
      font-size:small;
      font-family:Verdana, Geneva, Tahoma, sans-serif;
      color:black;
  }
  .ImgW {
    max-width: 100%;
      max-height: 100%;
  }
  .temp_bgc{
      background:white;
      color:black;
  }
  table{
      border: 1px solid black;
      border-collapse: collapse;
  }
  #slogan_ext{
      position: relative;
      margin-top: -315px;
      top: 450px;
      z-index: 5;
  }
  #slogan{
      position: relative;
      margin-top: -315px;
      top: 450px;
      z-index: 5;
  }
  .hide{
    visibility: hidden;
      display:none;
  }
  .hidden span{
    visibility: hidden;
      display:none;
  }
  .hidden:hover span{
      visibility: visible;
      display:block;
      text-align: center;
      color:white;
  }
  .filter_menu,
    .filter_menu .webix_view,
    .filter_menu .webix_scrollview {
        scrollbar-width: thin;
        scrollbar-color: #444 #3f3f3f;
    }
    .filter_menu .webix_scrollview::-webkit-scrollbar {
        width: 4px;
    }
    
    .filter_menu .webix_scrollview::-webkit-scrollbar-track {
        background: #3f3f3f;
    }
    
    .filter_menu .webix_scrollview::-webkit-scrollbar-thumb {
        background: #444;
        border-radius: 4px;
    }
    .filter_menu ::-webkit-scrollbar-track {
        background: #3f3f3f !important;
    }
    .filter_menu .webix_form {
        background: #3f3f3f !important;
    }
    .filter_menu .webix_scroll_cont,
    .filter_menu .webix_win_content,
    .filter_menu .webix_win_body {
        background: #3f3f3f !important;
        border: 0 !important;
    }
    .filter_menu .webix_el_box,
    .filter_menu .webix_inp_static,
    .filter_menu input,
    .filter_menu .webix_inp_label {
        background: #3f3f3f !important;
        color: white !important;
    }
    .filter_menu .webix_popup {
     background: #3f3f3f !important;
    }
    .webix_sidemenu {
        background: #3f3f3f !important;
    }
    .filter_menu .webix_el_label .webix_el_box,
    .filter_menu .webix_el_label label,
    .filter_menu .webix_el_label div,
    .filter_menu .webix_inp_label,
    .filter_menu label {
        color: #ffffff !important;
    }
  .profile{
      height: 100%;
      width: 100%;
      margin: 0 auto;
      position:relative;
      display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    border-radius: 8px;
    border: 1px solid gold;
    box-sizing: border-box;
  }
  .profile img{
    flex-shrink: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .imgview{
      transition: all .2s ease-in-out;
  }
  .imgview:hover{
      transform: scale(1.1);
  }
  .profile_avl{
	width: 100%;
	height: 100px;
	position:absolute;
	top:0;
	left:0;
	margin-top:0px;
}
.profile_avl_left {
	padding-top:4px;
	padding-right:3px;
	padding-left:3px;
	padding-bottom:4px;
	visibility: visible;
	position:absolute;
	content: url('https://api.iconify.design/mdi/calendar-check.svg?color=lime&width=19&height=19');
	color:lime;
	float: left;
	background-color:black;
	background-color: rgba(0,0,0,0.5);
}
.profile_avl_right {
	margin-left:25px;
	padding-top:2px;
	padding-right:10px;
	padding-left:4px;
	padding-bottom:2px;
	visibility: visible;
	position:absolute;
	color:lime;
	float: left;
	background-color:black;
	background-color: rgba(0,0,0,0.5);
}
.profile_content{
    width: 100%;
    position:absolute;
    bottom:0;
    left:0;
}
  .profile_name{
      width: 100%;
      text-align: center;
      color:gold;
  }
  .profile_data_left{
      width: 30%;
      padding-left:5px;
      color:white;
      float: left;
      font-size: 0.9em;
      box-sizing: border-box;
  }
  .profile_data_right{
      width: 70%;
      color:white;
      float: left;
      text-align: right;
      padding-right: 5px;
      font-size: 0.9em;
      box-sizing: border-box;
  }
.profile_loc{
    width: 100%;
    text-align: center;
    color:white;
}
.detail_content{
	width:400px;
	height:300px;
	padding-left:5px;
	color:black;
	float: left;
}
.profile_popup {
    position: relative;
    overflow: visible !important;
    background: transparent !important;
}

/* one consistent charcoal popup body */
.profile_popup,
.profile_popup .webix_win_content,
.profile_popup .webix_body,
.profile_popup .webix_template,
.profile_popup .webix_view,
.profile_popup .webix_layout_space {
    background: #3f3f3f !important;
    color: white !important;
    border-radius: 12px !important;
}

/* gold border, rounded corners, no white corner bleed */
.profile_popup .webix_win_content {
    border: 1px solid gold !important;
    overflow: hidden !important;     
    box-shadow: 0 6px 24px rgba(0,0,0,0.45);
}

/* charcoal arrow with gold outline */
.profile_popup::before {
    content: "";
    position: absolute;
    top: -9px;
    left: var(--popup-arrow-x, 40px);
    width: 18px;
    height: 18px;
    background: #3f3f3f;
    border-left: 1px solid gold;
    border-top: 1px solid gold;
    transform: rotate(45deg);
    z-index: 100000;
}

/* keep popup itself clean */
.profile_popup .webix_popup {
    border: 0 !important;
    background: transparent !important;
}

.toolbar_top {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;

    width: 100% !important;

    z-index: 5000 !important;

    background: rgba(0,0,0,0.85) !important;
    backdrop-filter: blur(8px);

    border: 0 !important;
}

.filter_toolbar {
    border: 0 !important;
}

.webix_modal,
.webix_window {
    z-index: 20000 !important;
}

/* PROFILE MODAL */

.profile_modal_window {
    z-index: 99999 !important;
}

.profile_modal_window .webix_win_body {
    background: #080808;
}

.profile_modal_head {
    background: #050505 !important;
    color: #ffffff !important;
    border-bottom: 1px solid rgba(255,255,255,0.12);
}

.profile_modal_shell {
    background: #080808;
    color: #ffffff;
    min-height: 100vh;
    padding: 26px;
    box-sizing: border-box;
}

.profile_modal_hero {
    display: flex;
    gap: 28px;
    align-items: stretch;
}

.profile_modal_photo {
    width: 380px;
    min-height: 520px;
    border-radius: 28px;
    overflow: hidden;
    background: #111111;
    box-shadow: 0 28px 80px rgba(0,0,0,0.55);
    flex-shrink: 0;
}

.profile_modal_photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Right intro panel */

.profile_modal_intro {
    flex: 1;
    border-radius: 28px;
    padding: 34px;
    background: #181818;
    border: 1px solid rgba(255,255,255,0.12);
    box-shadow: 0 28px 80px rgba(0,0,0,0.35);
    box-sizing: border-box;
}

.profile_modal_kicker {
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 12px;
    color: rgba(255,255,255,0.65);
    margin-bottom: 12px;
}

.profile_modal_name {
    font-size: 72px;
    line-height: 0.95;
    font-weight: 800;
    letter-spacing: -3px;
}

.profile_modal_nation {
    margin-top: 14px;
    font-size: 20px;
    color: rgba(255,255,255,0.78);
}

.profile_modal_status {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 26px;
}

.profile_modal_status span {
    padding: 10px 14px;
    border-radius: 999px;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.16);
    font-size: 13px;
}

/* Quick stats */

.profile_modal_quickgrid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 34px;
}

.profile_modal_quickgrid div {
    width: 120px;
    background: rgba(0,0,0,0.28);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 18px;
    padding: 16px;
    box-sizing: border-box;
}

.profile_modal_quickgrid strong {
    display: block;
    font-size: 24px;
    line-height: 1.1;
}

.profile_modal_quickgrid span {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: rgba(255,255,255,0.58);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Lower panels */

.profile_modal_sections {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: 22px;
}

.profile_panel {
    width: calc(50% - 9px);
    border-radius: 24px;
    padding: 22px;
    background: #181818;
    border: 1px solid rgba(255,255,255,0.11);
    box-sizing: border-box;
}

.profile_panel h3 {
    margin: 0 0 16px 0;
    font-size: 18px;
    letter-spacing: -0.5px;
}

/* Details */

.profile_detail_grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.profile_detail_grid div {
    width: calc(50% - 6px);
    background: rgba(0,0,0,0.28);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 18px;
    padding: 16px;
    box-sizing: border-box;
}

.profile_detail_grid span {
    display: block;
    font-size: 12px;
    color: rgba(255,255,255,0.58);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.profile_detail_grid strong {
    display: block;
    margin-top: 6px;
    font-size: 16px;
}

/* Chips */

.profile_chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.profile_chip {
    display: inline-flex;
    align-items: center;
    padding: 9px 13px;
    border-radius: 999px;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.13);
    font-size: 13px;
}

.profile_chip.muted {
    color: rgba(255,255,255,0.55);
}

/* Gallery */

.profile_gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.profile_gallery_item {
    width: calc(20% - 8px);
    height: 180px;
    border-radius: 16px;
    overflow: hidden;
    background: #111111;
}

.profile_gallery_item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile_gallery_empty {
    width: 100%;
    padding: 22px;
    border-radius: 16px;
    background: rgba(0,0,0,0.25);
    color: rgba(255,255,255,0.55);
    text-align: center;
    box-sizing: border-box;
}

/* Mobile */

@media screen and (max-width: 760px) {
    .profile_modal_shell {
        padding: 12px;
    }

    .profile_modal_hero {
        display: block;
    }

    .profile_modal_photo {
        width: 100%;
        min-height: 440px;
        border-radius: 22px;
        margin-bottom: 14px;
    }

    .profile_modal_intro {
        padding: 22px;
        border-radius: 22px;
    }

    .profile_modal_name {
        font-size: 46px;
        letter-spacing: -2px;
    }

    .profile_modal_quickgrid div {
        width: calc(50% - 6px);
    }

    .profile_panel {
        width: 100%;
    }

    .profile_detail_grid div {
        width: calc(50% - 6px);
    }

    .profile_gallery_item {
        width: calc(33.333% - 7px);
        height: 150px;
    }
}

@media screen and (max-width: 420px) {
    .profile_modal_name {
        font-size: 38px;
    }

    .profile_modal_photo {
        min-height: 380px;
    }

    .profile_detail_grid div {
        width: 100%;
    }

    .profile_gallery_item {
        width: calc(50% - 5px);
    }
}

.profile_modal_window .webix_template {
    overflow: visible !important;
}