@import url('https://fonts.googleapis.com/css2?family=Prompt:wght@100;200;300;400;500;600;700;800;900&display=swap');
.pull-right{
    float: right;
}
.word-break{
    word-break: break-word;
    min-width: 200px;
  }
  
.table-hover {
    cursor: pointer;
}

.mg-auto {
    margin: auto;
}

.form-control:disabled,
.form-control[readonly] {
    background-color: #B8B8B8;
    opacity         : 1
}

body {
    font-family: "Prompt", sans-serif !important;
    height     : 100vh;
    overflow   : hidden;
}

.f-2 {
    font-size: 2rem;
}

.f-1-5 {
    font-size: 1.5rem;
}

.f-2-3 {
    font-size: 2.3rem;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Prompt", sans-serif !important;
}

.breadcrumb {
    font-family: "Prompt", sans-serif !important;
}

.card-title {
    font-family: "Prompt", sans-serif !important;
}

.alert-heading {
    font-family: "Poppins", sans-serif!important;
}

.header {
    height: 80px !important;
}

.header {
    transition: all 0.3s;
    left      : 300px !important;
}

@media (max-width: 1441px) {
    .login {
        margin-right: 1.5rem !important;
        margin-left : 1.5rem !important;
    }
}

@media (min-width: 1441px) {
    .login {
        margin-right: 9.5rem !important;
        margin-left : 9.5rem !important;
    }
}

@media (max-width: 1199px) {
    .toggle-sidebar .header {
        left: 300px !important;
    }

    .header {
        transition: all 0.3s;
        left      : 0px !important;
    }
}

@media (min-width: 1200px) {

    .toggle-sidebar #main,
    .toggle-sidebar #footer {
        margin-left: 0;
    }

    .toggle-sidebar .header {
        left: 0 !important;
    }
}

.sidebar {
    top: 0px !important;
}

.footer {
    padding   : 10px 0 !important;
    background: #EF582E;
    border-top: unset !important;
}

.footer .copyright {
    color: white !important;
}

#main {
    margin-top: 80px !important;
}

.main {
    height  : calc(100vh - 120px);
    overflow: auto;
}

.img-responsive {
    width: 100%;
}

.m-8 {
    margin: 4.5rem !important
}

.p-md-6 {
    padding: 6rem !important;
}

a {
    text-decoration: none !important;
}

.pagetitle {
    display        : flex;
    justify-content: space-between;
}

.pagetitle h1 {
    color: black !important;
}

.breadcrumb a {
    color: black !important;
}

.nav {
    border-bottom: 1px solid red;
}

.nav .nav-item {
    padding: 0 5px;
}

.nav .nav-item .nav-link {
    min-width                 : 110px;
    color                     : white;
    background                : #C9C9C9;
    border-bottom-left-radius : 0;
    border-bottom-right-radius: 0;
}

.nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
    color     : white;
    background: #EEAE56 !important;

    ;
}

.mat-sort-header-container {
    display: inline-flex !important;
}

.mat-sort-header-stem {
    color: white;
}

.mat-sort-header-arrow {
    color: white !important;
}

.mat-sort-header-content {
    color: #fff;
}
.mat-sort-header-button[disabled] ~ .mat-sort-header-arrow {
  display: none
}
/* -------------- start checkbox custom ----------- */
label>input[type="checkbox"] {
    display: none;
}

label>input[type="checkbox"]+*::before {
    content       : "";
    display       : inline-block;
    vertical-align: middle;
    width         : 1.4rem;
    height        : 1.4rem;
    border-radius : 10%;
    border-style  : solid;
    border-width  : 0.2rem;
    border-color  : gray;
}

label>input[type="checkbox"]:checked+* {
    color: #EF582E;
}

label>input[type="checkbox"]:checked+*::before {
    content     : "\2713";
    border-color: #EF582E;
    font-size   : .7rem;
    font-weight : bolder;
    text-align  : center;
}

/* -------------- end checkbox custom ----------- */



/* -------------- start radio custom ----------- */
label>input[type="radio"] {
    display: none;
}
label>input[type="radio"]>.is-invalid+*::before {
    border: red!important;
}

label>input[type="radio"]+*::before {
    content        : "";
    display        : inline-block;
    vertical-align : middle;
    width          : 1.3rem;
    height         : 1.3rem;
    /* margin-right: 0.3rem; */
    border-radius  : 50%;
    border-style   : solid;
    border-width   : 0.1rem;
    border-color   : gray;
}

label>input[type="radio"]:checked+* {
    color: #EF582E;
}

label>input[type="radio"]:checked+*::before {
    background  : radial-gradient(#EF582E 0%, #EF582E 40%, transparent 50%, transparent);
    border-color: #EF582E;
}

/* -------------- end radio custom ----------- */

.modal-header {
    background: #EEAE56;
}
.table > :not(caption) > * > * { 
    color: unset!important;
    background-color: unset!important; 
} 
.table thead:nth-child(1) {
    background: #EF582E!important;
    color     : #EBEDF2!important;
}

.table thead:nth-child(2) {
    background: #EEAE56!important;
    color     : #EBEDF2!important;
}
.text-blue{ color: #0057FF;}
.text-right {
    text-align: right;
}

.text-left {
    text-align: left;
}

.modal-sm-custom {
    width: 500px;
}
.modal-lg-custom { 
    min-width: 90%;
}

.signature-pad-canvas {
    border-radius: 5px !important;
    width        : 100%;
}

.required {
    color: red;
}

.valid-pin-code {
    display: block;
    color  : red;
}

.text-cog {
    color: #699BF7 !important;
}

.bg-print {
    background-color: #00BCC8 !important;
    border          : 1px solid #00BCC8 !important;
    border-radius   : 0.25rem;
    color           : white;
}

.read-only {
    background-color: #B8B8B8 !important;
}

.bg-orange {
    color       : #F9781B;
    border-color: #F9781B
}

.bg-orange:hover {
    color       : #f77d27;
    border-color: #F9781B
}

.float-right {
    float: right;
}

.bg-filter-child {
    color           : black;
    background-color: #E2E2E2;
}

.overflow-filter-child {
    white-space  : nowrap;
    overflow-x   : auto;
    overflow-y   : hidden;
    text-overflow: ellipsis;
}

.card {
    border-bottom-right-radius: 0 !important;
    border-bottom-left-radius : 0 !important;
}

.bg-gray {
    background-color: #E4E4E4;
    font-weight     : bold;
}

.col-btn {
    display        : flex;
    gap            : 0.5rem;
    justify-content: center;
}

.hover {
    cursor: pointer;
}
 
.w-ellipsis{
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.text-red {
    color: red !important;
}
.form-control{
    -webkit-appearance:auto!important; 
     appearance: auto!important; 
}
.table-remark{
    max-width: 300px;
}
.table-remark-text{ 
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.tooltip-inner{
    max-width: max-content!important;
    position: relative;
}
.f14{
    font-size: .75rem!important;
}
.f1-5{
    font-size: 1.5rem!important;
}
ngx-material-timepicker-container{
    position: absolute;
    z-index: 2000;
}
.is-invalid .ngx-select__toggle{ 
    border-color: red!important;
}
.ngx-select__item:hover {
   color: white!important;
   background-color: #428bca!important;
}
.is-invalid .ngx-timepicker{
     
    border: 1px solid red!important; 
} 
 .table-default thead{
    /* background: #BEC3C6!important; */
    background: linear-gradient(0deg, #BEC3C6, #BEC3C6),
linear-gradient(0deg, #EBECED, #EBECED)!important;

    color: black!important;
    vertical-align: middle;
}
.form-check-input:checked {
    background-color: #EF582E !important;
    border-color: #EF582E !important;
}
.red{
    background: #FF0000!important;
}
.red-yellow{
    background: #FFB489!important;
}
.yellow{
    background: #FFFB97!important;
}
.yellow-green{
    background: #C4FFB5!important;
}
.green{
    background: #2AD000!important;
}

.tableFixHead{  max-height: calc(100vh - 290px); overflow-y: auto; }
.tableFixHead table thead th { color: #EBEDF2; background-color: #EF582E!important; z-index: 1;}
.tableFixHead table thead tr th  { position: sticky; top: 0!important; }
.tableFixHead table thead tr:nth-child(2) th  { position: sticky; top: 39px!important; }
.tableFixHead table thead tr:nth-child(3) th  { position: sticky; top: 78px!important; }
.tableFixHead table thead tr:nth-child(4) th  { position: sticky; top: 117px!important; }
.min-w{
    min-width: 126px!important;
}



.mt-1-5 {
    margin-top: 1.5rem !important;
}

.ms-n5 {
    margin-left: -40px;
}

.float-right {
    float: right !important;
}


.inner {
    width: 150px;
}

.inner .part1 {
    width                 : 85%;
    height                : 100%;
    float                 : left;
    border-top-left-radius: 5px;
    background            : #E2E2E2;
    padding: 3px;
}

.inner .part2 {
    width                  : 15%;
    height                 : 100%;
    border-top-right-radius: 5px;
    background             : #E2E2E2;
    float                  : right;
    padding: 3px
}

.text-ellipsis {
    text-overflow: ellipsis;
    overflow     : hidden;
}

.icon-trash {
    cursor: pointer;
}

.flag {
    display: inline-block;
    width: 16px;
    height: 20px;
}
.flag-th {
    background: url('../img/flag/thailand.png') no-repeat;
} 
.flag-en {
    background: url('../img/flag/united-kingdom.png') no-repeat;
}

.flag-lao {
    background: url('../img/flag/mm.png') no-repeat;
}

.flag-mm {
    background: url('../img/flag/mm.png') no-repeat;
}

.flag-cb {
    background: url('../img/flag/cambodia.png') no-repeat;
} 

.flag-vn {
    background: url('../img/flag/vietnam.png') no-repeat;
}

.fc .fc-daygrid-day-bottom { 
    display: flex!important;
    justify-content: center;
}
.fc-day-sat, .fc-day-sun {
    background-color: rgb(234, 233, 233) !important;
}
.fc .fc-daygrid-day-frame { 
    height: 150px!important;
}
.fc .fc-daygrid-day-number { 
    color: black!important;
}
.fc .fc-col-header-cell-cushion {
    color: black!important;
}
.white-space-custom div{
    max-width: 150px;
}
.white-space-custom-div{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    position: relative;
    width: 100%;
}
.form-check-input{
    margin-right: .5em;
}
.car-min-h{
    min-height: 400px;
}

.ck-editor__editable_inline {
    height: 500px!important;
    overflow: auto;
}
.swal2-container.swal2-center>.swal2-popup {
    width: 40rem;
}

.cursor-pointer {
    cursor: pointer !important;
}

.cursor-unset {
    cursor: unset !important;
}

.label-server {
  color: white;
  border-radius: 10px;
  padding: 5px 10px;
}

.label-server.dev {
    background-color: orange;
}

.label-server.uat {
    background-color: purple;
}

.label-server.prd {
    background-color: green;
}