/* 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");
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{
    color: #2962ff;
  }