/********** Template CSS **********/
:root {
  --primary: #0cb01c;
  --primary-dark: #024c26;
  --secondary: #f65005;
  --light: #f7f8fc;
  --dark: #4a4a4a;
}

body,
.container-fluid,
.container,
.navbar {
  font-family: "Sarabun", sans-serif;
  font-style: normal;
}
h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
  font-family: "Sarabun", sans-serif;
  color: var(--primary-dark);
}

.info-icons .card {
  border-radius: 18px;
  height: 168px;
  background: #f4f4f4;
}
/* .info-icons-card:hover .card {
  background: var(--primary);
} */
/* .info-icons-card:hover .card p {
  color: #fff;
} */
.info-icons-card .card {
  height: 175px;
  border-radius: 10px;
}
.info-icons-card .card p {
  font-size: 16px;
}
.info-icons-card img {
  width: 90px;
}

/*** Data Report ***/
.accordion-body img {
  max-height: 600px;
}
table.data-report-tbl td {
  padding: 5px;
}
.accordion-header button {
  color: green !important;
  font-weight: bold;
}
.accordion-header span {
  color: red !important;
  font-weight: bold;
}
.qrcode img {
  max-width: 200px;
}
.text-red {
  color: red;
}
.btn {
  font-weight: 500;
  transition: 0.5s;
  border-radius: 8px;
}
.btn.btn-primary,
.btn.btn-secondary,
.btn.btn-outline-primary:hover,
.btn.btn-outline-secondary:hover {
  color: #ffffff;
}

/*** Form ***/
.form-mobile {
  padding-left: 50px;
  padding-right: 50px;
}
.display-form input[type="text"],
.display-form input[type="datetime-local"],
.display-form input[type="tel"] {
  border-radius: 8px;
  height: 40px;
  line-height: 1.64;
  display: block;
  width: 100%;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  color: #555;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  appearance: none;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.display-form .input-group input[type="text"] {
  position: relative;
  flex: 1 1 auto;
  width: 1%;
  min-width: 0;
}
.display-form textarea {
  min-height: calc(1.5em + 0.75rem + 2px);
  border-radius: 8px !important;
  line-height: 1.64;
  display: block;
  width: 100%;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #555;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  appearance: none;
  border-radius: 0;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  resize: vertical;
}
.display-form input[type="file"]:disabled,
.display-form input[type="file"]:read-only {
  background-color: #fff;
  opacity: 1;
}
.display-form input[type="file"] {
  overflow: hidden;
  border-radius: 8px;
  height: 40px;
  /* line-height: 1.64; */
  display: block;
  width: 100%;
  padding: 0.3rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  color: #555;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  appearance: none;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

/*** Vote Result ***/
.vote-card {
  width: 400px;
  border-radius: 5px;
}
.vote-card > .card-header {
  background-color: #0cb01c;
  color: white;
  border-radius: 5px 5px 0px 0px;
}
.vote-card p {
  font-size: 16px;
}
.vote-item > .progress > .progress-bar {
  border-radius: 0px 10px 10px 0;
}
.progress-bar.color1 {
  background-color: rgb(60, 184, 21);
}
.progress-bar.color2 {
  background-color: rgb(21, 142, 184);
}
.progress-bar.color3 {
  background-color: rgb(145, 21, 184);
}
.progress-bar.color4 {
  background-color: rgb(184, 64, 21);
}
.progress-bar.color5 {
  background-color: #b8153c;
}
.vote-item > h6 {
  font-size: 16px;
}
.vote-item .progress {
  height: 20px;
}

/*** Vote Data ***/
.data-item img {
  width: 150px;
  margin: 0 auto;
}
.data-item > h4 {
  font-size: 18px;
}
.data-item > h5 {
  font-size: 14px;
  color: black;
  font-weight: normal;
}
.data-item > h6 {
  font-size: 14px;
  color: black;
  font-weight: normal;
}
.data-item {
  width: 250px;
}
.card {
  border-radius: 10px;
}
form#form_data p {
  margin-left: 0 !important;
}