/*Custom css*/
.red-asterisk::after {
    content: "*";
    position: absolute;
    color: #ef5350 !important;
    /*display: block !important;*/
}

.panel-heading {
    padding: 0;
    border: 0;
}

.panel-title > a, .panel-title > a:active {
    display: block;
    padding: .7em;
    padding-left: 1.286em;
    color: #bbb;
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 1px;
    text-decoration: none;
    background-color: #fafafa;
}

    .panel-title > a:hover {
        color: #777;
    }

.panel-heading a:before {
    font-family: 'Glyphicons Halflings';
    content: "\276f";
    float: right;
    transition: all 0.5s;
}

.panel-heading.active a:before {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    transform: rotate(90deg);
}

.panel-collapse {
    padding: 1.286em;
}


.h-43 {
    height: 43px !important;
}

input[type="file"] {
    border-color: #e3e3e3 !important;
}

.btn-outline-secondary {
    border-color: #e3e3e3 !important;
}

.time-icon {
    position: relative;
    width: 100%;
}

    .time-icon:after {
        color: #979797;
        content: "\f017";
        display: block;
        font-family: "FontAwesome";
        font-size: 15px;
        margin: auto;
        position: absolute;
        right: 15px;
        top: 10px;
    }

.btn-xs {
    padding: .1rem 0.2rem;
    font-size: 0.75rem;
    line-height: 1.5;
    background-color: #bbb;
    border-color: #bbb;
    color: white !important;
}

.no-scrollbar .k-grid-header {
    padding: 0 !important;
}

.no-scrollbar .k-grid-content {
    overflow-y: visible;
}

.k-header.k-grid-toolbar {
    background-color: #fafafa !important;
}

.k-dropdown-wrap {
    border-color: #e6e6e6 !important;
}

.k-grid-toolbar .k-grid-add {
    color: #f7f6f6 !important;
    /*background-color: #fafafa !important;*/
    border: 1px solid #dedede !important;
    border-radius: unset !important;
    min-width: 50px !important;
    cursor: pointer !important;
}

    .k-grid-toolbar .k-grid-add:hover {
        /*background-color: #fafafa !important;*/
        border: 1px solid #dedede !important;
        border-radius: unset !important;
    }

.k-grid-toolbar {
    display: flex !important;
    justify-content: flex-start !important;
}

.k-i-plus, .k-i-image, .k-i-pdf, .k-i-excel {
    margin: unset !important;
    opacity: 1 !important;
}

.k-grid-edit {
    min-width: 50px !important;
}

.edit-modal > .k-i-pencil {
    margin: unset !important;
}

.k-grid-delete {
    margin-top: unset !important;
}

/* Kendo Window: don't override titlebar globally here.
   Per-window styles live in the relevant view when needed. */

/* Kendo Window: titlebar close "X" color */
.k-window-titlebar .k-window-titlebar-actions .k-button,
.k-window-titlebar .k-window-titlebar-actions .k-icon-button,
.k-window-titlebar .k-window-titlebar-actions .k-button .k-icon,
.k-window-titlebar .k-window-titlebar-actions .k-icon-button .k-icon {
    color: #14324F !important;
}

.k-window .k-window-content {
    overflow: unset !important;
}

.duration {
    background-color: rgba(128, 128, 128, 0.1);
    height: 44px;
    border-radius: .25rem;
    align-items: center;
    color: #555;
}

#calculated-days {
    margin-top: unset !important;
    margin-bottom: unset !important;
}

.btn {
    border-radius: unset !important;
    cursor: pointer;
}

.btn-primary {
    border-radius: unset;
    /*background: linear-gradient(to right, rgb(0,55,123), rgb(3,78,162), rgb(0,55,123));*/
    box-shadow: 0 2px 6px rgba(0,0,0,.1), 0 2px 3px rgba(0,0,0,.05);
    min-width: 100px;
    color: #fff;
}


    .btn-primary:focus,
    .btn-primary:hover {
        box-shadow: 0 2px 6px rgba(0,0,0,.05), 0 2px 3px rgba(0,0,0,.03);
        color: #fff;
        border: 1px solid transparent;
    }

.btn-secondary {
    border-radius: unset;
    background-color: #fafafa;
    color: #808080;
    min-width: 100px;
    border-color: #e8e8e8;
    box-shadow: 0 2px 6px rgba(0,0,0,.1), 0 2px 3px rgba(0,0,0,.05);
}

    .btn-secondary:focus,
    .btn-secondary:hover {
        color: #808080;
        border-color: #ebebeb;
        background-color: #ebebeb;
        -webkit-box-shadow: 0 2px 6px rgba(0,0,0,.2), 0 2px 3px rgba(0,0,0,.05);
        box-shadow: 0 2px 6px rgba(0,0,0,.05), 0 2px 3px rgba(0,0,0,.03);
    }

/* =========================
   SCAAK Theme (global)
   Buttons / inputs / dropdowns
   ========================= */
:root {
    --scaak-brand: #317256;
    --scaak-brand-ink: #14324F;
    --scaak-bg: #f6f8fb;
    --scaak-surface: #ffffff;
    --scaak-border: #d8dee6;
    --scaak-text: #0f172a;
    --scaak-muted: #5b6676;
    --scaak-radius: 10px;
    --scaak-radius-sm: 8px;
    --scaak-focus: rgba(49, 114, 86, 0.18);
    --scaak-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
}

body {
    color: var(--scaak-text);
    background: var(--scaak-bg);
}

.card,
.k-card {
    border-radius: var(--scaak-radius) !important;
    border-color: color-mix(in srgb, var(--scaak-border) 70%, #ffffff) !important;
    box-shadow: var(--scaak-shadow);
}

/* Buttons */
.btn {
    border-radius: var(--scaak-radius-sm) !important;
    font-weight: 600;
    letter-spacing: 0.2px;
    box-shadow: none !important;
}

.btn-primary {
    background-color: var(--scaak-brand) !important;
    border-color: var(--scaak-brand) !important;
}

.btn-secondary {
    background-color: #eef2f6 !important;
    border-color: #d7dee7 !important;
    color: #223048 !important;
}

.btn-outline-primary {
    color: var(--scaak-brand) !important;
    border-color: color-mix(in srgb, var(--scaak-brand) 65%, #ffffff) !important;
}

/* Inputs/selects */
.form-control,
.form-select,
input.form-control,
select.form-select,
textarea.form-control {
    border-radius: var(--scaak-radius-sm) !important;
    border-color: var(--scaak-border) !important;
    min-height: 38px;
}

.form-control:focus,
.form-select:focus {
    border-color: color-mix(in srgb, var(--scaak-brand) 55%, #ffffff) !important;
    box-shadow: 0 0 0 0.22rem var(--scaak-focus) !important;
}

/* Kendo inputs/dropdowns (conservative) */
.k-input,
.k-textbox,
.k-picker,
.k-dropdownlist,
.k-combobox,
.k-multiselect,
.k-autocomplete,
.k-numerictextbox {
    border-radius: var(--scaak-radius-sm) !important;
}

.k-input-solid,
.k-picker-solid,
.k-dropdownlist.k-picker-solid,
.k-combobox.k-picker-solid,
.k-multiselect.k-picker-solid {
    border-color: var(--scaak-border) !important;
    background-color: var(--scaak-surface) !important;
}

.k-input-solid:focus-within,
.k-picker-solid:focus-within,
.k-dropdownlist.k-picker-solid:focus-within,
.k-combobox.k-picker-solid:focus-within,
.k-multiselect.k-picker-solid:focus-within {
    border-color: color-mix(in srgb, var(--scaak-brand) 55%, #ffffff) !important;
    box-shadow: 0 0 0 0.22rem var(--scaak-focus) !important;
}

.k-button {
    border-radius: var(--scaak-radius-sm) !important;
    font-weight: 600;
}

.k-button-solid-primary {
    background-color: var(--scaak-brand) !important;
    border-color: var(--scaak-brand) !important;
}

    .btn-secondary:active {
        background-color: #dbdbdb;
        border-color: #dbdbdb;
        -webkit-box-shadow: 0 2px 6px rgba(0,0,0,.2), 0 2px 3px rgba(0,0,0,.05);
        box-shadow: 0 2px 6px rgba(0,0,0,.05), 0 2px 3px rgba(0,0,0,.03);
    }


.btn.btn-secondary:active {
    color: #000 !important;
    background-color: #d1d1d1 !important;
    border-color: #d1d1d1 !important;
    box-shadow: 0 2px 6px rgba(0,0,0,.05), 0 2px 3px rgba(0,0,0,.03) !important;
}

.form-control, .k-widget, .k-window, .k-dialog {
    border-radius: unset !important;
}

.k-dropdown-wrap, .k-multiselect-wrap {
    border-color: #e6e6e6 !important;
    border-radius: unset !important;
    min-height: 42px;
    color: #808080 !important;
    cursor: pointer;
}

    .k-dropdown-wrap .k-input, .k-multiselect-wrap .k-input {
        line-height: 2.3em !important;
        color: #808080 !important;
    }

.k-dropdown .k-state-default {
    background-color: #ffffff !important;
}

.k-dropdown.form-control {
    width: 100%;
}

.k-dropdown-wrap .k-readonly, .k-multiselect-wrap .k-readonl {
    opacity: unset !important;
}

select, .select2-container--default .select2-selection--single,
.select2-container .select2-selection--single {
    border-radius: unset !important;
    border-color: #e6e6e6 !important;
}

    select:hover, select:focus, .select2-container--default .select2-selection--single:hover,
    .select2-container:hover .select2-selection--single:hover,
    .select2-container--default .select2-selection--single:focus,
    .select2-container:hover .select2-selection--single:focus {
        box-shadow: 0 2px 6px rgba(0,0,0,.05), 0 2px 3px rgba(0,0,0,.03) !important;
    }

.k-state-hover, .k-state-focused {
    -webkit-box-shadow: 0 2px 6px rgba(0,0,0,.05), 0 2px 3px rgba(0,0,0,.03) !important;
    box-shadow: 0 2px 6px rgba(0,0,0,.05), 0 2px 3px rgba(0,0,0,.03) !important;
}

span.select2-selection.select2-selection--single {
    outline: none !important;
}

.form-footer {
    display: block;
    padding: 1rem 0 1rem;
    border-top: 1px solid #e1e1e1;
    background-color: #efefef;
    border-radius: 0;
    margin-left: -20px !important;
    margin-right: -20px !important;
    margin-bottom: -20px;
    margin-top: 10px;
    text-align: right !important;
}

.nav-item {
    cursor: pointer;
}

.searchFont {
    font-family: 'Samsung sans', sans-serif;
    font-weight: 400;
    font-size: .9375rem;
}

span.select2-selection__arrow b {
    margin-top: 5px !important;
}

span.select2-selection.select2-selection--single {
    outline: none;
    height: 43px !important;
    padding-top: 7px !important;
    padding-left: 10px !important;
    border-color: #e3e3e3 !important;
    outline: none !important;
}

span.select2-dropdown, input.select2-search__field {
    border-color: #e3e3e3 !important;
}

li.select2-results__message {
    color: #999;
}
/* ===== GLOBAL FORM DESIGN SYSTEM ===== */

input,
select,
textarea,
.form-control,
.k-input,
.k-textbox,
.k-picker,
.k-dropdown,
.k-combobox,
.select2-selection,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    /*height: 40px !important;*/
    border-radius: 6px !important;
    /*border: 1px solid #dee2e6 !important;*/
    font-size: 14px;
    /*padding: 6px 12px;*/
    background: #fff;
    transition: all 0.2s ease;
}

    /* focus effect */
    input:focus,
    select:focus,
    textarea:focus,
    .form-control:focus,
    .k-input:focus,
    .k-textbox:focus,
    .k-picker:focus,
    .k-dropdown:focus,
    .k-combobox:focus,
    .k-input:focus-within,
    /*.select2-container--default.select2-container--focus .select2-selection {
        border-color: #0d6efd !important;
        box-shadow: 0 0 0 0.15rem rgba(13,110,253,.15);
        outline: none;
    }*/

/* labels */
label,
.form-group span {
    font-size: 13px;
    /*font-weight: 600;
    color: #495057;
    margin-bottom: 4px;*/
    /*display: block;*/
}

/* spacing between inputs */
.form-group {
    margin-bottom: 10px;
}


/* kendo dropdown arrow button */
.k-input-button {
    height: 38px !important;
    width: 38px !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* select2 adjustments */
.select2-container--default .select2-selection--single {
    height: 40px !important;
    padding: 5px 10px;
}

.select2-selection__arrow {
    height: 40px !important;
}

/* dropdown menu styling */
.k-list-container,
.select2-dropdown {
    border-radius: 6px;
    border: 1px solid #dee2e6;
    box-shadow: 0 6px 16px rgba(0,0,0,0.08);
}

/* dropdown item hover */
.k-list-item:hover,
.select2-results__option--highlighted {
    background: #f1f3f5 !important;
}

/* grid styling */
.k-grid {
    border-radius: 8px;
    border: 1px solid #e9ecef;
    overflow: hidden;
}

.k-grid-header {
    background: #f8f9fa;
    font-weight: 600;
}

.k-grid tbody tr:hover {
    background: #f9fafb;
}

/* buttons */
.btn {
    border-radius: 6px;
    padding: 6px 14px;
    font-size: 14px;
}

.btn-primary {
    background: #317256;
    border: none;
}

    .btn-primary:hover {
        background: #0b5ed7;
    }

/* cards */
.card {
    border-radius: 10px;
    border: none;
    box-shadow: 0 4px 14px rgba(0,0,0,0.08);
}

/* ===== PRIMARY COLOR SYSTEM ===== */

:root {
    /* PRIMARY BRAND */
    --scaak-brand: #4f7758;
    /* Shades (hover / active / disabled) */
    --kendo-primary-90: #4f7758; /* default */
    --kendo-primary-100: #43664c; /* hover */
    --kendo-primary-110: #385542; /* active */
    --kendo-primary-120: #2e4436;
    --kendo-primary-130: #24352a; /* disabled */
    /* UI COLORS */
    --scaak-bg: #f6f8fb;
    --scaak-surface: #ffffff;
    --scaak-border: #d8dee6;
    /* TEXT */
    --scaak-text: #0f172a;
    --scaak-muted: #5b6676;
    /* EFFECTS */
    --scaak-radius: 10px;
    --scaak-radius-sm: 6px;
    --scaak-focus: rgba(79, 119, 88, 0.2);
    /* SHADOW */
    --scaak-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

/* ===== GLOBAL BUTTON STYLE ===== */

button,
.btn,
.k-button {
    border-radius: 6px;
    font-size: 14px;
    padding: 6px 16px;
    /*border: none;
    background: var(--kendo-primary-90);
    color: #fff;*/
    transition: all 0.2s ease;
}

    /* hover */
    button:hover,
    .btn:hover,
    .k-button:hover {
        background: var(--kendo-primary-100);
        /*color: #fff;*/
    }

    /* active / pressed */
    button:active,
    .btn:active,
    .k-button:active {
        background: var(--kendo-primary-110);
        color: #fff;
    }

    /* focus */
    button:focus,
    .btn:focus,
    .k-button:focus {
        background: var(--kendo-primary-100);
        box-shadow: 0 0 0 0.2rem rgba(30,93,66,0.25);
        outline: none;
    }

    /* disabled */
    button:disabled,
    .btn:disabled,
    .k-button:disabled {
        background: var(--kendo-primary-130);
        opacity: 0.7;
        cursor: not-allowed;
    }

    /* Kendo primary buttons */
    .k-button-solid-primary {
        background: var(--kendo-primary-90) !important;
        border-color: var(--kendo-primary-90) !important;
    }

    .k-button-solid-primary:hover {
        background: var(--kendo-primary-100) !important;
    }

    /* Bootstrap primary override */
    .btn-primary {
        background: var(--kendo-primary-90) !important;
        border-color: var(--kendo-primary-90) !important;
        height: 38px !important;  
    }

    .btn-primary:hover {
        background: var(--kendo-primary-100) !important;
    }

    .select-class .k-picker.k-dropdownlist {
        display: flex !important;           
        align-items: center !important;     
        height: 38px !important;            
        font-size: 14px;                    
        
    }
    
    .select-class .k-picker.k-dropdownlist .k-input-inner {
        flex: 1 1 auto;                     
        height: 100%;                       
        line-height: 38px;                  
    }
    
    .select-class .k-picker.k-dropdownlist .k-input-button {
        flex: 0 0 auto;                     
        margin-left: 4px;                   
        height: 100%;                       
    }
    color-required {
        color: red !important
    }
    .error {
        color: red !important
    }
    .col-xl-4 .k-picker.k-dropdownlist {
        display: flex !important; 
        align-items: center !important; 
        height: 38px !important; 
        font-size: 14px; 
        width: 100%; 
    }

    .col-xl-4 .k-picker.k-dropdownlist .k-input-inner {
        flex: 1 1 auto; 
        height: 100%; 
        line-height: 38px;
    }

    .col-xl-4 .k-picker.k-dropdownlist .k-input-button {
        flex: 0 0 auto; 
        margin-left: 4px; 
        height: 100%;
    }
    .dateTimePicker {
        display: flex !important; 
        align-items: center !important; 
        height: 38px !important; 
    }

    .dateTimePicker + .k-picker-button, 
    .dateTimePicker-button { 
        height: 100% !important;
        margin-left: 4px; 
    }
    .bg-success {
        background: linear-gradient(323deg, #90c7af6b 0%, #257d57b8 35%, #6ea990eb 100%) !important;
    }
    .alert {
        display: flex;
        align-items: flex-start;
        margin-bottom: 15px;
        padding: 12px;
        border-radius: 8px;
        background-color: #f5f5f5;
    }
    
    .alert-icon {
        margin-right: 12px;
        flex-shrink: 0;
    }
    
    .alert-content {
        flex-grow: 1;
    }
    
    .alert-title {
        font-size: 16px;
        font-weight: 600;
        margin-bottom: 5px;
    }
    
    .alert-time {
        font-size: 12px;
        color: #999;
    }
    
    .alert-actions {
        display: flex;
        gap: 10px;
        margin-top: 8px;
    }
    
    .alert-btn {
        background: none;
        border: 1px solid #ddd;
        padding: 6px 12px;
        border-radius: 5px;
        cursor: pointer;
        transition: background 0.3s;
    }
    
        .alert-btn:hover {
            background-color: #f0f0f0;
        }
    #notification-container {
        position: absolute;
        top: 40px;
        right: 0;
        width: 700px;
        height: 1000px; 
        overflow-y: auto;
        display: none;
        z-index: 1050;
        background-color: white;
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
        border-radius: 8px;
        padding: 10px;
    }