/* You can add global styles to this file, and also import other style files */

@import url('https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700,800');
@import url("https://fonts.googleapis.com/css?family=Kanit:300,400,600,700,800");
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css");

@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-calendars/styles/material.css';
@import '../node_modules/@syncfusion/ej2-dropdowns/styles/material.css';
@import '../node_modules/@syncfusion/ej2-inputs/styles/material.css';
@import '../node_modules/@syncfusion/ej2-navigations/styles/material.css';
@import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
@import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
@import '../node_modules/@syncfusion/ej2-angular-grids/styles/material.css';

body {
  font-family: "Kanit", sans-serif !important;
}

.msg-detail {
  width: 100%;
  margin-top: 0.25rem;
  font-size: 0.875em;
  color: #f62d51;
}

.myhrcolor-1 .tooltip-inner {
  background-color: #fff;
  color: #2962ff;
  font-weight: 400;
  border-style: solid;
  border-color: #2962ff;
  border-width: 1px;
}

.myhrcolor-1 .arrow::before {
  border-top-color: #2962ff;
}

.myhrcolor-2 .tooltip-inner {
  background-color: #fff;
  color: #36bea6;
  font-weight: 400;
  border-style: solid;
  border-color: #36bea6;
  border-width: 1px;
}

.myhrcolor-2 .arrow::before {
  border-top-color: #36bea6;
}

.myhrcolor-3 .tooltip-inner {
  background-color: #fff;
  color: #f62d51;
  font-weight: 400;
  border-style: solid;
  border-color: #f62d51;
  border-width: 1px;
}

.myhrcolor-3 .arrow::before {
  border-top-color: #f62d51;
}

.myhrcolor-4 .tooltip-inner {
  background-color: #fff;
  color: #ffbc34;
  font-weight: 400;
  border-style: solid;
  border-color: #ffbc34;
  border-width: 1px;
}

.myhrcolor-4 .arrow::before {
  border-top-color: #ffbc34;
}

.myhrcolor-date .tooltip-inner {
  background-color: #fff;
  color: #a1aab2;
  font-weight: 400;
  border-style: solid;
  border-color: #a1aab2;
  border-width: 1px;
}

.myhrcolor-date .arrow::before {
  border-top-color: #a1aab2;
}

.pointer {
  cursor: pointer;
}

.pointer:hover {
  font-weight: 700;
  color: #2962ff;
}

.my-dialog-img-preview .modal-dialog {
  display: flex !important;
  justify-content: center !important;

  .modal-content {
    background-color: #fff0 !important;
    border: none !important;
    width: auto !important;
  }
}

.cover {
  border-radius: 4%;
  border: 10px solid #ccc;
  object-fit: cover;
  height: 200px;
}

.border-excel {
  border: 1px solid #21a366 !important;
  border-color: #21a366 !important;
}

.border-doc {
  border: 1px solid #2091eb !important;
  border-color: #2091eb !important;
}

.border-course {
  border: 1px solid #7460ee !important;
  border-color: #7460ee !important;
}

.border-widget {
  border: 1px solid #ccc !important;
  border-color: #ccc !important;
}

.border-5 {
  border-radius: 10px
}

.no-bg {
  background-color: #fff0;
}

.view-detail {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.border-bottom-5 {
  border-radius: 0 0 6px 6px !important;
}

.my-dialog-video-preview .modal-dialog {
  display: flex !important;
  justify-content: center !important;

  .modal-content {
    background-color: #fff0 !important;
    border: none !important;
    min-width: 70vw !important;
    min-height: 70vh !important;
  }
}