@import url("../fonts/bootstrap-icons.css");
@import url("https://fonts.googleapis.com/css2?family=Sarabun:wght@400;600;700&display=swap");
html, body {
  height: 100%;
  min-height: 100%;
  background-color: #fff;
  color: #31394C;
  font-family: "Sarabun", sans-serif; }
  html *, body * {
    font-weight: 400; }

a {
  color: #28A3AC;
  text-decoration: none;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease; }
  a:hover {
    text-decoration: none; }

b, strong, .b {
  font-weight: 600; }

hr {
  margin: 1.5em 0; }

.ml-10px {
  margin-left: 10px !important; }

.opa-0 {
  opacity: 0 !important; }

.opa-50 {
  opacity: 0.5 !important; }

.opa-70 {
  opacity: 0.7 !important; }

.opa-100 {
  opacity: 1 !important; }

.no-event {
  pointer-events: none !important; }

.w-150px {
  width: 150px !important; }

.danger {
  color: #E63328 !important; }

.warning {
  color: #F47B27 !important; }

.success {
  color: #0FC445 !important; }

.disable {
  color: #838894 !important; }

.expired {
  color: #838894; }

.text-tag {
  color: #A95EEC !important; }

.min-height-auto {
  min-height: auto !important; }

.hid-btn {
  opacity: 0;
  position: absolute;
  height: 1px;
  width: 1px;
  display: block; }

.clear {
  clear: both !important; }

.fleft {
  float: left !important; }

.fright {
  float: right !important; }

.center {
  text-align: center !important; }

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

.right {
  text-align: right !important; }

.after::after {
  content: '';
  clear: both;
  display: block; }

.mw-300px {
  max-width: 300px !important; }

.mh-150px {
  max-height: 150px !important; }

.miw-auto {
  min-width: auto !important; }

.w-900px {
  width: 900px !important; }

.w-150px {
  width: 150px !important; }

.r90 {
  display: inline-block;
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg); }

.z1 {
  z-index: 1 !important; }

.z2 {
  z-index: 2 !important; }

.z3 {
  z-index: 3 !important; }

.h-100vh {
  height: 100vh; }

.ucfirst {
  text-transform: capitalize !important; }

.hand {
  cursor: pointer !important; }

.bi {
  display: inline-block;
  width: 1em;
  height: 1em;
  position: relative; }

.tooltip {
  font-size: 0.75em;
  opacity: 1 !important; }
  .tooltip .tooltip-inner {
    background-color: #464D5E;
    text-align: left;
    padding: 0.5em 1em 0.7em;
    padding-left: 2.5em;
    position: relative; }
    .tooltip .tooltip-inner > svg, .tooltip .tooltip-inner > i {
      position: absolute;
      left: 1em;
      top: 0.7em; }
    .tooltip .tooltip-inner b {
      font-weight: 600; }
  .tooltip .arrow::before {
    border-top-color: #464D5E; }

.btn, .btn1, .btn2, .btn3, .btn4 {
  display: inline-block;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  border-radius: 4px;
  font-size: 0.875em;
  font-weight: 600;
  text-align: center;
  min-width: 6.92857em;
  padding: 0.395em 1em;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease; }
  .btn.disabled, .disabled.btn1, .disabled.btn2, .disabled.btn3, .disabled.btn4 {
    opacity: 0.5; }
  .btn.m, .m.btn1, .m.btn2, .m.btn3, .m.btn4 {
    min-width: 6.92857em;
    padding: 0.395em 1em; }

.btn1 {
  background-color: #28A3AC;
  color: #ffffff; }
  .btn1:hover {
    background-color: #138891;
    color: #ffffff; }

.btn2 {
  background-color: #464D5E !important;
  border: solid 1px #464D5E !important;
  color: #ffffff !important; }
  .btn2:hover {
    background-color: #272E3D !important;
    border: solid 1px #272E3D !important;
    color: #ffffff !important; }

.btn3 {
  border: 1px solid #DFE1E8;
  background-color: #fff;
  color: #5A6170; }
  .btn3:hover {
    background-color: #F1F3F6;
    color: #5A6170; }

.btn4 {
  background-color: #F47B27;
  color: #ffffff; }
  .btn4:hover {
    background-color: #DA5700;
    color: #ffffff; }

.mx-w-none, .mx-w-auto {
  max-width: none !important; }

.anchor-color {
  color: #28A3AC !important; }

.lds-grid {
  display: inline-block;
  position: absolute;
  width: 80px;
  height: 80px;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%); }
  .lds-grid div {
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #FFF;
    animation: lds-grid 1.2s linear infinite; }
    .lds-grid div:nth-child(1) {
      top: 8px;
      left: 8px;
      animation-delay: 0s; }
    .lds-grid div:nth-child(2) {
      top: 8px;
      left: 32px;
      animation-delay: -0.4s; }
    .lds-grid div:nth-child(3) {
      top: 8px;
      left: 56px;
      animation-delay: -0.8s; }
    .lds-grid div:nth-child(4) {
      top: 32px;
      left: 8px;
      animation-delay: -0.4s; }
    .lds-grid div:nth-child(5) {
      top: 32px;
      left: 32px;
      animation-delay: -0.8s; }
    .lds-grid div:nth-child(6) {
      top: 32px;
      left: 56px;
      animation-delay: -1.2s; }
    .lds-grid div:nth-child(7) {
      top: 56px;
      left: 8px;
      animation-delay: -0.8s; }
    .lds-grid div:nth-child(8) {
      top: 56px;
      left: 32px;
      animation-delay: -1.2s; }
    .lds-grid div:nth-child(9) {
      top: 56px;
      left: 56px;
      animation-delay: -1.6s; }

@keyframes lds-grid {
  0%, 100% {
    opacity: 1; }
  50% {
    opacity: 0.5; } }
.break {
  flex-basis: 100%;
  height: 0; }

pre {
  display: block;
  font-family: monospace;
  white-space: break-spaces;
  word-break: break-word;
  padding: 1em;
  font-size: 1em; }

button {
  background-color: #28A3AC;
  color: #ffffff;
  line-height: 1.7em;
  font-weight: 600;
  border: 0;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  border-radius: 4px;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  min-height: 2em; }
  button:hover {
    background-color: #138891; }
  button.disable, button:disabled {
    opacity: 0.4;
    pointer-events: none;
    color: #ffffff !important; }
  button.s {
    font-size: 0.75em; }
  button.btn-create {
    padding-left: 0.4em;
    padding-right: 0.8em;
    min-width: 6em;
    padding-bottom: 3px; }
    button.btn-create i, button.btn-create svg {
      margin-right: 0.3em;
      top: 0.2em; }
      button.btn-create i.plus, button.btn-create svg.plus {
        font-size: 1.7em;
        vertical-align: text-bottom !important;
        margin-right: 0;
        height: 0.8em;
        top: 0; }
        button.btn-create i.plus::before, button.btn-create svg.plus::before {
          vertical-align: top; }
    button.btn-create > span {
      font-size: 0.875em;
      font-weight: 600; }
    button.btn-create.narrow {
      padding: 0 0.75em 0 0.15em; }
  button.btn-cancel {
    padding-left: 0.4em;
    padding-right: 0.8em;
    min-width: 6em;
    padding-bottom: 3px;
    border: 1px solid #DFE1E8;
    background-color: #fff;
    color: #5A6170; }
    button.btn-cancel i, button.btn-cancel svg {
      font-size: 1.7em;
      vertical-align: bottom !important; }
    button.btn-cancel > span {
      font-size: 0.875em;
      font-weight: 600; }
    button.btn-cancel:hover {
      background-color: #F1F3F6;
      color: #5A6170; }
  button:focus {
    outline: none; }

select:focus, textarea:focus {
  outline-color: #41A6AE;
  box-shadow: 0 0 4px 0 rgba(65, 166, 174, 0.4); }

.btn-round, .btn-round2 {
  height: 3.0625em;
  -webkit-border-radius: 1.53125em;
  -moz-border-radius: 1.53125em;
  -ms-border-radius: 1.53125em;
  border-radius: 1.53125em;
  border: solid 1px #4285F4;
  display: inline-block;
  background-color: #fff;
  color: #4285F4; }
  .btn-round:focus, .btn-round2:focus {
    outline: none; }

.btn-round2 {
  background-color: #28A3AC;
  color: #ffffff;
  border: 0; }

.btn-circle {
  display: inline-block;
  text-align: center;
  width: 1.8em;
  height: 1.8em;
  line-height: 1.5em;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  color: #31394C !important; }
  .btn-circle:hover {
    background: #DFE1E8; }
  .btn-circle .bi.plus {
    font-size: 1.7em; }
  .btn-circle.alt {
    background: #28A3AC;
    color: #ffffff !important; }

.btn-float-left {
  font-size: 0.8em;
  position: absolute;
  -webkit-transform: translateX(-85%);
  -moz-transform: translateX(-85%);
  -ms-transform: translateX(-85%);
  transform: translateX(-85%); }

.input-field {
  position: relative;
  margin-bottom: 1em; }
  .input-field > svg, .input-field > i {
    color: #838894;
    position: absolute;
    left: 1em;
    top: 0.85em;
    width: 1.25em;
    height: 1.25em; }
    .input-field > svg + input, .input-field > i + input {
      padding-left: 3em !important; }
    .input-field > svg + input + label, .input-field > i + input + label {
      left: 2em; }
      .input-field > svg + input + label.active, .input-field > i + input + label.active {
        left: 0.8em; }
  .input-field input:not([type]),
  .input-field input[type=text],
  .input-field input[type=password],
  .input-field input[type=email],
  .input-field input[type=url],
  .input-field input[type=time],
  .input-field input[type=date],
  .input-field input[type=datetime],
  .input-field input[type=datetime-local],
  .input-field input[type=tel],
  .input-field input[type=number],
  .input-field input[type=search]
   {
    display: block;
    width: 100%;
    border: solid 1px #DFE1E8;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    border-radius: 4px;
    height: 3.0625em;
    background-color: #fff;
    color: #5A6170;
    padding: 0 1em;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease; }
    .input-field input:not([type]):focus,
    .input-field input[type=text]:focus,
    .input-field input[type=password]:focus,
    .input-field input[type=email]:focus,
    .input-field input[type=url]:focus,
    .input-field input[type=time]:focus,
    .input-field input[type=date]:focus,
    .input-field input[type=datetime]:focus,
    .input-field input[type=datetime-local]:focus,
    .input-field input[type=tel]:focus,
    .input-field input[type=number]:focus,
    .input-field input[type=search]:focus
     {
      outline-color: #41A6AE;
      box-shadow: 0 0 4px 0 rgba(65, 166, 174, 0.4); }
  .input-field > label {
    display: block;
    color: #C1C4C9;
    background-color: transparent;
    position: absolute;
    top: 0.8em;
    left: 0;
    font-size: 1em;
    cursor: text;
    pointer-events: none;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
    padding: 0 1em; }
    .input-field > label.active {
      font-size: 0.75em;
      top: 0;
      left: 0.8em;
      color: #28A3AC;
      -webkit-transform: translateY(-50%);
      -moz-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      transform: translateY(-50%);
      background-color: #fff;
      padding: 0 0.6em;
      -webkit-border-radius: 4px;
      -moz-border-radius: 4px;
      -ms-border-radius: 4px;
      border-radius: 4px; }

.frm-search-wrapper input[type=text], .frm-search-wrapper select {
  font-size: 0.875em;
  padding: 0.3em 0.5em 0.43em;
  border: solid 1px #DFE1E8;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  border-radius: 4px;
  color: #31394C; }
  .frm-search-wrapper input[type=text]:focus, .frm-search-wrapper select:focus {
    outline-color: #41A6AE;
    box-shadow: 0 0 4px 0 rgba(65, 166, 174, 0.4); }
.frm-search-wrapper .search-chk {
  padding: 0.3em 0.5em 0.43em;
  font-size: 0.8em;
  cursor: pointer; }
  .frm-search-wrapper .search-chk input[type=checkbox] {
    top: 1px;
    position: relative;
    display: inline-block; }
.frm-search-wrapper input[type=text] {
  min-width: 12.8572em;
  color: #31394C; }
  .frm-search-wrapper input[type=text]::placeholder {
    color: #C1C4C9; }
.frm-search-wrapper select {
  min-width: 10.72em;
  color: #C1C4C9; }
  .frm-search-wrapper select option {
    color: #31394C; }
  .frm-search-wrapper select.active {
    color: #31394C; }
.frm-search-wrapper .search-kw {
  position: relative;
  display: inline-block; }
  .frm-search-wrapper .search-kw > svg, .frm-search-wrapper .search-kw > i {
    font-size: 0.875em;
    position: absolute;
    pointer-events: none;
    color: #838894;
    left: 0.75em;
    top: 45%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%); }
    .frm-search-wrapper .search-kw > svg + input[type=text], .frm-search-wrapper .search-kw > i + input[type=text] {
      padding-left: 2.3em; }
.frm-search-wrapper button {
  font-size: 0.875em;
  height: 2.31em;
  padding: 0.15em 1.215em 0.25em;
  font-weight: 600;
  top: 0;
  position: relative;
  background-color: #464D5E; }
  .frm-search-wrapper button > svg, .frm-search-wrapper button > i {
    margin-right: 0.4em; }
    .frm-search-wrapper button > svg::before, .frm-search-wrapper button > i::before {
      vertical-align: text-bottom; }

.field-group {
  position: relative;
  z-index: 1;
  margin-bottom: 0.8em; }
  .field-group.required > label::after, .field-group.required > h3::after {
    content: '*';
    margin-left: 0.2em;
    color: #F47B27; }
  .field-group.disable {
    opacity: 0.5;
    pointer-events: none; }
  .field-group > label {
    display: block;
    margin-bottom: 0.4em;
    font-size: 0.875em;
    color: #31394C; }
  .field-group.heading h3 {
    font-size: 1em;
    font-weight: 600;
    margin-bottom: 0; }
  .field-group input:not([type]),
  .field-group input[type=text],
  .field-group input[type=password],
  .field-group input[type=email],
  .field-group input[type=url],
  .field-group input[type=time],
  .field-group input[type=date],
  .field-group input[type=datetime],
  .field-group input[type=datetime-local],
  .field-group input[type=tel],
  .field-group input[type=number],
  .field-group input[type=search],
  .field-group select, .field-group textarea {
    display: block;
    width: 100%;
    border: 1px solid #DFE1E8;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    border-radius: 4px;
    background-color: #fff;
    color: #5A6170;
    font-size: 0.875em;
    padding: 0.25em 0.7857em 0.4em; }
    .field-group input:not([type]):focus,
    .field-group input[type=text]:focus,
    .field-group input[type=password]:focus,
    .field-group input[type=email]:focus,
    .field-group input[type=url]:focus,
    .field-group input[type=time]:focus,
    .field-group input[type=date]:focus,
    .field-group input[type=datetime]:focus,
    .field-group input[type=datetime-local]:focus,
    .field-group input[type=tel]:focus,
    .field-group input[type=number]:focus,
    .field-group input[type=search]:focus,
    .field-group select:focus, .field-group textarea:focus {
      outline: none; }
    .field-group input:not([type]):focus,
    .field-group input[type=text]:focus,
    .field-group input[type=password]:focus,
    .field-group input[type=email]:focus,
    .field-group input[type=url]:focus,
    .field-group input[type=time]:focus,
    .field-group input[type=date]:focus,
    .field-group input[type=datetime]:focus,
    .field-group input[type=datetime-local]:focus,
    .field-group input[type=tel]:focus,
    .field-group input[type=number]:focus,
    .field-group input[type=search]:focus,
    .field-group select:focus, .field-group textarea:focus {
      border: 1px solid #28A3AC; }
      .field-group input:not([type]):focus:invalid,
      .field-group input[type=text]:focus:invalid,
      .field-group input[type=password]:focus:invalid,
      .field-group input[type=email]:focus:invalid,
      .field-group input[type=url]:focus:invalid,
      .field-group input[type=time]:focus:invalid,
      .field-group input[type=date]:focus:invalid,
      .field-group input[type=datetime]:focus:invalid,
      .field-group input[type=datetime-local]:focus:invalid,
      .field-group input[type=tel]:focus:invalid,
      .field-group input[type=number]:focus:invalid,
      .field-group input[type=search]:focus:invalid,
      .field-group select:focus:invalid, .field-group textarea:focus:invalid {
        border: 1px solid #E63328; }
    .field-group input:not([type]).disabled,
    .field-group input[type=text].disabled,
    .field-group input[type=password].disabled,
    .field-group input[type=email].disabled,
    .field-group input[type=url].disabled,
    .field-group input[type=time].disabled,
    .field-group input[type=date].disabled,
    .field-group input[type=datetime].disabled,
    .field-group input[type=datetime-local].disabled,
    .field-group input[type=tel].disabled,
    .field-group input[type=number].disabled,
    .field-group input[type=search].disabled,
    .field-group select.disabled, .field-group textarea.disabled {
      background-color: #F1F3F6; }
    .field-group input:not([type]):disabled,
    .field-group input[type=text]:disabled,
    .field-group input[type=password]:disabled,
    .field-group input[type=email]:disabled,
    .field-group input[type=url]:disabled,
    .field-group input[type=time]:disabled,
    .field-group input[type=date]:disabled,
    .field-group input[type=datetime]:disabled,
    .field-group input[type=datetime-local]:disabled,
    .field-group input[type=tel]:disabled,
    .field-group input[type=number]:disabled,
    .field-group input[type=search]:disabled,
    .field-group select:disabled, .field-group textarea:disabled {
      background-color: #F1F3F6;
      color: #C1C4C9; }
  .field-group input[type=file] {
    font-size: 0.875em;
    color: #5A6170; }
  .field-group input[type=radio], .field-group input[type=checkbox] {
    opacity: 0;
    pointer-events: none;
    position: absolute; }
    .field-group input[type=radio] + label, .field-group input[type=checkbox] + label {
      cursor: pointer;
      font-size: 0.875em;
      margin-bottom: 0.3em; }
      .field-group input[type=radio] + label > span.radio, .field-group input[type=checkbox] + label > span.radio {
        display: inline-block;
        width: 1.5em;
        height: 1.5em;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        -ms-border-radius: 50%;
        border-radius: 50%;
        border: solid 1px #DFE1E8;
        vertical-align: text-bottom;
        margin-right: 0.57142em; }
      .field-group input[type=radio] + label > svg, .field-group input[type=radio] + label > i, .field-group input[type=checkbox] + label > svg, .field-group input[type=checkbox] + label > i {
        font-size: 1.142857em;
        margin-right: 0.57142em;
        top: 0.15em; }
        .field-group input[type=radio] + label > svg.square, .field-group input[type=radio] + label > i.square, .field-group input[type=checkbox] + label > svg.square, .field-group input[type=checkbox] + label > i.square {
          color: #DFE1E8;
          display: inline-block; }
        .field-group input[type=radio] + label > svg.check-square-fill, .field-group input[type=radio] + label > i.check-square-fill, .field-group input[type=checkbox] + label > svg.check-square-fill, .field-group input[type=checkbox] + label > i.check-square-fill {
          color: #28A3AC;
          display: none; }
    .field-group input[type=radio]:checked + label > span, .field-group input[type=checkbox]:checked + label > span {
      position: relative; }
      .field-group input[type=radio]:checked + label > span::before, .field-group input[type=checkbox]:checked + label > span::before {
        content: '';
        position: absolute;
        width: 0.85714em;
        height: 0.85714em;
        background-color: #28A3AC;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        -ms-border-radius: 50%;
        border-radius: 50%;
        left: 50%;
        top: 50%;
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%); }
    .field-group input[type=radio]:checked + label > svg.square, .field-group input[type=radio]:checked + label > i.square, .field-group input[type=checkbox]:checked + label > svg.square, .field-group input[type=checkbox]:checked + label > i.square {
      display: none; }
    .field-group input[type=radio]:checked + label > svg.check-square-fill, .field-group input[type=radio]:checked + label > i.check-square-fill, .field-group input[type=checkbox]:checked + label > svg.check-square-fill, .field-group input[type=checkbox]:checked + label > i.check-square-fill {
      display: inline-block; }
  .field-group input[type=checkbox].disable + label > svg, .field-group input[type=checkbox].disable + label > i {
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    border-radius: 4px; }
    .field-group input[type=checkbox].disable + label > svg::before, .field-group input[type=checkbox].disable + label > i::before {
      background-color: #C1C4C9; }
  .field-group button {
    padding: 0.2em 0.80em 0.3em;
    min-width: 5em; }
  .field-group select {
    padding: 0.3em 0.5em 0.42em; }
  .field-group .disabled-input {
    display: block;
    width: 100%;
    border: 1px solid #DFE1E8;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    border-radius: 4px;
    background-color: #DFE1E8;
    color: #5A6170;
    font-size: 0.875em;
    padding: 0.325em 0.7857em; }
  .field-group button {
    background-color: #28A3AC;
    color: #ffffff;
    font-size: 0.875em;
    font-weight: 600;
    padding: 0.3em 1em 0.35em;
    min-width: 6.58714em; }
    .field-group button[type=reset] {
      background-color: #fff;
      color: #5A6170;
      border: 1px solid #DFE1E8; }
    .field-group button.btn2 {
      padding: calc(0.3em - 1px) 1em calc(0.35em - 1px); }
  .field-group span {
    font-size: 0.75em; }
  .field-group.view > label {
    color: #838894;
    margin-bottom: 0; }
  .field-group.view div[data-field] {
    font-size: 0.875em; }
    .field-group.view div[data-field] span {
      font-size: 1em; }
  .field-group.view .status {
    font-size: 0.875em;
    position: relative;
    padding-left: 1em;
    color: #404653 !important; }
    .field-group.view .status::before {
      content: '';
      display: inline-block;
      position: absolute;
      width: 0.5714em;
      height: 0.5714em;
      left: 0;
      top: 55.5%;
      -webkit-transform: translateY(-50%);
      -moz-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      transform: translateY(-50%);
      -webkit-border-radius: 50%;
      -moz-border-radius: 50%;
      -ms-border-radius: 50%;
      border-radius: 50%; }
    .field-group.view .status.success::before {
      background-color: #0FC445; }
    .field-group.view .status.warning::before {
      background-color: #F47B27; }
    .field-group.view .status.disable::before {
      background-color: #838894; }

.datepicker-wrapper {
  position: relative; }
  .datepicker-wrapper::before {
    content: '';
    background-image: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='%23838894' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z'/><path d='M11 6.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1z'/></svg>");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    position: absolute;
    left: 8px;
    top: 55%;
    width: 14px;
    height: 14px;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%); }
  .datepicker-wrapper input {
    padding-left: 2em !important; }
  .datepicker-wrapper.end::before {
    background-image: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='%23838894' xmlns='http://www.w3.org/2000/svg'><path d='M14 0H2a2 2 0 00-2 2v12a2 2 0 002 2h12a2 2 0 002-2V2a2 2 0 00-2-2zM1 3.857C1 3.384 1.448 3 2 3h12c.552 0 1 .384 1 .857v10.286c0 .473-.448.857-1 .857H2c-.552 0-1-.384-1-.857V3.857z'></path><path d='M6.5 7a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm-9 3a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm-9 3a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2zm3 0a1 1 0 100-2 1 1 0 000 2z'></path></svg>"); }

form {
  -moz-transition: opacity 0.3s ease;
  -o-transition: opacity 0.3s ease;
  -webkit-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease; }
  form button > .lds-grid {
    opacity: 0;
    pointer-events: none;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease; }
  form.process {
    pointer-events: none;
    opacity: 0.5; }
    form.process button > .lds-grid {
      opacity: 1;
      transform: translate(-50%, -50%) scale(0.5); }
    form.process button > span {
      color: transparent; }

input[type=number] {
  padding-right: 0 !important; }

#login_left {
  width: 35%;
  display: none;
  height: auto;
  min-height: 100vh;
  background: #fff url(../images/login_bg.jpg) center center no-repeat;
  background-size: cover; }

#login_right {
  width: 100%;
  height: auto;
  min-height: 100vh;
  position: relative; }

#login_box {
  left: 50%;
  top: calc(50% - 2em);
  position: relative;
  display: inline-block;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 26em;
  max-width: calc(100% - 2em); }
  #login_box h1 {
    color: #31394C;
    font-size: 2.125em;
    font-weight: 600; }
    #login_box h1 span {
      font-size: 14px; }
  #login_box h2 {
    color: #28A3AC;
    font-size: 1.25em;
    font-weight: 600; }
  #login_box .inner {
    margin-top: 1.5625em; }
  #login_box hr {
    border-top: solid 1px #DFE1E8;
    position: relative;
    margin: 1.6em 0; }
    #login_box hr::before {
      position: absolute;
      content: 'or';
      left: 50%;
      top: calc(50% - 0.2em);
      -webkit-transform: translate(-50%, -50%);
      -moz-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
      padding: 0 1em;
      background-color: #fff;
      color: #838894; }

#btn_google_sigin img {
  width: 20px;
  height: auto;
  vertical-align: text-bottom;
  margin-right: 0.8em; }
#btn_google_sigin:hover {
  background-color: white; }
#btn_google_sigin .abcRioButton {
  width: 100% !important; }

#login_logo {
  width: 267px;
  height: auto;
  left: calc(50% + 10px);
  top: calc(50% - 50px);
  position: relative;
  display: inline-block;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%); }

.login-error > svg, .login-error > i {
  font-size: 1.25em;
  margin-right: 0.5em; }

#footer_credit {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  color: #838894;
  font-size: 0.75em;
  padding: 1.5833em 1em;
  text-align: center; }

@media (min-width: 1200px) {
  #login_left {
    display: block; }

  #login_right {
    width: 65%; } }

/*# sourceMappingURL=login.css.map */