/* Imported lib */
@import url('lib/normalize.css');
@import url('lib/basic.css');
@import url('lib/dropzone.min.css');
@import url('lib/pikaday.css');
@import url('lib/selectize.css');
@import url('lib/selectize.bootstrap5.css');
@import url('lib/sweetalert2.min.css');
@import url('lib/tabulator_bootstrap5.min.css');
@import url('lib/bootstrap.min.css');
@import url("lib/fancy/fancybox.css");
@import url("lib/fancy/panzoom.css");
@import url("lib/fullcalendar.min.css");
@import url("lib/filepond.min.css");
@import url("lib/jquery.timepicker.min.css");
/* Google Fonts */

/* @import url('https://fonts.googleapis.com/css2?family=Mitr:wght@400;600&display=swap'); */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Chonburi&display=swap');

/* Custom for template */
@import url('./agt_bs5.css');
@import url('./agt_custom.css');

.forcedHidden,
.forcedHidden label,
.forcedHidden input,
.forcedHidden select,
.forcedHidden button,
.forcedHidden textarea,
.forcedHidden span,
.forcedHidden div {
  display: none !important;
}

/* Side menu */
#sidenavOffcanvas {
  width: 300px;
  /* left: -200px; */
  left: 0;
  background-color: #fff;
  height: 100vh;
  position: absolute;
  z-index: 202;
  top: 0;
  border-right: 1px solid #aaa;
  transition: transform 0.3s;
  -webkit-box-shadow: 4px 4px 5px 1px rgba(0, 0, 0, 0.15);
  box-shadow: 4px 4px 5px 1px rgba(0, 0, 0, 0.15);
}

#sidenavOffcanvas.opened {
  transform: translate(0px, 0);
}

#sidenavOffcanvas.closed {
  transform: translate(-300px, 0);
}

#backdrop {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 201;
  position: absolute;
  top: 0;
  left: 0;
}

/* Footer */
#footer_v2 {
  color: #888 !important;
  background-color: #fff !important;
  border: 1px solid #ddd;
}

/* Custom CSS */

/* * { font-family: 'Mitr', sans-serif; } */
* {
  font-family: 'Noto Sans Thai', sans-serif;
}

html,
body {
  height: 100%;
}

body {
  background-color: #ffffff;
  /* background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80' width='80' height='80'%3E%3Cpath fill='%23f5f5f5' fill-opacity='1' d='M14 16H9v-2h5V9.87a4 4 0 1 1 2 0V14h5v2h-5v15.95A10 10 0 0 0 23.66 27l-3.46-2 8.2-2.2-2.9 5a12 12 0 0 1-21 0l-2.89-5 8.2 2.2-3.47 2A10 10 0 0 0 14 31.95V16zm40 40h-5v-2h5v-4.13a4 4 0 1 1 2 0V54h5v2h-5v15.95A10 10 0 0 0 63.66 67l-3.47-2 8.2-2.2-2.88 5a12 12 0 0 1-21.02 0l-2.88-5 8.2 2.2-3.47 2A10 10 0 0 0 54 71.95V56zm-39 6a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm40-40a2 2 0 1 1 0-4 2 2 0 0 1 0 4zM15 8a2 2 0 1 0 0-4 2 2 0 0 0 0 4zm40 40a2 2 0 1 0 0-4 2 2 0 0 0 0 4z'%3E%3C/path%3E%3C/svg%3E"); */
}

body>#footer_v2 {
  position: sticky;
  top: 100vh;
}

#header_center_top .title,
#footer_v2 .title {
  font-family: 'Chonburi', cursive !important;
}

header li a.dropdown-item {
  font-size: 0.9rem;
  color: #888;
  padding: 8px 16px;
}

header li a.dropdown-item:hover,
header li a.dropdown-item:active {
  color: #000 !important;
}

#headerClockTime {
  font-family: monospace !important;
}

input,
textarea,
select,
.selectize-input {
  background: rgb(255, 255, 255);
  background: linear-gradient(135deg, rgba(255, 255, 255, 1) 70%, rgba(238, 238, 255, 0.3) 100%);
}

input:required,
textarea:required,
select:required,
.selectize-input.required {
  border-color: #faa;
  background: rgb(255, 255, 255);
  background: linear-gradient(135deg, rgba(255, 255, 255, 1) 70%, rgba(255, 238, 238, 1) 100%);
}

input:disabled,
textarea:disabled,
select:disabled {
  border-color: #ccc;
  background: #eee !important;
  /* background: linear-gradient(135deg, rgba(245,245,245,1) 70%, rgba(230,230,230,1) 100%); */
}

label {
  display: block;
  padding: 8px 0 4px 0;
}

label.required {
  color: #842029;
}

label.required::before {
  content: "* ";
  color: #f00;
}

label.input-optional::before {
  content: "\25B8 ";
  color: #ced4da;
}

label.disabled,
label.required.disabled {
  color: #aaa;
  font-style: italic;
}

label.disabled::before {
  content: "";
}

input:focus,
textarea:focus,
select:focus {
  border: 1px solid rgba(0, 0, 255, 1);
}

input:required:focus,
textarea:required:focus,
select:required:focus {
  border: 1px solid rgba(255, 0, 0, 1);
}

main>.row {
  padding: 16px 0 4px 0;
  margin-top: 8px;
  background-color: #fff;
  border-radius: 8px;
  border: 4px double #ddd;
}

.maintitle {
  font-size: 1.5rem;
  background: rgb(255, 255, 255);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 40%, rgba(238, 238, 238, 0.5) 100%);
}

.subtitle {
  background: rgb(245, 245, 245);
  background: linear-gradient(90deg, rgba(245, 245, 255, 1) 0%, rgba(225, 235, 238, 1) 100%);
  box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 4px 0px inset;
}

#loading {
  z-index: 1000;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
}

.swal2-confirm {
  background-color: #007bff !important;
  color: #fff !important;
  border-color: #007bff !important;
}

.swal2-confirm:hover {
  background-color: #0062cc !important;
  border-color: #005cbf !important;
}

.swal2-confirm:focus {
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5) !important;
}

.grid {
  /* position: absolute;
  width: 520px;
  height: 670px;
  top:1900; */
  /* margin-left: 10%;
  margin-right: 10%; */  
  /* background:
    linear-gradient(to right, transparent 33.33%, rgba(255, 255, 255, .5) 33.33%, rgba(255, 255, 255, .5) 33.5%, transparent 33.5%, transparent 66.66%, rgba(255, 255, 255, .5) 66.66%, rgba(255, 255, 255, .5) 66.83%, transparent 66.83%),
    linear-gradient(to bottom, transparent 33.33%, rgba(255, 255, 255, .5) 33.33%, rgba(255, 255, 255, .5) 33.5%, transparent 33.5%, transparent 66.66%, rgba(255, 255, 255, .5) 66.66%, rgba(255, 255, 255, .5) 66.83%, transparent 66.83%);
pointer-events: none; */
background:
    linear-gradient(to right, transparent 33.1%, white 33.33%, white 33.5%, transparent 33.5%, transparent 66.43%, white 66.66%, white 66.83%, transparent 66.83%),
    linear-gradient(to bottom, transparent 33.1%, white 33.33%, white 33.5%, transparent 33.5%, transparent 66.43%, white 66.66%, white 66.83%, transparent 66.83%);
  background-size: 100% 100%;
  pointer-events: none;
}


.btn-Hover {
  transition: background-color 0.3s, color 0.3s, font-weight 0.3s;
}

.btn-Hover:hover {
  background-color: #0080FF;
  color: white;
  font-weight: bold;
}

input:required.border-valid-important {
  border: 3px solid green !important;
}
input:required.border-invalid-important {
  border: 3px solid red !important;
}

input[readonly], select[readonly], textarea[readonly], .selectize-input.locked {
  background: #f9f5f6a8 !important;
  pointer-events: none;
}


.ui-timepicker-container{
  z-index: 1 !important;
}