@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_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_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_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: 140px;
   height: 75px;
   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(3); /* Zoom factor */
   z-index: 10;
   position: relative;
}

.zoomed_small {
   transform: scale(2); /* Zoom factor */
   z-index: 10;
   position: relative;
}

.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;
}