html,body
{
    font-family: "Segoe UI";
}
/* my booking */
.content-sidebar.sidebar_vertical_border .content-area
{
    border-right: 0 !important;
}
#dbem-bookings-table * {
    font-family: "Segoe UI";
}
#dbem-bookings-table tr th,
#dbem-bookings-table tr td
{
    border: 0 !important;
    padding: 14px 23px !important;
    color: #686868 !important;
    font-weight: 400;
}
#dbem-bookings-table tr th:not(:first-child),
#dbem-bookings-table tr td:not(:first-child)
{
    text-align: center !important;
}
#dbem-bookings-table tr th
{
    width: 200px;
}
#dbem-bookings-table tr th:first-child
{
    width: 444px;
}
#dbem-bookings-table td a
{
    color: #1E4B75 !important;
}
#dbem-bookings-table td a:hover
{
    color: #111111 !important;
}
.news_li
{
   border-top: 1px solid #ddd;
}
/* pagination */
.em .em-pagination
{
    width: fit-content;
    margin-left: auto;
    margin-right: 0;
}
.em .em-pagination .page-numbers
{
    font-size: 12px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    min-width: 32px;
    margin-right: 4px;
}
.em .em-pagination .page-numbers.current,
.em .em-pagination .page-numbers.current:hover
{
    color: white !important;
    font-size: 12px !important;
    text-decoration: none;
    border: 1px solid #1E4B75;
    background: #1E4B75;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    min-width: 32px;
}
.em .em-pagination .not-current
{
    height: 32px;
}
.em .em-pagination .page-numbers:hover
{
    border: 1px solid #1E4B75;
    color: #1E4B75 !important;
    font-size: 12px !important;
    height: 32px;
}
.em .em-pagination .page-numbers.next,
.em .em-pagination .page-numbers.prev
{
    height: 32px;
    background-size: 32px;
    width: 32px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;    
    font-size: 0 !important;
    margin-right: 4px;
}
.em .em-pagination .page-numbers.next:hover,
.em .em-pagination .page-numbers.next.last:hover,
.em .em-pagination .page-numbers.prev:hover,
.em .em-pagination .page-numbers.prev.first:hover
{
    background-size: 32px;
    border: 1px solid #1E4B75;
}
.em .em-pagination .page-numbers.next.last,
.em .em-pagination .page-numbers.prev.first
{
    height: 32px;
    padding: 0;
}
/* event detail */
.main-container
{
    max-width: 1168px;
    margin: 0 auto;
    padding: 40px 0px 0px 0px;
}
.entry-title.h3
{
    font-size: 25.9px;
    color: #2B2B2B;
    margin-bottom: 0;
    margin-top: 0;
}
.table-title
{
    width: 100%;
    font-size: 20px;
    color: white;
    background: #235787;
    padding: 14px 23px;
}
.two-grid
{
   display: flex;
   gap: 26px;
   
}
.two-grid *
{
    font-family: "Segoe UI";
}
.first-col
{
    flex: 0 0 65%;
    max-width: 65%;
    width: 100%;
}
.second-col
{
    flex: 0 0 33%;
    width: 100%;
    max-width: 33%;
}
.two-grid .table-container
{
    display: flex;
    flex-wrap: wrap;
    
}
.items
{
    font-size: 16px;
    color: #686868;
    background: #FAFAFA;
    padding: 20px;
    width: 79%;
}
.first-item
{
    width: 21%;
    background: #F2F2F2;
}
body:not(.fl-builder-edit) button:not(.menu-mobile-toggle, .components-button, .customize-partial-edit-shortcut-button).register-btn
{
    margin-top: 26px;
    background: #235787;
    border: 1px solid #235787;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 9px 20px;
    color: white;
    margin-left: auto;
    cursor: pointer;
    line-height: 2.5;
    font-weight: 700;
}
body:not(.fl-builder-edit) button:not(.menu-mobile-toggle, .components-button, .customize-partial-edit-shortcut-button).register-btn:hover ,
.reg-btn:hover,
.cancel-btn:hover,
.ok-btn:hover
{
    background: #1D476F;
    color: white;
}
.register-confirm-box,
.successful-box
{
    position: fixed;
    background: rgba(0,0,0,0.7);
    display: none;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}
.reg-confirm-container
{
    max-width: 440px;
    width: 100%;
    padding: 40px;
    margin: 0 auto;
    background: white;
    text-align: center;
    position: relative;
}
.reg-confirm-container h3{
    font-size: 24px;
    color: #2B2B2B;
    text-align: center;
    margin-bottom: 23px;
    font-weight: 700;
}

.reg-confirm-container p{
    font-size: 14.4px;
    color: #686868;
    text-align: center;
    margin-bottom: 32px;
}
.btn-container-box
{
    display:flex;
}
.btn-container-box button
{
    flex: 0 0 calc(50% - 6px);
    max-width: calc(50% - 6px);
    width: 100%;
}
.close-btn 
{
    position: absolute;
    top: 20px;
    right: 20px;
    background: transparent;
    border: 0;
    width: 24px;
    height: 24px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.cancel-btn,
.reg-btn,
.ok-btn
{
    background: transparent;
    border: 1px solid #235787 !important;
    height: 50px;
    color: #235787 !important;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
}
.cancel-btn
{
    margin-right: 6px;
    background-color: transparent !important;
}
.reg-btn
{
    background: #235787;
    color: white;
    margin-left: 6px;
}
.ok-btn
{
    background: #235787;
    color: white;
    width: 100%;
}
body:not(.fl-builder-edit) button:not(.menu-mobile-toggle, .components-button, .customize-partial-edit-shortcut-button).register-btn.registered
{
    background: #C0C0C0;
    border-color: #C0C0C0;
}
.link-text
{
    color: #686868;
    font-size: 16px;
    font-weight: 600;
    margin-top: 12px;
    text-align: right;
}
.link-text a
{
    color: #235787;
    text-decoration: none;
}
.second-col img
{
    width: 100%;
    object-fit: cover;
}
/* mobile menu */
.header-menu-sidebar-inner,
#header-menu-sidebar-bg:before
{
    background: white !important;
}
/* ----------------- */
/* 31.7.2024 */
/* table tbody tr:not(:last-child) td:first-child, */
#annual-report .inner-wrap table tbody tr:not(:last-child) td:first-child
{
    color: #1E4B75;
}
.event-categories-welfare-activities .first-item
{
    font-weight: 600;
}
body:not(.fl-builder-edit) button:not(.menu-mobile-toggle, .components-button, .customize-partial-edit-shortcut-button).register-btn
{
    height: 50px;
}
#annual-report .print-section,
#annual-report .print-section button.print-btn
{
    display: flex;
    align-items: center;
    justify-content: center;
}
#annual-report .blue-title
{
    font-size: 20px;
    height: 55px;
    display: flex;
    align-items: center;
}
.inner-wrap table th
{
    font-weight: 400;
}
.inner-wrap table tr:last-child td
{
    background: white;
}
#annual-report button.add-new-btn
{
    display: flex;
    border-radius: 4px;
    border: 1px solid #DDD;
    background: #FFF;
    color: #444;
    font-family: "Segoe UI";
    font-size: 14.4px;
    font-style: normal;
    font-weight: 400;
    line-height: 23.3px;
}
#annual-report button.add-new-btn:hover
{
    background: #444;
    color: #fff;
}
#annual-report .calendar-list input
{
    box-shadow: none;
}
#annual-report .calendar-list input::placeholder
{
    color: #DDD;
    font-family: "Segoe UI";
    font-size: 14.4px;
    font-style: normal;
    font-weight: 400;
    line-height: 23.3px; /* 161.806% */
}
#user-report-modal button.close-btn,
#user-report-modal button.close-btn:hover,
button.close-btn,
button.close-btn:hover,
.reg-confirm-container button.close-btn
{
    background: transparent !important;
    width: 24px !important;
    padding: 0 !important;
    height: 24px !important;
    line-height: 1 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    box-shadow: none !important;
}
.reg-confirm-container button.close-btn:hover,
#annual-report .edit-button:hover,
#annual-report .delete-button:hover,
#annual-report .upload-button:hover
{
    box-shadow: none !important;
}
#user-report-modal .acf-fields > .acf-field
{
    padding-left: 0;
    padding-right: 0;
    border: 0;
}
#user-report-modal .acf-field .acf-label
{
    /* margin: 0 6px 0 0; */
    margin: 0;
}
#user-report-modal .acf-field .acf-label label
{
    margin: 0;
    margin-bottom: 6px;
}
#user-report-modal .acf-fields > .acf-field:first-child
{
    padding-top: 0;
    padding-bottom: 0;
}

#user-report-modal .acf-field.acf-field-radio
{
    padding-bottom: 0;
}
#user-report-modal .acf-field.acf-field-date-picker
{
    width: 146px !important;
    padding-top: 6px;
    padding-bottom: 0;
    min-height: 50px !important;
}
#user-report-modal .acf-field:nth-child(4)
{
    margin-left: 30px;
}
#user-report-modal .acf-field:nth-child(4)::before
{
    content: "-";
    display: block;
    width: 5px;
    height: 1px;
    position: absolute;
    left: -17px;
    top: 30%;
    font-size: 12px;
}
ul.acf-radio-list
{
    border: 0px !important;
    padding: 0px !important;
}
#user-report-modal .acf-input-wrap input
{
    height: 41px;
    box-shadow: none;
}
#user-report-modal .acf-form-submit
{
    padding-top: 16px;
}
ul.acf-radio-list:focus-within, ul.acf-checkbox-list:focus-within
{
    border: none !important;
}
#user-report-modal .acf-form-submit button
{
    width: 118px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
ul.acf-radio-list li label
{
    position: relative;
    padding-left: 2px;
    cursor: pointer;
}
ul.acf-radio-list li input[type=radio]
{
    opacity: 0;
    visibility: hidden;
} 
ul.acf-radio-list li label::before
{
    content: "";
    width: 16px;
    height: 16px;
    border: 1px solid #235787;
    display: block;
    border-radius: 50%;
    position: absolute;
    top: 60%;
    left: 6px;
    transform: translate(-50%, -50%);
    background: #fff;
}
ul.acf-radio-list li label::after
{
    content: "";
    display: block;
    position: absolute;
    top: 60%;
    left: 6px;
    width: 12px;
    height: 12px;
    background: #235787;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    padding: 0;
    opacity: 0;
    transition: all 0.3s;
}
ul.acf-radio-list li label.selected::after
{
    opacity: 1;
}
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next,
.acf-ui-datepicker .ui-datepicker .ui-widget-header a
{
    top: 50% !important;
    transform: translateY(-50%);
}
.ui-datepicker .ui-datepicker-prev span.ui-icon,
.ui-datepicker .ui-datepicker-next span.ui-icon
{
    background-image: url("https://devwp.visibleone.io/hkraliveclone/wp-content/plugins/advanced-custom-fields-pro/assets/inc/datepicker/images/ui-icons_ffffff_256x240.png");
}
.acf-ui-datepicker .ui-widget,
.acf-ui-datepicker .ui-widget input,
.acf-ui-datepicker .ui-widget select,
.acf-ui-datepicker .ui-widget textarea, 
.acf-ui-datepicker .ui-widget button
{
    font-family: Arial,Helvetica,sans-serif !important;
    font-size: 1em !important;
}
.acf-ui-datepicker .ui-widget-content
{
    color: #333333 !important;
}
.acf-ui-datepicker .ui-widget-header
{
    background: #e9e9e9 !important;
}
.acf-ui-datepicker .ui-state-default, .acf-ui-datepicker .ui-widget-content .ui-state-default, .acf-ui-datepicker .ui-widget-header .ui-state-default
{
    border: 1px solid #c5c5c5 !important;
    background: #f6f6f6 !important;
    font-weight: normal !important;
    color: #454545 !important;
    font-family: Arial,Helvetica,sans-serif !important;
}
.acf-ui-datepicker .ui-state-hover,
 .acf-ui-datepicker .ui-widget-content .ui-state-hover, .acf-ui-datepicker .ui-widget-header .ui-state-hover, .acf-ui-datepicker .ui-state-focus, .acf-ui-datepicker .ui-widget-content .ui-state-focus, .acf-ui-datepicker .ui-widget-header .ui-state-focus
{
    border: 1px solid #cccccc !important;
    background: #ededed !important;
    font-weight: normal !important;
    color: #2b2b2b !important;
}
.acf-ui-datepicker .ui-state-active, .acf-ui-datepicker .ui-widget-content .ui-state-active, .acf-ui-datepicker .ui-widget-header .ui-state-active
{
    border: 1px solid #003eff !important;
    background: #007fff !important;
    font-weight: normal !important;
    color: #ffffff !important;
}
.acf-ui-datepicker .ui-state-highlight.ui-state-highlight,
.acf-ui-datepicker .ui-widget-content .ui-state-highlight.ui-state-highlight,
.acf-ui-datepicker .ui-widget-header .ui-state-highlight.ui-state-highlight
{
    border: 1px solid #dad55e !important;
    background: #fffa90 !important;
    color: #777620 !important;
}
/* -------------- */
/* datepicker style */
.ui-datepicker .ui-datepicker-title
{
    margin: 0 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* ------------------ */
@media screen and (max-width: 1025px)
{
    /* .table-title
    {
        width: 93%;
    }
    .items:not(.first-item)
    {
        width: 66%;
    } */
    .second-col
    {
        flex: 0 0 32%;
        width: 100%;
        max-width: 32%;
    }
}
@media screen and (max-width: 835px)
{
    /* .items:not(.first-item) {
        width: 63.1%;
    } */
    /* all event */
    
    .em.em-calendar.size-small .em-cal-nav .em-calnav svg
    {
        height: 10px;
        width: 10px;
    }
    .em.em-calendar.size-small .em-cal-body .em-cal-day .em-cal-day-date.em-cal-day-date a, .em.em-calendar.size-small .em-cal-body .em-cal-day .em-cal-day-date.em-cal-day-date span
    {
        padding: 0;
        width: 20px;
        height: 20px;
        font-size: 15px;
        line-height: 1.2;
    }
    /* ------------ */
    /* mobile menu */
    .header-search_box-item .header-search-form button.search-submit
    {
        display: flex;
        align-items: center;
        justify-content: center;
    }
    /* -------------- */
}
@media screen and (max-width: 835px) and (min-width: 769px)
{
    .content-sidebar.sidebar_vertical_border .sidebar-primary-inner,
    #sidebar-primary
    {
        padding-left: 0 !important;
    }
}
@media screen and (max-width: 769px)
{
    .two-grid
    {
        flex-wrap: wrap;
        gap: 0;
        width: 100%;
    }
    .first-col,
    .second-col
    {
        flex: 0 0 100%;
        max-width: 100%;
        width: 100%;
    }
    .table-container,
    .first-item,
    .table-title,
    .items:not(.first-item)
    {
        width: 100%;
    }
    .second-col
    {
        margin-top: 20px;
    }
    body:not(.fl-builder-edit) button:not(.menu-mobile-toggle, .components-button, .customize-partial-edit-shortcut-button).register-btn
    {
        width: 100%;
    }
    /*  all event */
    .content-sidebar.sidebar_vertical_border .content-inner
    {
        padding-right: 0 !important;
    }
    /* ------- */
}
@media screen and (max-width: 541px)
{
    .reg-confirm-container
    {
        max-width: 70%;
        padding: 20px;
    }
    .close-btn
    {
        top: 10px;
        right: 10px;
    }
}
@media screen and (max-width: 481px)
{
    .btn-container-box button
    {
        font-size: 14px;
    }
    /* all event */
    .em .em-pagination
    {
        margin-right: auto;
    }
    /* ------------ */
}

.spinner-container {
  height: 32px;
}

.spinner {
--size: 32px;
  width: var(--size);
  height: var(--size);
  border: 4px solid var(--border-color, #000);
  border-bottom-color: transparent;
  border-radius: 50%;
  display: inline-block;
  box-sizing: border-box;
  animation: rotation 1s linear infinite;
  cursor: pointer;
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.annual-report-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

td:empty::before {
  content: '-';
  visibility: hidden;
}

.inverted-btn {
    background: transparent !important;
    color: #235787 !important;
    border: 1px solid currentColor !important;
    &:hover {
        background: #235787 !important;
        color: white !important;
    }
}

.report-file {
    display: flex;
    align-items: center;
    gap: 5px;

    &:hover a {
        opacity: 1;
    }
    a {
        transition: opacity 300ms;
        opacity: 0;
        margin-left: 5px;
        text-decoration: underline !important;
        color: red !important;
    }
}

.placeholder {
    border: 1px dashed #7D9196;
    text-align: center;
    position: relative;
    padding: 50px;
}

.file-input.invalid .placeholder {
    background: #BD35001A;
    border-color: #BD3500;
}

.warning {
    display: none;
    margin-top: 4px;
}

.file-input.invalid {
    .warning {
        display: flex;
    }
}