@font-face {
    font-family: 'Backcountry';
    src: url('../../../fonts/Backcountry-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

.content-header {
    padding: 15px 0.5rem 0px 0.5rem;
    border-bottom: 1px solid #000;
    margin-bottom: 10px;
}
.vs--searchable .vs__dropdown-toggle{ height: 38px;}
table.pretty {
    width: 100%;
}
.close{
    color: #fff;
    opacity: 1 !important;
    padding-left: 17px !important;
    margin-top: -3px;
}
.alert {
    right: 0;
    position: absolute;
    z-index: 99;
}
.btn-outline-light{
    border: 1px solid #dadada;
}
.navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover{
    color: #EBA24D !important;
}
.card-header{background-color: #eee !important;}
.list-group-item.active{
    background-color: inherit !important;
    color: #EBA24D !important;
}
.main-header .dropdown-menu .svg-inline--fa{
    vertical-align: 2px !important;
    height: 8px !important;
}
.dropdown-menu-right{margin-top: 8px;}
.content-wrapper>.content{padding: 0px 30px !important;}
.dropdown-menu.border-0.shadow{margin-top: 10px;}
.topbar{
    background: #3e3c87;
}
.navbar-light .navbar-nav .nav-link{
    color: #fff;
}
table.pretty th, table.pretty td {
    border: 1px solid gainsboro;
    padding: 0.2em;
}

table.pretty caption {
    font-style: italic;
    font-weight: bold;
    margin-left: inherit;
    margin-right: inherit;
}

table.pretty thead tr th {
    border-bottom: 2px solid;
    font-weight: bold;
    text-align: center;
}

table.pretty thead tr th.empty {
    border: 0 none;
}

table.pretty tfoot tr th {
    border-bottom: 2px solid;
    border-top: 2px solid;
    font-weight: bold;
    text-align: center;
}

table.pretty tbody tr th {
    text-align: center;
}

table.pretty tbody tr td {
    border-top: 1px solid;
    text-align: center;
}

table.pretty tbody tr.odd td {
    background: none repeat scroll 0 0 #EBF4FB;
}

table.pretty tbody tr.even td {
    background: none repeat scroll 0 0 #BCEEEE;
}

table.pretty thead tr th.highlightcol {
    border-color: #2E6E9E #2E6E9E gainsboro;
    border-style: solid;
    border-width: 2px 2px 1px;
}

table.pretty tfoot tr th.highlightcol {
    border-left: 2px solid #2E6E9E;
    border-right: 2px solid #2E6E9E;
}

table.pretty thead tr th.lefthighlightcol, table.pretty tbody tr td.lefthighlightcol, table.pretty tfoot tr th.lefthighlightcol {
    border-left: 2px solid #2E6E9E;
}

table.pretty thead tr th.righthighlightcol, table.pretty tbody tr td.righthighlightcol, table.pretty tfoot tr th.righthighlightcol {
    border-right: 2px solid #2E6E9E;
}

table.pretty thead tr th.lefthighlightcolheader, table.pretty tbody tr td.lefthighlightcolheader, table.pretty tfoot tr th.lefthighlightcolheader {
    border-left: 2px solid #2E6E9E;
}

table.pretty thead tr th.righthighlightcolheader, table.pretty tbody tr td.righthighlightcolheader, table.pretty tfoot tr th.righthighlightcolheader {
    border-right: 2px solid #2E6E9E;
}

.strikethrough {
    text-decoration: line-through;
    color: red;
}

.month, .year {
    margin: 2px;
}

caption, th {
    text-align: left;
}
.form-control{padding: 5px !important;}
.table td, .table th{ padding: 5px !important;}
.card-body{padding: 5px;}
.font-11{
    font-size: 11px;
}

.style-0 {
    empty-cells: show;
    table-layout: fixed;
    width: 1315pt
}

.style-1 {
    color: white;
    padding-left: 10pt;
    font-size: 14pt;
    font-family: "Arial";
    font-weight: bold;
    font-style: normal;
    text-decoration: none;
    text-align: left;
    word-spacing: 0pt;
    letter-spacing: 0pt;
    background-color: #339933
}


.opacity-75 {
    opacity: 0.75;
    filter: alpha(opacity=75);
}
.opacity-50 {
    opacity: 0.5;
    filter: alpha(opacity=50);
}
.opacity-25 {
    opacity: 0.25;
    filter: alpha(opacity=25);
}
.opacity-0 {
    opacity: 0;
    filter: alpha(opacity=0);
}
.no-edge-top {
    top: 0;
}
.no-edge-bottom {
    bottom: 0;
}
.no-edge-left {
    left: 0;
}
.no-edge-right {
    right: 0;
}
.user_name{
    font-size:14px;
    font-weight: bold;
}
.comments-list .media{
    border-bottom: 1px dotted #ccc;
}


/* Wrapper center */
.dataTables_paginate {
    margin-top: 15px;
    text-align: center;
}

/* Pagination container */
.dataTables_paginate .pagination {
    justify-content: center;
    gap: 6px;
}

/* Page buttons */
.dataTables_paginate .page-item .page-link {
    border-radius: 10px;
    border: none;
    padding: 8px 14px;
    color: #555;
    background: #f1f3f5;
    transition: all 0.2s ease-in-out;
    font-weight: 500;
}

/* Hover effect */
.dataTables_paginate .page-item .page-link:hover {
    background: #783C09;
    color: #fff;
}

/* Active page */
.dataTables_paginate .page-item.active .page-link {
    background: #783C09;
    color: #fff;
    box-shadow: 0 3px 8px rgba(120,60,10,0.3);
}

/* Disabled */
.dataTables_paginate .page-item.disabled .page-link {
    background: #e9ecef;
    color: #aaa;
    cursor: not-allowed;
}

/* Previous / Next special */
.dataTables_paginate .page-item.previous .page-link,
.dataTables_paginate .page-item.next .page-link {
    font-weight: 600;
    border-radius: 20px;
}
div.dataTables_wrapper div.dataTables_length select{
    width: 55px !important;
}
.layout-fixed .main-sidebar{
    background-color: #783C09;
}

.sidebar-menu .nav-link.active{
    background-color: #783C09;
    color: #fff !important;
    font-weight: bold;
}
.sidebar-menu .nav-link {
    color: #333;
    padding: 6px 12px;
    display: block;
    border-radius: 4px;
    transition: background 0.2s ease;
}

.sidebar-menu .nav-link:hover {
    background-color: #eac888;
    text-decoration: none;
}
/* ==========================================================================
   Main sidebar menu (themes/adminlte/views/menu/admin.blade.php)

   · every main item has its icon in a rounded tile, and every label uses the
     same font and size, so the column reads as one list;
   · an open menu is a soft highlighted pill with a down arrow;
   · its sub items hang off a dashed guide line, each marked with a dot
     instead of a second set of icons;
   · the page you are on gets a cream tile / dot and white bold text.
   ========================================================================== */

.main-sidebar .nav-sidebar {
    font-family: "Siemreap", "Source Sans Pro", -apple-system, "Segoe UI", sans-serif;
}

.main-sidebar .nav-sidebar .nav-item {
    margin: 0;
}

.main-sidebar .nav-sidebar .nav-link {
    display: flex;
    align-items: flex-start;
    min-height: 38px;
    margin-bottom: 2px;
    padding: .4rem .6rem;
    border-radius: 12px;
    background: transparent;
    color: rgba(255, 245, 230, .9) !important;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.3;
    box-shadow: none !important;
    transition: background-color .15s ease, color .15s ease;
}

/* Labels wrap instead of being cut off, and get enough line box for the tall
   Khmer marks above and below the letters (otherwise they clip). */
.main-sidebar .nav-sidebar .nav-link p {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    padding: .15rem 0;
    font-size: 15px;
    line-height: 1.65;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: break-word;
}

/* icon tile */
.main-sidebar .nav-sidebar > .nav-item > .nav-link .nav-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin: .15rem .7rem 0 0;
    border-radius: 6px;
    background: rgba(255, 255, 255, .1);
    color: rgba(255, 245, 230, .92);
    font-size: 10px !important;
    transition: background-color .15s ease, color .15s ease;
}

/* expand arrow on menus that have sub items: a small chevron pinned to the right
   edge of the row (outside the label, so a long label can never clip it), pointing
   left when closed and down when open */
.main-sidebar .nav-sidebar .nav-item.has-treeview > .nav-link {
    position: relative;
    padding-right: 2rem;
}

.main-sidebar .nav-sidebar .nav-link p .right,
.main-sidebar .nav-sidebar .nav-link .pull-right-container .fa-angle-left {
    position: absolute;
    top: 50%;
    right: .8rem;
    display: inline-block;
    margin: 0;
    padding: 0;
    font-size: 11px;
    font-weight: 900;
    line-height: 1;
    color: rgba(255, 245, 230, .75);
    opacity: 1;
    transform: translateY(-50%);
    transition: transform .2s ease, color .15s ease;
}

.main-sidebar .nav-sidebar .menu-open > .nav-link p .right,
.main-sidebar .nav-sidebar .menu-open > .nav-link .pull-right-container .fa-angle-left {
    transform: translateY(-50%) rotate(-90deg);
    color: #fff;
}

.main-sidebar .nav-sidebar .nav-link:hover p .right,
.main-sidebar .nav-sidebar .nav-link:hover .pull-right-container .fa-angle-left {
    color: #fff;
}

/* hover */
.main-sidebar .nav-sidebar .nav-link:hover {
    background: rgba(255, 255, 255, .08);
    color: #fff !important;
}

/* open menu */
.main-sidebar .nav-sidebar > .nav-item.menu-open > .nav-link,
.main-sidebar .nav-sidebar > .nav-item.has-treeview > .nav-link.active {
    background: rgba(255, 255, 255, .13) !important;
    color: #fff !important;
    font-weight: 600;
}

/* sub items: dashed guide line, a dot per item */
.main-sidebar .nav-sidebar .nav-treeview {
    margin: 0 0 6px 1.3rem;
    padding: 2px 0 2px .6rem !important;
    border-left: 1px dashed rgba(255, 245, 230, .3);
    background: transparent;
}

.main-sidebar .nav-sidebar .nav-treeview > .nav-item {
    margin: 0 !important;
    padding: 0 !important;
}

.main-sidebar .nav-sidebar .nav-treeview .nav-link {
    min-height: 40px;
    margin-bottom: 2px;
    padding: .35rem .6rem;
    border-radius: 10px;
    font-weight: 400;
}

.main-sidebar .nav-sidebar .nav-treeview .nav-link .nav-icon {
    display: none;
}

/* sub-menu names: a little smaller, still allowed to wrap in full */
.main-sidebar .nav-sidebar .nav-treeview .nav-link p {
    font-size: 14px;
    line-height: 1.7;
}

/* wider expanded sidebar on desktop so long menu names fit on one line */
@media (min-width: 992px) {
    body:not(.sidebar-collapse) .main-sidebar,
    body:not(.sidebar-collapse) .main-sidebar::before {
        width: 280px;
    }

    body:not(.sidebar-collapse) .content-wrapper,
    body:not(.sidebar-collapse) .main-header,
    body:not(.sidebar-collapse) .main-footer {
        margin-left: 280px;
    }

    .sidebar-mini.sidebar-collapse .main-sidebar:hover,
    .sidebar-mini.sidebar-collapse .main-sidebar.sidebar-focused {
        width: 280px;
    }
}

.main-sidebar .nav-sidebar .nav-treeview .nav-link::before {
    content: "";
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    margin: .4rem .9rem 0 0;
    border-radius: 50%;
    background: rgba(255, 245, 230, .45);
    transition: background-color .15s ease, box-shadow .15s ease;
}

.main-sidebar .nav-sidebar .nav-treeview .nav-link:hover::before {
    background: #fff;
}

/* the page you are on */
.main-sidebar .nav-sidebar > .nav-item:not(.has-treeview) > .nav-link.active {
    background: rgba(255, 255, 255, .13) !important;
    color: #fff !important;
    font-weight: 600;
}

.main-sidebar .nav-sidebar > .nav-item > .nav-link.active .nav-icon,
.main-sidebar .nav-sidebar > .nav-item.menu-open > .nav-link .nav-icon {
    background: #f4d9a8;
    color: #783C09;
}

.main-sidebar .nav-sidebar .nav-treeview .nav-link.active {
    background: rgba(255, 255, 255, .1) !important;
    color: #fff !important;
    font-weight: 600;
}

.main-sidebar .nav-sidebar .nav-treeview .nav-link.active::before {
    background: #f4d9a8;
    box-shadow: 0 0 0 3px rgba(244, 217, 168, .25);
}

/* collapsed (icon-only) sidebar: just the centred tiles */
.sidebar-mini.sidebar-collapse .main-sidebar:not(:hover) .nav-sidebar .nav-item.has-treeview > .nav-link {
    padding-right: 0;
}

.sidebar-mini.sidebar-collapse .main-sidebar:not(:hover) .nav-sidebar .nav-link {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
}

.sidebar-mini.sidebar-collapse .main-sidebar:not(:hover) .nav-sidebar .nav-link .nav-icon {
    margin-right: 0;
}

.sidebar-mini.sidebar-collapse .main-sidebar:not(:hover) .nav-sidebar .nav-link p,
.sidebar-mini.sidebar-collapse .main-sidebar:not(:hover) .nav-sidebar .nav-treeview {
    display: none !important;
}

/* AdminLTE also sets collapsed labels to width:0. Left at 0, each Khmer name
   wraps into a tall one-character column, which stretched its row and opened the
   big blank gaps between menu items once the sidebar was expanded on hover. */
.sidebar-mini.sidebar-collapse .main-sidebar .nav-sidebar .nav-link p {
    width: auto !important;
}

/* ==========================================================================
   Date inputs — DD/MM/YYYY display (see themes/adminlte/js/custom.js)

   The visible field is a flatpickr alternate input sitting in front of a real
   <input type="date">. Because it is a separate element it does not inherit
   .form-control or the native disabled/readonly state, which is why it is
   restyled here rather than left to the browser.
   ========================================================================== */

/* Bootstrap dims a disabled control's text; the alternate input keeps its own
   colour, so match the disabled background explicitly. */
.dmy-date-alt {
    cursor: pointer;
}

/* Cannot be edited until a fee item is chosen. Styled to match
   .form-control:disabled elsewhere in the app so a locked field is obvious
   instead of looking like a live one that silently ignores input. */
.dmy-date-alt--disabled,
.dmy-date-alt[disabled] {
    background-color: #e9ecef;
    color: #6c757d;
    cursor: not-allowed;
    opacity: 1;
}

/* Editable but fixed — shown with the same muted treatment as the app's
   readonly inputs. */
.dmy-date-alt--readonly,
.dmy-date-alt[readonly] {
    background-color: #e9ecef;
    cursor: default;
}

/* Keep the field visually flush with the other inputs in the row. */
.dmy-date-alt.form-control {
    height: auto;
}

/* ==========================================================================
   vue-select — vertical centring of the selected name

   Forms render the search slot with Bootstrap's .form-control on the input:

       <template #search="{attributes, events}">
           <input class="vs__search form-control" v-bind="attributes" v-on="events" />
       </template>

   AdminLTE's .form-control sets `height: calc(2.25rem + 2px)` — a height sized
   for a standalone field. vue-select sizes that input itself (flex-grow, a 0
   width so the placeholder stays visible, its own padding and top margin) and
   never declares a height, so the fixed height survives and makes the input
   taller than the chosen name beside it. The name then rides high and the
   clear button and caret sit out of line.

   Only `height` is touched. Padding, margin, width and font are left to
   vue-select, which sets them itself and loads after this file.
   ========================================================================== */

.v-select .vs__search.form-control {
    height: auto;
}

/* The container holding the chosen name is a flex row that never opted into
   vertical centring, so the name aligned to the top of the taller input above.
   (.vs__actions already centres itself; this is the other half.) */
.v-select .vs__selected-options {
    align-items: center;
}

/* A single select has exactly one label, but vue-select still gives it the
   4px top margin it uses for tag spacing in a multi-select, which drops the
   name below the centre of the box. Multi-selects keep their tag spacing. */
.v-select.vs--single .vs__selected,
.v-select.vs--single .vs__search {
    margin-top: 0;
}

/* The two boxes holding the clear button and the arrow are padded
   asymmetrically out of the box — .vs__actions 4px top / 0 bottom and
   .vs__dropdown-toggle 0 top / 4px bottom — so the arrow and the name end up
   on different baselines. Centre them on the same line. */
.v-select .vs__actions {
    padding-top: 0;
    padding-bottom: 0;
    align-items: center;
}

/* In-page sidebar navigation (see themes/adminlte/js/custom.js): dim the content
   area while the next page is being fetched, so the swap reads as a load. */
body.ajax-loading .content-wrapper {
    opacity: .55;
    transition: opacity .12s ease;
}