@font-face {
    font-family: Prompt;
    src: url('../fonts/Prompt-Regular.ttf') format('truetype');
}
@font-face {
    font-family: KanitLight;
    src: url('../fonts/Kanit%20Light.ttf') format('truetype');
}

* {
    font-family: KanitLight, Kanit, Prompt, thaisanslite_r1, sans-serif;
}

.text-white {
    --ct-text-opacity: 1;
    color: #fff !important;
}

.buttonList input[type="radio"], input[type=checkbox] {
    width: auto;
    margin-bottom: 15px;
}

.buttonList label {
    display: inline;
    margin-left: 12px;
    font-weight: 400;
}

.photo-gallery {
    margin-top: 10px;
}

    .photo-gallery img {
        border: 2px solid #ddd;
        transition: border-color 0.3s ease;
    }

        .photo-gallery img:hover {
            border-color: #337ab7;
        }

.work-history-panel {
    margin-bottom: 15px;
    border-left: 4px solid #337ab7;
}

.status-label {
    font-size: 11px;
    padding: 4px 8px;
}

.status-badge {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 10px;
    font-size: 10px;
    color: #fff;
    line-height: 1.2;
}

.status-pending {
    background: #9e9e9e;
}

.status-approved {
    background: #43a047;
}

.status-rejected {
    background: #e53935;
}

.status-submitted {
    background: #1976d2;
}

/* ######### ajax calendar ######### */
.calendar-badge-month-now {
    display: inline-block;
    position: absolute;
    top: 3px;
    background: #0091d9;
    font-size: 10px;
    right: 3px;
    color: #fff;
    font-weight: 700;
    padding: 0 3px;
    text-align: center;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
}

.calendar-badge-month-other {
    display: inline-block;
    position: absolute;
    top: 3px;
    background: #CCC;
    font-size: 10px;
    right: 3px;
    color: #CCC;
    font-weight: 700;
    padding: 0 3px;
    text-align: center;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
}

/* Override global KanitLight metrics � fixed calendar cell heights clip its glyphs */
.calendarExtender,
.calendarExtender .ajax__calendar_container,
.calendarExtender .ajax__calendar_container * {
    font-family: Prompt, "Segoe UI", Tahoma, sans-serif !important;
    line-height: 1.2 !important;
}

.calendarExtender .ajax__calendar_container {
    /*The outer rectangular container that supplies the border around the calendar element. Child Css classes: .ajax__calendar_header,.ajax__calendar_body,.ajax__calendar_footer.*/
    border: 1px solid #CCC;
    display: inline-block;
    position: relative;
    padding: 1px;
    cursor: default;
    width: 210px;
    font-size: 13px !important;
    color: #333 !important;
    background-color: #ffffff;
    z-index: 99999 !important;
    -webkit-box-shadow: 0 5px 5px 1px rgba(0,0,0,0.2);
    box-shadow: 0 5px 5px 1px rgba(0,0,0,0.2);
}

.ajax__calendar_container TABLE {
    font-size: 13px !important;
    border-spacing: 2px;
    border-color: gray;
}

.calendarExtender .ajax__calendar_container TD {
    font-size: 13px !important;
    border-bottom: 1px solid #eee;
    border-right: 1px solid #eee;
    padding: 0 !important;
    margin: 0 !important;
    vertical-align: middle;
}

.calendarExtender .ajax__calendar_header {
    /*: A container element that holds the next and previous arrows and the title of the current view. Child Css classes: .ajax__calendar_prev, .ajax__calendar_title, .ajax__calendar_next.*/
    background: #64bed8;
    border-bottom-color: #5994a5;
    color: #fff !important;
    height: 30px;
    padding-top: 5px;
}

.calendarExtender .ajax__calendar_prev {
    /*: An element that displays the arrow to view the previous set of data in the view(previous month/year/decade). Child Css classes: none.*/
    border-color: #5994a5;
}

.calendarExtender .ajax__calendar_title {
    /*: An element that displays the title of the current view (month name, year, decade). Child Css classes: none.*/
    color: #fff !important;
}

.calendarExtender .ajax__calendar_next {
    /*: An element that displays the arrow to view the previous set of data in the view (previous month/year/decade). Child Css classes: none.*/
    border-color: #5994a5;
}

.calendarExtender .ajax__calendar_body {
    /*: A container element that holds the days, months, and years panes. Also provides a fixed rectangle with hidden overflow that is used for transitioning between views (next/previous month, or days/months/years).Child Css class: .ajax__calendar_days, .ajax__calendar_months, .ajax__calendar_years.*/
    height: 185px;
    width: 100%;
}

.calendarExtender .ajax__calendar_days {
    /* : A container element that holds the layout for the days in a month. Child Css classes: .ajax__calendar_dayname, .ajax__calendar_day*/
    height: 165px;
    width: 100%;
}

.calendarExtender .ajax__calendar_dayname {
    /* : An element that displays the short name of the day of the week. Child Css classes: none.*/
    height: 21px;
    width: 100%;
    background: #66a9bd;
    color: #fff !important;
    border: 1PX solid #66a9bd;
    text-align: center;
}

.calendarExtender .ajax__calendar_day {
    /* : An element that displays the day of the month. Child Css classes: none*/
    padding-top: 3px;
    height: 25px;
    width: 29px;
    text-align: center;
    color: #333 !important;
}

.calendarExtender .ajax__calendar_months {
    /* : A container element that holds the layout for the months in a year. Child Css classes: .ajax__calendar_month.*/
}

.calendarExtender .ajax__calendar_month {
    /* : An element that displays the month of the year. Child Css classes: none*/
    color: #333 !important;
}

.calendarExtender .ajax__calendar_years {
    /*: A container element that holds the layout for the years in a decade. Child Css classes: .ajax__calendar_year.*/
}

.calendarExtender .ajax__calendar_year {
    /* : An element that displays the year in a decade. Child Css classes: none*/
    color: #333 !important;
}

.calendarExtender .ajax__calendar_footer {
    /* : A container element that holds the current date. Child Css classes: .ajax__calendar_today.*/
    height: 25px;
    color: #333 !important;
}

.calendarExtender .ajax__calendar_today {
    /* : An element that displays the current date. Child Css classes: none.*/
    padding-top: 0px;
    color: #333 !important;
}

.calendarExtender .ajax__calendar_hover {
    /* : This is applied to an element in the DOM above a day, month or year and is used to apply CSS attributes that show a hover state. Child Css classes: .ajax__calendar_day, .ajax__calendar_month, .ajax__calendar_year*/
}

.calendarExtender .ajax__calendar_active {
    /* : This is applied to an element in the DOM above a day, month or year and is used to apply CSS attributes that show the currently selected value. Child Css classes: .ajax__calendar_day, .ajax__calendar_month, .ajax__calendar_year.*/
    background: #64bed8;
    color: #fff !important;
}

.calendarExtender .ajax__calendar_active .ajax__calendar_day,
.calendarExtender .ajax__calendar_active .ajax__calendar_month,
.calendarExtender .ajax__calendar_active .ajax__calendar_year {
    color: #fff !important;
}

.calendarExtender .ajax__calendar_other {
    /* : This is applied to an element in the DOM above a day or year that is outside of the current view (day not in the visible month, year not in the visible decade). Child Css classes: .ajax__calendar_day, .ajax__calendar_year.*/
    color: #bbb;
}

.calendarExtender .ajax__calendar_other .ajax__calendar_day,
.calendarExtender .ajax__calendar_other .ajax__calendar_year {
    color: #bbb !important;
}

/* ######### end ajax calendar ######### */