@import url('https://fonts.googleapis.com/css2?family=Sarabun:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');


body{
    font-family: 'Sarabun' !important;
} 

/* hide menu bar */
#wp-admin-bar-new-content, #wp-admin-bar-wp-logo{
   display: none !important;
}

.frontend_full_content_section{
    width: 100%;
 }

.frontend_content_section{
    width: 925px;
 }

 .frontend_full_content_section{
    width: 100%;
 }

.frontend_sub_menu_section{
    display: flex;
    margin-top: 24px;
}

 .frontend_content_filter{
   display: flex;
   justify-content: space-between;
   align-items: center;
 }


 .frontend_search_event_section{
   display: flex;
   align-items: center;
   border: 1px solid #B2B2B2;
   border-radius: 10px !important;
   background-color: #fff;
   padding: 0px 10px;
   height: 42px;
 }

.submenu{
    color:#475569;
    padding: 10px 16px;
    border: 1px solid #CBD5E1; 
    font-weight: 500;
}

.submenu_active{
    color: #ffffff !important;
    border: 1px solid #123171;
    background: #123171;
}

.submenu_left{
    border-radius: 10px 0px 0px 10px;
}

.submenu_right{
    border-radius: 0px 10px 10px 0px;
}


.frontend_sub_menu_type_section{
    display: flex;
    align-items: center;
    margin-top: 16px;
}

.submenu_type{
   margin-right: 16px;
   color: rgba(71, 85, 105, 0.50);;
}

.submenu_type_active{
   color: #475569 !important;
   font-size: 16px;

   padding: 6px 16px;
   border-radius: 10px;
   background: rgba(18, 49, 113, 0.09);
}

.frontend_filter{
   /* display: flex;
   align-items: center;
   border: 1px solid #B2B2B2;
   border-radius: 10px !important;
   background-color: #fff;
   padding: 0px 10px;
   margin-left: 5px; */
}

.frontend_select{
    color:#000;
    border: 0px !important;
    box-shadow: none !important;
    font-size: 14px;
    padding-right: 10px;
}

.frontend_select option[value=""] {
   color:#000;
   font-weight: 300;
}

/* When select has the 'default-selected' class, text will be grey */
.frontend_select.default-selected {
   color: grey;
   font-weight: 400;
   color: #000 !important;
   font-size: 16px !important;
   cursor: pointer;
   padding: 0px !important
}


.frontend_content_card_section{
    display: flex;
    align-items: flex-start;
    gap: 24px;
    align-self: stretch;
    border-radius: 10px;
    margin: 50px 0px;
    flex-wrap: wrap;
 }

.frontend_content_table_section{
    display: flex;
    align-items: flex-start;
    gap: 24px;
    align-self: stretch;
    border-radius: 10px;
    margin: 50px 0px;
    flex-wrap: wrap;

}


 .frontend_small_card{
   width: 18%;
   border-bottom: 1px solid #DDDDDD;
   border-radius: 20px;
   border: 1px solid #E9E9E9;
   background: #FFF;
}
 

.frontend_small_card_cover{
   height: 200px;
   background-position: center;
   background-size: cover;
   border-radius: 8px;
}



 .frontend_small_card_title{
    color: #131313;
    font-size: 16px;
    font-weight: 500;
    margin-top: 5px;
 }

 .frontend_small_card_description{
    width: 100%;
    color: #B2B2B2;
    font-size: 14px;
    font-weight: 400;
 }

  .frontend_small_card_detail_section{
    padding: 5px 16px;
 }

 .frontend_page_header{
   display: flex;
    justify-content: flex-start;
    width: 100%;
    border-bottom: 1px solid #EDEDED;
    align-items: baseline;
}


 .frontend_table_display {
      width: 100%;
      border-spacing: 0;
      border-collapse: separate;
      border-top-left-radius: 20px;
      border-top-right-radius: 20px;
      border: 1px solid #CBD5E1;
   }

.frontend_table_display th,
.frontend_table_display td {
    padding: 20px;
    text-align: center;
}


.frontend_table_display th {
   background-color: #F8FAFC;
   font-weight: 450;
   color:#1E293B;
}


.frontend_table_display tr {
   border: 1px solid #E2E8F0;
}

.table_row_personnel:hover {
    background-color: #f9f9f9;
    cursor: pointer;
}

.frontend_table_display td {
   color: #475569;
   background-color: #FFF;
}

.frontend_column_left{
   text-align: left !important;
}

.frontend_column_left_top_border{
   border-top-left-radius: 25px;
}

.frontend_column_right_top_border{
   border-top-right-radius: 25px;
}

.training_type_training{
   color: #8628EB;
   font-size: 14px;
   line-height: 20px; /* 166.667% */

   padding: 5px;
   border-radius: 8px;
   background: rgba(134, 40, 235, 0.10);

   width: fit-content;
}

.training_type_certification{
   color: #D817CF;
   font-size: 14px;
   line-height: 20px; /* 166.667% */

   padding: 5px;
   border-radius: 8px;
   background: rgba(216, 23, 207, 0.10);
   
   width: fit-content;
}

.selectize-control.single .selectize-input, .selectize-control.single {
   padding: 10px 40px 10px 20px;
   display: flex;
   align-items: center;
   border: 1px solid #B2B2B2;
   border-radius: 10px !important;
   margin-right: 5px;
   min-width: 200px;
}

.selectize-input{
   background-color: #fff;
}


.selectize-dropdown-content{
   max-height: 400px !important;
}

.selectize-control.plugin-remove_button .remove-single{
   right: 5px !important;
   top: -3px !important;
}

.dashboard_container_detail_wrapper {
    max-width: 1250px;
    padding: 40px 0px;
    margin: 0 auto;
    width: 100%;
}

.frontend_content_filter_section_1{
   display: flex;
 }


.frontend_page_header_no_underline{
    display: flex;
    justify-content: space-between;
    align-items: stretch;
}

.frontend_main_header{
   color: #0B243F;
   font-size: 24px;
   font-weight: 500;
}

.frontend_button_register{

   padding: 0px 10px;
   color: #FFF;
   font-size: 15px;
   font-weight: 500;

   border-radius: 6px;
   border: 1px solid #C8332E;
   background: #C8332E;
}

.frontend_button_share{

   padding: 0px 10px;
   color: #C8332E;
   font-size: 15px;
   font-weight: 500;

   border-radius: 6px;
   border: 1px solid #C8332E;
   background: #fff;
}

.frontend_page_tag_section{
   display: flex;
   margin-top: 16px;
}

.frontend_page_tag{
   color: #475569;
   font-size: 14px;
   line-height: 20px; /* 166.667% */

   padding: 5px 10px;
   border-radius: 8px;
   border-radius: 10px;
   background: #FFF; 

   width: fit-content;
   
   margin-right: 16px;
}

.frontend_page_sub_header{
   margin-top: 40px;
}

.frontend_sub_header{
   color: #0B243F;
   font-size: 20px;
   font-weight: 600;

   padding-bottom: 5px;
   border-bottom: 3px solid #DB4444;

   width: fit-content;
}

.frontend_sub_sub_header{
   margin-top: 50px;
   color: #0B243F;
   font-size: 20px;
   font-weight: 600;

   padding-bottom: 5px;
   width: fit-content;
}

.frontend_page_table_detail{
   margin-top: 24px;
   max-width: 900px;
}

.frontend_page_table_detail td{
   color: #6A737D;
   background-color: #fff;
   padding: 16px !important;
   border-color: #E2E8F0;
}

.frontend_page_table_column_name{
   width: 200px;
   color: #475569 !important;
}

.frontend_page_table_first_column_first_row{
   border-top-left-radius: 10px;
}

.frontend_page_table_second_column_first_row{
   border-top-right-radius: 10px;
}

.frontend_page_table_first_column_last_row{
   border-bottom-left-radius: 10px;
}

.frontend_page_table_second_column_last_row{
   border-bottom-right-radius: 10px;
}

.frontend_page_content_section{
   color: rgba(0, 0, 0, 0.85);

   background-color: #fff;
   border-radius: 10px;
   padding: 16px;
   margin-top: 24px;
}

.frontend-icon-red{
   color:#f00;
}

.frontend_button_register_link{
   margin-top: 4px;
}

.frontend_page_content_section > ul > li{
   margin-left: 20px !important;
}

.frontend_page_file_attachment{
   display: flex;
   border-radius: 10px;
   background: #F4F6FA;
   padding: 8px;
   margin-bottom: 10px;
}

.attachment_file_name{
   margin-left: 10px;

   color: var(--Gray-700, #414651);

   font-size: 16px;
   font-weight: 300;
}

.attachment_icon{
   color: #123171 !important;
}

.frontend_page_place_name{
   font-weight: 500;
}

.frontend_page_cover_section{
   border-radius: 20px;
   border: 1px solid #DDD;
   background: #FFF;
   padding: 16px;
}

.frontend_page_image_cover{
   width: 100%;
   border-radius: 10px;
   height: 500px;
   background-size: cover !important;
   background-position: center !important;
}

.frontend_page_image_assemble{
   max-width: fit-content;
   height: 93px;
   object-fit: cover;
   border-radius: 10px;
   margin: 6px;
}

.frontend_page_image_albums{
   max-width: 200px;
   height: 100px;
   object-fit: cover;
   border-radius: 10px;

   margin-top: 10px;
   margin-right: 10px;
}

.add_margin_top{
   margin-top: 16px;
}

.add_margin_right{
   margin-right: 16px;
}

.tag_open_status{
   color: #12CC56;
}

.tag_close_status{
   color: red;
}

.tag_temp_close_status{
   color: orange;
}

.frontend_page_description_section{
   color :#6A737D;
   margin: 40px 0px;
}

.frontend_page_table_open_time td{
   border: 0px;
   padding: 5px !important;
}

.frontend_page_table_open_time{
   width: fit-content;
}

.extend_column_name{
   width: 300px !important;
}

.zoomable {
   width: 300px;
   transition: transform 0.3s ease;
   cursor: pointer;
}

.zoomable_small {
   transition: transform 0.3s ease;
   cursor: pointer;
   border-radius: 10px;
   object-fit: cover;
}

.zoomed {
   transform: scale(5); /* Zoom factor */
   z-index: 10;
   position: relative;
   border-radius: 0px !important;
}

.zoomed_small {
   transform: scale(3); /* Zoom factor */
   z-index: 10;
   position: relative;
   border-radius: 0px !important;
}

/* Prevent background scroll while zoomImg open */
.no-scroll { overflow: hidden; }

/* Fullscreen, centered overlay */
.zoomImg {
  position: fixed;
  inset: 0;                 /* top:0; right:0; bottom:0; left:0 */
  background: rgba(0,0,0,0.8);
  display: none;            /* hidden by default */
  align-items: center;      /* center vertically */
  justify-content: center;  /* center horizontally */
  padding: 24px;            /* some breathing room on small screens */
  z-index: 10000;           /* above your page content */
}

/* Show when open */
.zoomImg.open { display: flex; }

/* The zoomed image: always contained within viewport */
.zoomImg img {
  max-width: 95vw;
  max-height: 95vh;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  object-fit: contain;
}

/* Optional: tweak your thumbnails */
.zoomable {
  width: 300px;
  cursor: zoom-in;
  transition: transform 0.2s ease;
}
.zoomable:hover { transform: scale(1.02); }

.zoomImg-close {
  position: absolute;
  top: 16px;
  right: 24px;
  font-size: 2rem;
  font-weight: bold;
  color: #fff;
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 10001; /* above the image */
  line-height: 1;
}

.zoomImg-close:hover {
  color: #ff5555;
}


/* (Legacy) If you had .zoomed/.zoomed_small, they’re no longer needed */


.frontend_page_sub_card_section{
   color: rgba(0, 0, 0, 0.85);

   background-color: #fff;
   border-radius: 10px;
   padding: 16px;
   margin-top: 24px;

   display: flex;
   flex-wrap: wrap;
}


.frontend_sub_card{
   width: 270px;
   margin: 16px;
}

.frontend_sub_card_cover{
   width: 270px;
   height: 120px;

   background-position: center !important;
   background-size: cover !important;

   border-radius: 10px;
}

.frontend_sub_card_name{
   margin-top: 10px;
   width: 270px;
   height: 50px;
   overflow: hidden;

   font-weight: 500;
}

.frontend_page_split_section{
   display: flex;
   justify-content: space-between;
}

.frontend_page_section_left{
   width: 900px;
}

.frontend_page_section_right{
   width: 325px;
}

.frontend_sub_header_map{
   width: fit-content;
    
   font-size: 16px;
   font-weight: 500;
   border-bottom: 2px solid #DB4444;
   margin-bottom: 10px;
}

.frontend_page_place_name_side{
   font-size: 14px;
   font-weight: 500;
}

.frontend_page_place_address_side{
   color: #6A737D;
   font-size: 14px;
}

.frontend_page_place_address_section{
   display: flex;
   align-items: flex-start;

   margin-bottom: 10px;
}

.stadium_text_content{
   color: #000 !important;
   border-left: 1px solid #ccc;
}

.tooltiptext_auto{
   width: 80vw !important;
}

 
 .event_page_filter_by_date{
   display: flex;
   align-items: center;
   border: 1px solid #B2B2B2;
   border-radius: 10px !important;
   background-color: #fff;
   padding: 0px 10px;
   margin-right: 10px;
 }

 .category_filter{
   max-height: 100% !important;
 }

 .event_page_item_box{
   cursor: pointer !important;
 }

 [class^="bi-"]::before, [class*=" bi-"]::before{
   line-height: inherit !important;
 }

 .icon_location{
   padding-right: 5px;
 }

 .icon_frontend_white{
   color: #fff;
 }
 



 /* event page */
 .event_page_item_box_new{
   width: 48%;
   /* border-radius: 20px; */
   /* border: 1px solid #E9E9E9; */
   /* border-bottom: 1px solid #DDDDDD; */
   background: #FFF;
   cursor: pointer;
 }


 .stadium_cover_page{
   background-size: cover;
   background-position: center;
   width: 100%;
   height: 170px;
   border-radius: 15px;
 }

 .frontend_content_filter_section_2{
   display: flex;
 }

 .frontend_view_mode_section{
   background-color: #fff;
   border-radius: 10px;

   display: flex;
   align-items: center;

   gap: 10px;
   padding: 5px 10px;
   margin-left: 10px;
 }

 .icon_view_mode{
   max-width: 24px;
   max-height: 24px;
 }

 .frontend_view_mode_active{
   border-radius: 10px;
   border: 1px solid #0023B4;

   padding: 5px;
 }

 .frontend_content_grid_section{
   width: 100%;
   margin-top: 38px;
   padding: 24px;

   border-radius: 10px;
   background: #FFF;

   display: flex;
   flex-wrap: wrap;
   gap:24px; 
}


.course_page_item_box{
   width: 32%;
   border-radius: 20px;
   background: #FFF;
   cursor: pointer;
}

/* association */

 .association_card_new{
   display: flex;
   padding: 24px;
   align-items: flex-start;
   gap: 32px;
   align-self: stretch;

   border-radius: 20px;
   border: 1px solid #E9E9E9;
   background: #FFF;
   margin-bottom: 20px;

   cursor: pointer;
 }

 .frontend_page_banner_section{
   display: flex;
 }

 .frontend_page_association_banner_section{
   display: flex;
   justify-content: space-between;
   align-items: center;
 }

 .frontend_page_image_profile_section{
   width: 135px;
   height: 135px;

   background-position: center !important;
   background-size: cover !important;
   border-radius: 50%;

   margin-left: 30px;
 }

 .highlight_link{
   color: #0131ba !important;
 }

 /* couse detail participant */

   .frontend_page_participant_container {
      background-color: #fff;
      padding: 2rem;
      border-radius: 16px;
      max-width: 1000px;
      margin: auto;
      box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    }

    .frontend_page_participant_title {
      font-size: 20px;
      font-weight: bold;
      margin-bottom: 1.5rem;
    }

    .frontend_page_participant_topbar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;

      border-radius: 32px 32px 0px 0px;
      border: 1px solid #CBD5E1;
      background: #FFF;  
      padding: 24px;  
}

   .frontend_page_participant_download_btn {
      padding: 10px 16px;
      justify-content: center;
      align-items: center;
      gap: 8px;
      border-radius: 10px;
      background: #123171;

      color: #FFF;
      font-size: 14px;
      font-style: normal;
      font-weight: 500;
      line-height: 20px; /* 142.857% */

      margin: 0px !important;
   }

    .frontend_page_participant_search_box input {
      padding: 0.5rem 1rem;
      border: 1px solid #ccc;
      border-radius: 8px;
      font-size: 14px;
    }

    .frontend_page_participant_table {
      width: 100%;
      background-color: white;
      overflow: hidden;

      border-radius: 0px 0px 32px 32px;
      border: 1px solid #CBD5E1;

    }

    .frontend_page_participant_table th,
    .frontend_page_participant_table td {
      padding: 24px !important;
      text-align: left;
      border-bottom: 1px solid #CBD5E1;
      color: #1E293B;
    }

    .frontend_page_participant_table th {
      background:#F8FAFC;
      font-weight: 700;
    }

    .frontend_page_participant_user {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .frontend_page_participant_user img {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      object-fit: cover;
    }


    /* training register */

    .training_register_header{
      color: #0B243F;
      font-size: 24px;
      font-weight: 700;
      line-height: 30px; /* 125% */
      text-align: center;
    }

    .training_register_sub_header{
      color: #0B243F;
      font-size: 18px;
      font-weight: 500;
      line-height: 30px; /* 125% */
      margin:20px 0px;
    }
    

    
.frontend_main_form_section{
    margin: 50px 0px;
    background-color: #ffffff;
}

.frontend_main_form_part{
    border-radius: 10px;
    overflow: hidden;
    padding: 20px;

    color: #000;
}

.form_header_1{
    background: #E0E4EE;

    color: #000000;
    font-size: 18px;
    font-weight: 600;
    line-height: 30px; /* 166.667% */
    padding: 10px;
    margin: -20px -20px 20px -20px;
}

.form_header_2{
    text-align: center;
    color: #000000;
    font-size: 18px;
    font-weight: 600;
    line-height: 30px; /* 166.667% */
    padding: 10px;
}


.form_header_3{
    width: 100%;
    text-align: left;
    color: #000000;
    font-size: 16px;
    font-weight: 600;
    line-height: 30px; /* 166.667% */
    padding: 10px;
}


.frontend_form_multi_row{
   display: flex;
   justify-content: space-between;
   margin:20px 0px;
}


.frontend_form_column_row{
   font-size: 16px;
   font-weight: 500;
   padding-right: 20px;
   width: 100%;
   line-height: 20px;
    margin-bottom: 20px;
}

.form_input_one{
    width: 100%;
    max-width: 100% !important;
    border-radius: 10px !important;
    height: 48px !important;
    margin-top: 5px;
}

.form_text_area{
    height: 100px;
}

.training_register_button_section{
   text-align: right;
}

.frontend_button_blue{

   padding: 0px 10px;
   color: #FFF;
   font-size: 15px;
   font-weight: 500;

   border-radius: 6px;
   border: 1px solid #123171;
   background: #123171;

   cursor: pointer;
}

.required_field_tag{
    color: #ef4444;
    font-size: 14px;
}

.frontend_response_text{
    font-size:24px;
    text-align:center;
    padding-top:100px;
    padding-bottom: 500px;
    color:#166d00;
}

.association_grid_content_section{
   display: flex;
   align-items: flex-start;
   flex-wrap: wrap;
   padding: 30px 0px;
   gap: 10px;
   border-radius: 10px;
   background: #FFF;
}

.box_pointer{
   cursor: pointer;
}

.frontend_table_list_tutor td{
   color: #000;
}

.stadium_cover_new {
    width: 100%;
    height: 200px;
    overflow: hidden;
}
.stadium_cover_new img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 15px;
}

.column_no_border{
   border-bottom: none !important;
}

.tag_parent{
   color: #0023B4 !important;
   background-color: #E0EAFF !important;
}

.tag_open{
   color: #00AC3F;
   background-color: #E4FFE1;
}

.tag_temp_close{
   color: #ab6f00;
   background-color:#fff3db;
}

.tag_close{
   color: #8e0000;
   background-color: #ffe2e2;

}

.frontend_sub_stadium_indicator{
   display: flex;
   flex-wrap: wrap;
}

.frontend_sub_card_indicator{
   width: 250px;
   margin: 16px;
}

.frontend_sub_card_indicator_cover{
   width: 250px;
   height: 120px;

   background-position: center !important;
   background-size: cover !important;

   border-radius: 10px;
}

.frontend_sub_card_indicator_name{
   margin-top: 10px;
   width: 250px;
   height: 50px;
   overflow: hidden;

   font-weight: 500;
}

.frontend_indicator_detail_section{
   display: flex;
   flex-wrap: wrap;
   gap: 15px;
}

.frontend_landscape_image{
   width: 250px;
   height: 125px;
   object-fit: cover;
}

.frontend_vertical_img{
   width: 180px;
   height: 200px;
   object-fit: cover;
}

.frontend_landscape_card{
   width: 270px;
   border:1px solid #E2E8F0;
   border-radius: 10px;
   padding: 8px;
}

.frontend_vertical_card{
   width: 200px;
   border:1px solid #E2E8F0;
   border-radius: 10px;
   padding: 8px;
}

.frontend_table_top_border_radius{
   border-radius: 10px 10px 0px 0px;
   background-color: #E0EAFF !important;
}

.frontend_table_bottom_border_radius{
   border-radius: 0px 0px 10px 10px;
}

.frontend_table_sub_indicator{  
   border-bottom: 1px solid #E6E6E6;
   background: #F8FAFC !important;
}

.sub_indicator{
    margin-left: 20px;
    margin-bottom: 20px !important;
}

.sub_sub_indicator{
    margin-left: 40px;
    margin-bottom: 20px !important;
}

.button_add_new , .button_add_new:hover{
   color : #fff;
   font-weight: 500;
   font-size: 14px;

   background-color: rgb(106 89 232 / var(--tw-bg-opacity, 1));

   padding: 0px 16px;
   border-radius: 0.5em;
   text-decoration: none;

   cursor: pointer;

   border:0px !important;
   margin: 0px !important;

}


/* tranfer from backend */

.tooltipstered{
   display: contents !important;
}

/* Tooltip text */
.tooltip .tooltiptext {

   
  visibility: hidden;
  width: 600px;
  background-color: #fff;
  color: #000;
  text-align: left;
  padding: 5px 0;
  border-radius: 6px;
  padding: 10px;

  font-size: 16px;
  font-weight: 400;
 
  /* Position the tooltip text - see examples below! */
  position: absolute;
  z-index: 999;

  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  line-height: 20px;
}

 .tooltiptext_small {
  width: 200px !important;
}

.tooltiptext_large{
    width: max-content !important;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
}

.backend_main_button_right_section{
    font-size: 16px;
    color: #000;
    display: flex;
}

.switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 28px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute !important;
    cursor: pointer;
    top: 0; left: 0;
    right: 0; bottom: 0;
    background-color: #ddd;
    border-radius: 34px;
    transition: .4s;
}

.slider:before {
    position: absolute !important;
    content: "";
    height: 20px;
    width: 20px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

input:checked + .slider {
    background-color: #6c4df5 !important;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
}

input:checked + .slider:before {
    transform: translateX(22px);
}



.backend_main_detail_section{
    display: flex;
    justify-content: space-between;
    margin: 24px 0px;
}

.backend_main_comment_detail{
    font-size: 16px;
    color : #000;
    margin:10px 0px;
    line-height: 26px;
}

.backend_main_comment_section{
    padding: 24px;
    background-color: rgb(203 205 232 / var(--tw-bg-opacity, 1));
    border-radius: 0.5em;
}

.backend_main_owner_section{
    padding: 24px;
    background-color: rgb(203 205 232 / var(--tw-bg-opacity, 1));
    border-radius: 0.5em;
}

.backend_group_input_section{
    padding: 24px;
    border: 1px solid #e5e7eb;
    border-radius: 0.5em;
    margin-top: 50px;
}

.backend_row_input{
    font-size: 16px;
    color: #000;
    margin: 20px 0px;
    line-height: 25px;
}

.backend_row_multi_input{
    display: flex;
    margin:20px 0px;
    align-items: center;
}

.backend_one_input{
    font-size: 16px;
    margin-right: 20px;
    color: #000 !important; 
}

.large_icon{
    font-size: 20px;
}

.input_select_full{
    width: 100%;
}

.notic_text{
    font-size: 12px;
    color: #f00;
}

.backend_description_section{
    margin-top: 50px;
    background-color: rgb(230 248 250 / var(--tw-bg-opacity, 1));
    border-radius: 0.5em;

    padding: 24px;

    color: #3c434a;
}

.backend_sub_header_new{
    font-size: 18px;
    font-weight: 700;
}

.backend_group_input_two_section{
    display: flex;
    justify-content: space-between;
}

.backend_group_split_section{
    width: 45%;
}


.backend_main_search_multi_row{
   display: flex;
   justify-content: space-between;
   margin:20px 0px;
}

.backend_main_search_column_row{
   width: 25%;
   font-size: 16px;
   font-weight: 500;
   padding-right: 20px;
}


.filter_search{
    width: 100%;
    background-color: #fff !important;
    height: 41px !important;
    border: 1px solid #b2b2b2 !important;
    border-radius: 10px ! IMPORTANT;
}

/* button filter */
#status_filter_buttons {
    justify-content: space-between;
    flex-wrap: wrap;
}

.status_filter_btn {
    border: none;
    padding: 10px 25px;
    border-radius: 999px;
    background-color: #ededed;
    color: #374151;
    font-size: 14px;
    cursor: pointer;
    transition: 0.2s ease;
    width: 22%;
    height: 50px;
}

.status_filter_btn_large{
    width: 32% !important;
}

.status_filter_btn.active {
    background-color: #0056b3;
    color: white;
}


 .backend_main_header_section{
    background-color: rgb(203 205 232 / var(--tw-bg-opacity, 1));
    padding: 24px;
    border-radius: 0.5em;
 }


 .backend_main_header_new{
    color : #000;
    font-weight: 700;
    font-size: 22px;
    line-height: 2rem;

    display: flex;
 }

 .backend_main_detail_new{
    color: #000;
    font-size: 16px;
 }

 .backend_list_section{
    margin: 20px 20px;
}

.backend_main_header{
    width: 100%;
    display: flex;
    align-items: center;
}

.backend_header_text{
    font-size: 24px;
    color: #000;
    font-weight: 500;
    line-height: 30px;
    border-bottom: 3px solid #DB4444;

    width: fit-content;
}

.backend_sub_header{
    margin-top: 40px;
    font-size: 20px;
}

.backend_count_list{
    color: #DB4444;
}

.backend_tool_section{
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
}

.backend_main_content{
    margin-top: 10px;
}

.backend_table_list{
    width: 100%;
}

.backend_table_list th, .backend_table_list td{
    text-align: center;
}

.column_text_left{
    text-align: left !important;
}

.backend_table_list th{
    background-color: #123171;
    color: #fff;
    font-weight: 400;
}

.backend_table_list td{
    padding: 5px 0px;
    border-bottom: 1px solid #ccc;
}

.publish_label{
    font-weight: 500;
    color:#008d00;
}

.unpublish_label{
    font-weight: 500;
    color:#ff0000;
}

.button_add, .button_add:hover{
    color : #fff;
    padding: 5px 10px;
    border: 1px solid #123171;
    background-color: #123171;
    border-radius: 25px;
    margin-left: 20px;
    text-decoration: none;
    cursor: pointer;
}


.button_white, .button_white:hover{
    display: flex;
    align-items: center;
    gap: 10px;
    background-color: #F2F2F2;
    border-radius: 10px;
    font-weight: 400;
    font-size: 14px;
    color: #414651;
    margin: 0;
    border: 1px solid #D5D7DA;


}


.button_back, .button_back:hover{
    color : #123171;
    padding: 5px 10px;
    border: 1px solid #123171;
    background-color: #fff;
    border-radius: 25px;
    margin-left: 20px;
    text-decoration: none;
    cursor: pointer;
}

.button_success, .button_success:hover{
    color : #fff;
    padding: 5px 15px;
    border: 1px solid #008a00;
    background-color: #008a00;
    border-radius: 25px;
    margin-left: 20px;
    text-decoration: none;
    cursor: pointer;
}

.button_danger, .button_danger:hover{
    color : #fff;
    padding: 5px 15px;
    border: 1px solid #8a0000;
    background-color: #8a0000;
    border-radius: 25px;
    margin-left: 20px;
    text-decoration: none;
    cursor: pointer;
}


.backend_table_form{
    width: 80%;
    margin-top: 20px;
}

.form_label{
    width: 200px;
    text-align: left;
    padding-right: 10px;
    border:0px !important
}

.form_field{
    text-align: left;
    padding-left: 10px;
}

.form_label_top{
    padding-top: 40px;
    vertical-align: text-top;
}

.form_header{
    font-weight: 500;
    font-size: 18px;
    padding-bottom: 10px;
}

.form_description{
    margin-top: 5px;
    font-size: 12px;
    color:#000;
    font-weight: 300;
}

.button_add_item{
    font-size: 12px;
    font-weight: 400;

    color : #fff;
    padding: 5px 10px;
    border: 1px solid #123171;
    background-color: #123171;
    border-radius: 25px;
    margin-left: 10px;
    text-decoration: none;
    cursor: pointer;
}

.input_text_medium{
    width: 500px !important;
    background-color: #fff !important;
    height: 41px !important;
    border: 1px solid #b2b2b2 !important;
    border-radius: 10px !important;

}

.input_select_medium{
    width: 500px !important;
    max-width: 500px !important;
    border-radius: 10px !important;
}

.backend_button_section{
    text-align: center;
    margin: 40px 0px;
}

.backend_response_text{
    font-size:24px;
    text-align:center;
    padding-top:50px;
    color:#166d00;
}

.backend_icon_pin::before{
    padding-bottom: 3px;
    padding-left: 3px;
}

.backend_icon_pin{
    color:#DB4444;
}

.link_without_underline{
    text-decoration: none;
}


.input_text_full{
    width: 100%;
    background-color: #fff !important;
    height: 41px !important;
    border: 1px solid #b2b2b2 !important;
    border-radius: 10px !important;

}

.backend_open_time{
    width: 100%;
}

.backend_open_time td,.backend_open_time th{
    width: fit-content;
    padding: 0px 20px;
    text-align: center;
    color: #000;
    border: 0px !important;
}

.input_text_time{
    width: 100px !important;
    text-align: center;
}

.backend_open_time th{
    background-color: #cbcde8;
    color : #000;
    padding: 10px;
}

.input_text_amount{
    width: 100px !important;
    height: 30px !important;
    border-radius: 5px !important;
}

.topic_facilitie{
    font-size: 16px;
    padding-top: 25px !important;
    padding-bottom: 10px !important;
    font-weight: 500;
    color: #000;
}

.backend_header_table_indicator{
    font-size: 16px;
    font-weight: 600;
    margin:10px 0px;
}


.backend_link_svg_icon{
    color: #000 !important;
    margin: 0px 5px;
    font-size: 16px;
}



 .backend_table_list_new{
    width: 100%;
 }

 .backend_table_list_new th, .backend_table_list_new td{
    text-align: center;
    border : 2px solid #e5e7eb;
    padding: 0px 5px;
    color: #000 !important;
}


.backend_table_list_new th{
    background-color: rgb(203 205 232 / var(--tw-bg-opacity, 1));
    color: #000;
    font-size: 16px;
    font-weight: 600;
    padding: 8px 8px;
}

.backend_table_list_new td{
    font-size: 16px;
    padding: 5px 5px;

    font-weight: 500;
}

.backend_table_list_new td{
    border-bottom: 1px solid #ccc;
}

.backend_icon_new{
    font-weight: 900;
    font-size: 18px;
    color: #000;
    cursor: pointer;
}


 .backend_main_button_section{
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
 }

 .backend_main_description_text{
   line-height: 10px !important;
 }

  .backend_main_description_text > ul{
   padding-left: 20px !important;
 }


 .table_facilitie td{
   padding: 0px ;
 }

 .input_select_small{
   width: 150px !important;
 }


   .comment-box {
   display: flex;
   align-items: flex-start;
   }

   .comment-box-section{
      padding: 20px;
      background-color: #f3f4f6;
      border-radius: 12px;
   }
   .user-icon {
   background-color: #6c4df5;
   color: white;
   font-weight: bold;
   width: 40px;
   height: 40px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   margin-right: 15px;
   font-size: 18px;
   }

   .comment_textarea{
      width: 100%;
      height: 100px;
      background-color: #f3f4f6;
   }

   .submit_button_comment{
      text-align: right;
      margin-top: 10px;
   }



.account_profile_data_management{
   width:1250px !important;
}

.button_info{

   width: 100%;

   color : #111827;
   font-weight: 500;
   font-size: 14px;
   font-weight: 600;

   background-color: #f3f4f6;

   padding: 0px 16px;
   border-radius: 10px;
   text-decoration: none;

   cursor: pointer;

   border:1px solid #e4e4e7 !important;
   margin: 5px 0px !important;  
}

.frontend_event_tab_section{
   display: flex;
   margin: 50px 0px;
   justify-content: space-between;
}

.frontend_event_tab{
   width: 50%;
   font-size: 16px;
   color : #6A737D;
   text-align: center;
   border-bottom: 1px solid #ccc;
   cursor: pointer;
}


.frontend_event_tab_active{
   color : #0B243F !important;
   font-weight: 700 !important;
   border-bottom: 2px solid #F00 !important;
}

.stadium-suggest{border:1px solid #e5e7eb;border-top:0;border-radius:0 0 8px 8px;max-height:280px;overflow:auto;padding:0;list-style:none;display:none;margin-top: 0px !important;}
.stadium-suggest li{padding:10px 12px;cursor:pointer;display:flex;justify-content:space-between;gap:8px}
.stadium-suggest li:hover,.stadium-suggest li.active{background:#f1f5f9}
.stadium-suggest .title{font-weight:500;color:#111827}
.stadium-suggest .meta{font-size:12px;color:#6b7280;white-space:nowrap}
.hl{background:#fff3b0}


.frontend_share_icon{
   height: 25px;
   padding-bottom: 3px;
}


.share-popover {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 220px;
    background: #fff;
    border-radius: 8px;
    border: 1px solid rgba(0,0,0,.1);
    box-shadow: 0 4px 12px rgba(0,0,0,.15);
    padding: .4rem 0;
    display: none;
    z-index: 9999;
  }
  .share-popover.open { display: block; }

  .share-popover::before {
    content:"";
    position: absolute;
    top: -6px; right: 20px;
    width: 12px; height: 12px;
    background:#fff;
    border-left:1px solid rgba(0,0,0,.1);
    border-top:1px solid rgba(0,0,0,.1);
    transform: rotate(45deg);
  }

  .share-item {
    display: flex; align-items: center; gap:.5rem;
    padding:.6rem 1rem; width:100%;
    background:transparent; border:0; cursor:pointer;
    font-size:14px; text-align:left;
    margin-bottom: 0px !important;
    color: #0b243f !important;
  }
  .share-item:hover { background:#f7f7f7; }
  .share-item i { font-size:16px; width:20px; text-align:center; }

  .share-toast {
    position: fixed; top: 50%; left: 50%; transform: translateX(-50%);
    background: #111; color:#fff;
    padding:.4rem .8rem; border-radius:6px; font-size:13px;
    opacity:0; transition:opacity .2s ease;
  }
  .share-toast.show { opacity:1; }


  .account_profile_header_page_selector_wrapper a{
   text-decoration: none !important;
  }



.sport_plan_measure_name{
    max-width: 300px; /* adjust as needed */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left !important;
}

.input_text_display_disabled{
    width: 100%;
    padding: 10px;
    border:1px solid #ccc;
    border-radius: 10px;
    background-color: #fff;

    min-height: 35px;
    color: #000 !important;
}

.frontend_count_list_data{
   padding: 5px 5px;
    text-align: right;
    font-size: 14px;
    color: #000000D9;
}


.frontend_comment_input_section{
   width: 100%;
   display: flex;
   background-color: #fff;
   border-radius: 10px;
   padding: 10px;

   margin-top: 20px;
}

.frontend_comment_user_div{
   width: 100%;
   display: flex;
   background-color: #fff;
   border-radius: 10px;
   padding: 10px;
}

.frontend_comment_display_section{
   width: 100%;
   display: flex;
   flex-direction: column;
   background-color: #fff;
   border-radius: 10px;
   padding: 10px;

   margin-top: 20px;
}

.frontend_comment_input_text{
   width: 800px !important;
   border: 0px !important;

   box-shadow: none !important;
   transition: none !important;
}

.frontend_comment_avartar_div{
   margin-right: 10px;
}


.frontend_comment_avartar_img{
   width: 40px;
   height: 40px;
   border-radius: 50%;
   margin-right: 10px;
}

.frontend_comment_button_section{
   display: flex;
   justify-content: flex-end;
   margin-top: 10px;
}

.frontend_comment_user_detail{
   padding: 8px;
   border-radius: 10px;
   background: #F2F2F2;
   margin-left: 10px;
}

.frontend_comment_user_detail_header{
   display: flex;
   gap: 10px;
}

.frontend_comment_user_detail_name{

   color: #0B243F;
   font-size: 14px;
   font-style: normal;
   font-weight: 500;
}

.frontend_comment_user_detail_time{
   color: #B2B2B2;
   font-size: 14px;
   font-style: normal;
   font-weight: 400;
}

.frontend_comment_user_detail_content{
   color: #262626;
   font-size: 16px;
   font-style: normal;
   font-weight: 400;

   margin-top: 10px;
}


.frontend_report_button{
   cursor: pointer;
   width: 800px;
   margin-top: 7px;
}

.frontend_report_reason_input{
   width: 800px;
   border-radius: 10px;
   background: #F2F2F2;

   margin-top: 10px;
}

.frontend_report_content{
   color: #0B243F;
   font-size: 16px;
   font-weight: 400;
   line-height: 24px;
}

.report_topic_label{
   color: #0B243F;
   font-size: 16px;
   font-weight: 400;
   line-height: 24px; 
}

.frontend_satisfaction_assessment_bar_chart_horizontal_wrapper {
    width: 100%;
    height: 270px;
}