.thumb {
    width: 120px;
    height: 120px;
    position: relative;
    overflow: hidden;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    object-fit: cover;
}
.thumb img {
    width: auto;
    height: auto;
    object-fit: cover;
}

.btn-blue {
    color: #fff;
    background-color: #3f5fbb;
    border-color: #3f5fbb;
}

.btn-blue:hover {
    color: #fff;
    background-color: #2c4aa0;
    border-color: #4e6cc1;
}

.btn-blue:focus, .btn-blue.focus {
    box-shadow: 0 0 0 0.2rem rgba(65, 181, 222, 0.5);
}

.btn-blue.disabled, .btn-blue:disabled {
    color: #fff;
    background-color: #3f5fbb;
    border-color: #3f5fbb;
}

.btn-blue:not(:disabled):not(.disabled):active, .btn-blue:not(:disabled):not(.disabled).active,
.show > .btn-blue.dropdown-toggle {
    color: #fff;
    background-color: #1985ac;
    border-color: #187da0;
}

.btn-blue:not(:disabled):not(.disabled):active:focus, .btn-blue:not(:disabled):not(.disabled).active:focus,
.show > .btn-blue.dropdown-toggle:focus {
    box-shadow: 0 0 0 0.2rem rgba(65, 181, 222, 0.5);
}

.header-fixed .app-header {
    z-index: 1040;
}

.datepicker-dropdown {
     z-index: 1040;
 }

.custom-file-label::after {
    content: 'เลือกไฟล์';
}

.subheader {
    border-bottom: 0;
    margin-top: -1px;
    border-top: 1px solid #d8dbe0;
    border-bottom: 1px solid #d8dbe0;
}

/*checkbox
https://codepen.io/aaroniker/pen/ZEYoxEY
*/
@supports (-webkit-appearance: none) or (-moz-appearance: none) {
    input[type='checkbox'][class='green-checkbox'], input[type='radio'][class='green-radio'] {
        --active: #24B425;
        --active-inner: #fff;
        --focus: 2px rgba(0, 42, 13, 0.3);
        --border: #a0e198;
        --border-hover: #27e228;
        --background: #fff;
        --disabled: #f6f8ff;
        --disabled-inner: #e1e6f9;
        -webkit-appearance: none;
        -moz-appearance: none;
        height: 21px;
        outline: none;
        display: inline-block;
        vertical-align: top;
        position: relative;
        margin: 0;
        cursor: pointer;
        border: 1px solid var(--bc, var(--border));
        background: var(--b, var(--background));
        transition: background 0.3s, border-color 0.3s, box-shadow 0.2s;
    }
    input[type='checkbox'][class='green-checkbox']:after, input[type='radio'][class='green-radio']:after {
        content: '';
        display: block;
        left: 0;
        top: 0;
        position: absolute;
        transition: transform var(--d-t, 0.3s) var(--d-t-e, ease), opacity var(--d-o, 0.2s);
    }
    input[type='checkbox'][class='green-checkbox']:checked, input[type='radio'][class='green-radio']:checked {
        --b: var(--active);
        --bc: var(--active);
        --d-o: 0.3s;
        --d-t: 0.6s;
        --d-t-e: cubic-bezier(0.2, 0.85, 0.32, 1.2);
    }
    input[type='checkbox'][class='green-checkbox']:disabled, input[type='radio'][class='green-radio']:disabled {
        --b: var(--disabled);
        cursor: not-allowed;
        opacity: 0.9;
    }
    input[type='checkbox'][class='green-checkbox']:disabled:checked, input[type='radio'][class='green-radio']:disabled:checked {
        --b: var(--disabled-inner);
        --bc: var(--border);
    }
    input[type='checkbox'][class='green-checkbox']:disabled + label, input[type='radio'][class='green-radio']:disabled + label {
        cursor: not-allowed;
    }
    input[type='checkbox'][class='green-checkbox']:hover:not(:checked):not(:disabled), input[type='radio'][class='green-radio']:hover:not(:checked):not(:disabled) {
        --bc: var(--border-hover);
    }
    input[type='checkbox'][class='green-checkbox']:focus, input[type='radio'][class='green-radio']:focus {
        box-shadow: 0 0 0 var(--focus);
    }
    input[type='checkbox'][class='green-checkbox']:not(.switch), input[type='radio'][class='green-radio']:not(.switch) {
        width: 21px;
    }
    input[type='checkbox'][class='green-checkbox']:not(.switch):after, input[type='radio'][class='green-radio']:not(.switch):after {
        opacity: var(--o, 0);
    }
    input[type='checkbox'][class='green-checkbox']:not(.switch):checked, input[type='radio'][class='green-radio']:not(.switch):checked {
        --o: 1;
    }
    input[type='checkbox'][class='green-checkbox'] + label, input[type='radio'][class='green-radio'] + label {
        font-size: 14px;
        line-height: 21px;
        display: inline-block;
        vertical-align: top;
        cursor: pointer;
        margin-left: 4px;
    }
    input[type='checkbox'][class='green-checkbox']:not(.switch) {
        border-radius: 7px;
    }
    input[type='checkbox'][class='green-checkbox']:not(.switch):after {
        width: 5px;
        height: 9px;
        border: 2px solid var(--active-inner);
        border-top: 0;
        border-left: 0;
        left: 7px;
        top: 4px;
        transform: rotate(var(--r, 20deg));
    }
    input[type='checkbox'][class='green-checkbox']:not(.switch):checked {
        --r: 43deg;
    }
    input[type='checkbox'][class='green-checkbox'].switch {
        width: 38px;
        border-radius: 11px;
    }
    input[type='checkbox'][class='green-checkbox'].switch:after {
        left: 2px;
        top: 2px;
        border-radius: 50%;
        width: 15px;
        height: 15px;
        background: var(--ab, var(--border));
        transform: translateX(var(--x, 0));
    }
    input[type='checkbox'][class='green-checkbox'].switch:checked {
        --ab: var(--active-inner);
        --x: 17px;
    }
    input[type='checkbox'][class='green-checkbox'].switch:disabled:not(:checked):after {
        opacity: 0.6;
    }
    input[type='radio'][class='green-radio'] {
        border-radius: 50%;
    }
    input[type='radio'][class='green-radio']:after {
        width: 19px;
        height: 19px;
        border-radius: 50%;
        background: var(--active-inner);
        opacity: 0;
        transform: scale(var(--s, 0.7));
    }
    input[type='radio'][class='green-radio']:checked {
        --s: 0.5;
    }
}


/****************
  Endregion Document
****************/


/****************
  Datatable
****************/
.table-fixed {
    table-layout: fixed;
}

.img-circle-avt{
    height: 110px;
    width: 110px;
    border-radius: 50em;
}