@charset "UTF-8";
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

body {
  line-height: 1;
}

ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

body,
html {
  height: 100%;
}

body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  max-height: 100%;
  line-height: 1.5;
  background-color: #E9EDED;
  font-family: "微軟正黑體", sans-serif;
}
body img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}
body a {
  text-decoration: none;
}

.wrap {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 0%;
          flex: 1 1 0%;
  margin: 80px 0 120px;
  position: relative;
}
@media (max-width: 768px) {
  .wrap {
    margin: 60px 0;
  }
}
@media (max-width: 576px) {
  .wrap {
    margin: 30px 0;
  }
}

select {
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  background: url("https://api.iconify.design/mdi/triangle-down.svg?color=%2361b136") no-repeat right 5px center;
  background-size: 20px 20px;
}

.gotop {
  cursor: pointer;
}
.gotop div {
  width: 40px;
  height: 40px;
  position: fixed;
  bottom: 80px;
  right: 20px;
  border-radius: 50%;
  background: #61B136;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.gotop div iconify-icon {
  color: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.asideNav {
  width: 320px;
  height: 100%;
  background-color: #1D5057;
  position: absolute;
  left: 0%;
  top: 0;
  z-index: 99;
  -webkit-transition: 0.5s;
  transition: 0.5s;
  -webkit-transform: translateX(-320px);
          transform: translateX(-320px);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 40px 40px 0 40px;
}
.asideNav.active {
  -webkit-transform: translateX(0px);
          transform: translateX(0px);
}
.asideNav .asideList {
  width: 100%;
  margin-top: 80px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 10px;
  overflow: auto;
  margin-bottom: 20px;
}
.asideNav .asideList .user {
  display: none;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  color: #fff;
  gap: 0 10px;
  border-bottom: 1px solid #3E6259;
  padding-bottom: 10px;
  margin-bottom: 10px;
}
.asideNav .asideList .mainLink {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  background-color: #61B136;
  color: #fff;
  border-radius: 20px;
  padding: 10px 20px 10px 50px;
  position: relative;
}
.asideNav .asideList .mainLink::after {
  content: "";
  display: block;
  position: absolute;
  width: 20px;
  height: 20px;
  left: 20px;
}
.asideNav .asideList .mainLink .dot {
  width: 30px;
  height: 30px;
  background: #E43D3D;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  color: #FFFFFF;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  right: 10px;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.asideNav .asideList .mainLink div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 10px;
}
.asideNav .asideList .mainLink.active, .asideNav .asideList .mainLink:hover {
  background-color: #BBDC2F;
  color: #000;
}
.asideNav .asideList .mainLink.active .arrow, .asideNav .asideList .mainLink:hover .arrow {
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}
.asideNav .asideList .mainLink.announcemet::after {
  background: url("../tw_img/icon/announcementw.png") no-repeat center;
  background-size: contain;
}
.asideNav .asideList .mainLink.owner::after {
  background: url("../tw_img/icon/ownerw.png") no-repeat center;
  background-size: contain;
}
.asideNav .asideList .mainLink.survey::after {
  background: url("../tw_img/icon/surveyw.png") no-repeat center;
  background-size: contain;
}
.asideNav .asideList .mainLink.projectProgress::after {
  background: url("../tw_img/icon/projectw.png") no-repeat center;
  background-size: contain;
}
.asideNav .asideList .mainLink.workProgress::after {
  background: url("../tw_img/icon/workw.png") no-repeat center;
  background-size: contain;
}
.asideNav .asideList .mainLink.materialSign::after {
  background: url("../tw_img/icon/materialSignw.png") no-repeat center;
  background-size: contain;
}
.asideNav .asideList .mainLink.reissueTable::after {
  background: url("../tw_img/icon/reissuew.png") no-repeat center;
  background-size: contain;
}
.asideNav .asideList .mainLink.waybill::after {
  background: url("../tw_img/icon/waybillW.png") no-repeat center;
  background-size: contain;
}
.asideNav .asideList .mainLink.changePW::after {
  background: url("../tw_img/icon/changePWw.png") no-repeat center;
  background-size: contain;
}
.asideNav .asideList .mainLink.logout::after {
  background: url("../tw_img/icon/logoutw.png") no-repeat center;
  background-size: contain;
}
.asideNav .asideList .main > li {
  margin-bottom: 10px;
}
.asideNav .asideList .main > li:last-child {
  margin-bottom: 0;
}
.asideNav .asideList .sub {
  margin-top: 10px;
}
.asideNav .asideList .sub a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 10px;
  color: #fff;
  border-radius: 20px;
  padding: 10px 20px;
}
.asideNav .asideList .sub a:hover, .asideNav .asideList .sub a.active {
  background-color: #3E6259;
}
@media (max-width: 576px) {
  .asideNav {
    width: 250px;
  }
  .asideNav .asideList {
    margin-top: 0;
  }
  .asideNav .asideList .user {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 0 5px;
  }
}

.breadCrumb {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 5px;
  margin-bottom: 20px;
}
.breadCrumb li:last-child {
  color: #61B136;
}

.pagination {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 8px;
}
.pagination li:first-child a, .pagination li:last-child a {
  display: block;
  color: #fff;
  background-color: #61B136;
  border-radius: 5px;
  padding: 10px 16px;
}
.pagination li a {
  display: block;
  color: #B3B3B3;
  background-color: #FFFFFF;
  border-radius: 5px;
  padding: 10px 16px;
  border: 1px solid transparent;
}
.pagination li a:hover, .pagination li a.active {
  border: 1px solid #61B136;
  background-color: #dff0c9;
  color: #29590F;
}
@media (max-width: 576px) {
  .pagination li:first-child a, .pagination li:last-child a {
    display: block;
    color: #fff;
    background-color: #61B136;
    border-radius: 5px;
    padding: 10px 5px;
    font-size: 14px;
  }
}

.pageTitle {
  background-color: #DFF0C9;
  color: #61B136;
  padding: 20px 40px;
  font-size: 24px;
  font-weight: bold;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.pageTitle::before {
  content: "";
  display: block;
  position: absolute;
  width: 16px;
  height: 24px;
  background-color: #61B136;
  top: 50%;
  left: -4px;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

.search {
  width: 114px;
  height: 40px;
  border: none;
  background-color: #61B136;
  border-radius: 20px;
  padding: 10px;
  color: #fff;
  -ms-flex-item-align: end;
      align-self: flex-end;
}

.add a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-left: auto;
  margin-bottom: 20px;
  width: 40px;
  height: 40px;
  background-color: #61B136;
  border-radius: 50%;
}
.add a iconify-icon {
  color: #fff;
}

.btnGroup {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 20px;
  padding-bottom: 30px;
}
.btnGroup .back {
  background-color: #7CC953;
  border-radius: 20px;
  padding: 10px 40px;
  color: #fff;
}
.btnGroup .send {
  background-color: #61B136;
  border-radius: 20px;
  padding: 10px 40px;
  color: #fff;
  border: none;
}

.uploadList .inputArea {
  width: 100%;
}

.uploadArea {
  width: calc(100% - 120px);
  position: relative;
}
.uploadArea > div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0 20px;
}
.uploadArea input[type=file] {
  display: none;
}
.uploadArea label {
  width: 82px;
  height: 30px;
  background-color: #61B136;
  border-radius: 5px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.uploadArea label iconify-icon {
  color: #fff;
}
.uploadArea .fileNameList {
  width: 100%;
  margin: 20px auto 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.uploadArea .fileNameList li {
  width: 200px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 10px;
}
.uploadArea .fileNameList li div {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 10px;
}
.uploadArea .fileNameList li div span {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.uploadArea .removeButton {
  border: none;
  background: transparent;
}
.uploadArea .removeButton iconify-icon {
  vertical-align: middle;
  color: #61B136;
}
.uploadArea .downloadBtn {
  color: #fff;
  background: #61B136;
  border-radius: 5px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 60px;
  padding: 5px;
}
@media (max-width: 375px) {
  .uploadArea .uploadArea {
    width: 100%;
  }
}

header {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background-color: rgba(255, 255, 255, 0.8);
}
header h1 a {
  display: block;
  width: 240px;
  height: 120px;
  background: url("../tw_img/logo/logo2.png") no-repeat center;
  background-size: contain;
  white-space: nowrap;
  text-indent: 101%;
  overflow: hidden;
}
header .hamNav {
  position: absolute;
  left: 0;
  top: 0;
  width: 120px;
  height: 120px;
  background-color: #61B136;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  cursor: pointer;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}
header .hamNav.active {
  -webkit-transform: translateX(320px);
          transform: translateX(320px);
  border-radius: 0px 80px 80px 0px;
}
header .hamNav .hamBtn {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 10px;
}
header .hamNav .hamBtn div {
  width: 48px;
  height: 2px;
  background-color: #fff;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}
header .hamNav .hamBtn.active div:first-child {
  -webkit-transform: translateY(12px) rotate(-45deg);
          transform: translateY(12px) rotate(-45deg);
}
header .hamNav .hamBtn.active div:nth-child(2) {
  opacity: 0;
  -webkit-transform: translateX(-20px);
          transform: translateX(-20px);
}
header .hamNav .hamBtn.active div:last-child {
  -webkit-transform: translateY(-12px) rotate(45deg);
          transform: translateY(-12px) rotate(45deg);
}
header .userInfo {
  position: absolute;
  right: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 20px;
  margin-right: 30px;
}
header .userInfo p {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 10px;
}
header .userInfo p iconify-icon {
  color: #61B136;
}
header .userInfo a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 10px;
  color: #fff;
  background-color: #61b136;
  border-radius: 20px;
  padding: 10px 20px;
}
header .userInfo a iconify-icon {
  color: #fff;
}
@media (max-width: 992px) {
  header h1 a {
    height: 90px;
  }
  header .userInfo {
    margin-right: 20px;
  }
  header .userInfo a {
    display: none;
  }
  header .hamNav {
    width: 90px;
    height: 90px;
  }
}
@media (max-width: 576px) {
  header h1 a {
    height: 70px;
  }
  header .userInfo {
    margin-right: 20px;
  }
  header .userInfo p {
    display: none;
  }
  header .hamNav {
    width: 70px;
    height: 70px;
  }
  header .hamNav.active {
    -webkit-transform: translateX(250px);
            transform: translateX(250px);
  }
}
@media (max-width: 375px) {
  header {
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
  }
}

footer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 0 20px;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  background-color: #61B136;
  text-align: center;
  color: #fff;
  padding: 10px;
}
footer a {
  color: #fff;
}

.index {
  background: url("../tw_img/background/indexBG.png") no-repeat center;
  background-size: cover;
  position: relative;
}
.index.wrap {
  margin: 0;
}
.index ul {
  width: 90%;
  max-width: 1085px;
  padding: 120px 80px;
  margin: 170px auto;
  background-color: rgba(255, 255, 255, 0.6);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 40px;
}
.index ul.row > * {
  padding: 0;
}
.index ul li {
  width: calc((100% - 80px) / 3);
}
.index ul li a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 30px;
  background-color: #FFFFFF;
  -webkit-box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.12);
          box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.12);
  border-radius: 5px;
  color: #272925;
  padding: 20px 0;
  font-weight: bold;
  position: relative;
}
.index ul li a img {
  width: 40px;
  height: 40px;
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: center;
     object-position: center;
}
.index ul li a .dot {
  width: 30px;
  height: 30px;
  background: #E43D3D;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  color: #FFFFFF;
  border-radius: 50%;
  position: absolute;
  top: -15px;
  right: -15px;
}
@media (max-width: 992px) {
  .index ul li a {
    gap: 10px;
  }
}
@media (max-width: 768px) {
  .index ul {
    padding: 80px 60px;
    margin: 100px auto;
  }
  .index ul li {
    width: calc((100% - 40px) / 2);
  }
}
@media (max-width: 576px) {
  .index ul {
    width: 100%;
    padding: 20px;
    margin: 40px auto;
    gap: 20px;
  }
  .index ul li {
    width: calc((100% - 20px) / 2);
  }
  .index ul li a {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}

.login {
  width: 100%;
  height: 100vh;
  background: url("../tw_img/background/indexBG.png") no-repeat center;
  background-size: cover;
  position: relative;
}
.login .box {
  position: absolute;
  width: 120px;
  height: 120px;
  background-color: #61B136;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
.login .loginTitle {
  margin-top: 160px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.login .loginTitle h2 {
  font-size: 48px;
  font-weight: bold;
  color: #fff;
  text-shadow: 0 0 12px rgba(0, 65, 131, 0.5);
  letter-spacing: 2em;
  margin-bottom: 40px;
}
.login .loginTitle p {
  font-weight: bold;
  color: #fff;
  text-shadow: 0 0 12px rgba(0, 65, 131, 0.5);
  letter-spacing: 0.6em;
}
.login form {
  width: 95%;
  max-width: 460px;
  position: absolute;
  top: 60%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  background-color: rgba(255, 255, 255, 0.8);
  -webkit-box-shadow: 4px 4px 20px rgba(0, 0, 0, 0.25);
          box-shadow: 4px 4px 20px rgba(0, 0, 0, 0.25);
  border-radius: 5px;
  padding: 30px 70px 40px 70px;
}
.login form .logo {
  display: block;
  margin: 0 auto 30px;
}
.login form > div {
  background-color: #61B136;
  border-radius: 5px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 25px 20px 18px 20px;
}
.login form > div h3 {
  font-size: 18px;
  color: #fff;
  margin-bottom: 24px;
  font-weight: bold;
}
.login form > div input {
  width: 100%;
  border: none;
  outline: none;
  padding: 10px 20px;
  background-color: linear-gradient(0deg, #F2F2F2, #F2F2F2), #F3FFE7;
  -webkit-box-shadow: inset 2px 2px 8px rgba(0, 0, 0, 0.16);
          box-shadow: inset 2px 2px 8px rgba(0, 0, 0, 0.16);
  border-radius: 5px;
  margin-bottom: 12px;
}
.login form > div button {
  width: 100%;
  border: none;
  padding: 12px;
  background-color: #1D5057;
  border-radius: 5px;
  color: #fff;
}
.login form .eyeArea {
  width: 100%;
  position: relative;
  margin-bottom: 20px;
}
.login form .eyeArea input {
  margin-bottom: 0;
}
.login form .eyeArea iconify-icon {
  position: absolute;
  top: 50%;
  right: 23px;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  cursor: pointer;
  color: #999999;
}
@media (max-width: 1200px) {
  .login .loginTitle h2 {
    letter-spacing: 1.5em;
  }
}
@media (max-width: 992px) {
  .login .loginTitle h2 {
    letter-spacing: 1em;
  }
}
@media (max-width: 768px) {
  .login .loginTitle h2 {
    letter-spacing: 0.5em;
    font-size: 30px;
  }
}
@media (max-width: 576px) {
  .login .box {
    width: 80px;
    height: 80px;
  }
  .login .loginTitle {
    margin-top: 100px;
  }
  .login .loginTitle h2 {
    margin-bottom: 20px;
  }
  .login form {
    padding: 30px 50px;
    top: 55%;
  }
}
@media (max-width: 375px) {
  .login form {
    padding: 20px;
  }
}

.changePW form .formContent {
  -webkit-box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.12);
          box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.12);
  background-color: #FFFFFF;
  border-radius: 5px;
  margin-bottom: 40px;
}
.changePW form .formContent .inputContent {
  width: 60%;
  padding: 16px 40px;
}
.changePW form .formContent .inputArea {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0 10px;
  margin-bottom: 20px;
}
.changePW form .formContent .title {
  width: 100px;
}
.changePW form .formContent input {
  width: calc(100% - 110px);
  border: none;
  outline: none;
  background-color: #F9F9F9;
  -webkit-box-shadow: inset 1px 1px 4px rgba(0, 0, 0, 0.25);
          box-shadow: inset 1px 1px 4px rgba(0, 0, 0, 0.25);
  border-radius: 5px;
  padding: 10px 12px;
}
@media (max-width: 992px) {
  .changePW form .formContent .inputContent {
    width: 90%;
  }
}
@media (max-width: 768px) {
  .changePW form .formContent .inputContent {
    width: 100%;
    padding: 16px 20px;
  }
}
@media (max-width: 375px) {
  .changePW form .formContent .inputArea {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
  }
  .changePW form .formContent .inputArea input {
    width: 100%;
  }
}

.projectProgress form {
  width: 100%;
  -webkit-box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.12);
          box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.12);
  border-radius: 5px;
  padding: 16px 40px;
  margin-bottom: 20px;
  gap: 10px;
  background-color: #FFFFFF;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.projectProgress form .inputData {
  width: 100%;
}
.projectProgress form .inputArea {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.projectProgress form .inputArea .title {
  width: 60px;
}
.projectProgress form .inputArea input[type=text] {
  width: calc(100% - 70px);
  border: none;
  outline: none;
  background-color: #F9F9F9;
  -webkit-box-shadow: inset 1px 1px 4px rgba(0, 0, 0, 0.25);
          box-shadow: inset 1px 1px 4px rgba(0, 0, 0, 0.25);
  border-radius: 5px;
  padding: 10px 12px;
}
.projectProgress .pageContent {
  padding: 40px;
  background-color: #FFFFFF;
  -webkit-box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.12);
          box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.12);
  border-radius: 5px;
  margin-bottom: 40px;
}
.projectProgress .mainUl .mainList {
  border-radius: 5px;
  margin-bottom: 3px;
}
.projectProgress .mainUl .mainList:last-child {
  margin-bottom: 0;
}
.projectProgress .mainUl .mainList:nth-child(odd) {
  background-color: #F2F2F2;
}
.projectProgress .mainUl .mainList:nth-child(even) {
  background-color: #E7E7E7;
}
.projectProgress .mainUl .mainList:hover {
  background-color: #DFF0C9;
}
.projectProgress .mainUl .mainList a {
  color: #000;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 12px 12px 12px 40px;
}
.projectProgress .mainUl .mainList .text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 10px 40px;
}
.projectProgress .mainUl .mainList .text span {
  font-size: 20px;
  font-weight: bold;
}
.projectProgress .mainUl .mainList .progressCircle {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  position: relative;
}
.projectProgress .mainUl .mainList .progressCircle .progressText {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 40px;
  height: 40px;
  background-color: #F2F2F2;
  border-radius: 50%;
  color: #000;
}
@media (max-width: 992px) {
  .projectProgress .mainUl .mainList .text {
    width: 70%;
  }
}
@media (max-width: 768px) {
  .projectProgress form {
    padding: 16px 20px;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .projectProgress .pageContent {
    padding: 20px;
  }
  .projectProgress .mainUl .mainList a {
    padding: 12px 12px 12px 20px;
  }
}
@media (max-width: 375px) {
  .projectProgress form .inputArea {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
  }
  .projectProgress form .inputArea input[type=text] {
    width: 100%;
  }
}

.projectProgressDetail form .formContent {
  -webkit-box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.12);
          box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.12);
  background-color: #FFFFFF;
  border-radius: 5px;
  margin-bottom: 40px;
}
.projectProgressDetail form .formContent.step .pageTitle {
  background: #F2F2F2;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 0 20px;
}
.projectProgressDetail form h4 {
  background: #DFF0C9;
  color: #46991A;
  padding: 10px 40px;
  font-size: 20px;
  font-weight: bold;
}
.projectProgressDetail form .checkArea {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  gap: 0 10px;
}
.projectProgressDetail form .checkArea input {
  width: auto;
}
.projectProgressDetail form .checkArea .title {
  width: auto;
}
.projectProgressDetail form .inputContent {
  padding: 16px 40px;
}
.projectProgressDetail form .inputContent.row {
  margin: 0;
}
.projectProgressDetail form .inputArea {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  gap: 0 10px;
  margin-bottom: 20px;
}
.projectProgressDetail form .title {
  width: 130px;
}
.projectProgressDetail form input {
  width: calc(100% - 140px);
  border: none;
  outline: none;
  background-color: #F9F9F9;
  border-radius: 5px;
  padding: 10px 12px;
}
.projectProgressDetail form .radioArea {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  gap: 10px;
}
.projectProgressDetail form .radioArea div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 5px;
}
.projectProgressDetail form .radioArea label {
  white-space: nowrap;
}
.projectProgressDetail form .radioArea input[type=radio] {
  width: auto;
  -webkit-box-shadow: none;
          box-shadow: none;
}
.projectProgressDetail form .uploadArea .fileNameList {
  display: none;
  list-style: none;
}
.projectProgressDetail form .uploadArea .fileNameList li {
  width: 100%;
}
.projectProgressDetail form .uploadArea .fileNameList li div {
  display: block;
}
.projectProgressDetail form .uploadArea .fileNameList li div a {
  word-wrap: break-word;
}
.projectProgressDetail form .uploadArea .fileNameList li div .operateArea {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  margin-top: 10px;
}
.projectProgressDetail form .uploadArea .fileNameList li div .operateArea div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: auto;
}
.projectProgressDetail form .uploadArea .existFile {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 10px;
}
@media (max-width: 992px) {
  .projectProgressDetail form .inputContent.row > * {
    padding: 0;
  }
}
@media (max-width: 768px) {
  .projectProgressDetail form .formContent {
    margin-bottom: 15px;
  }
  .projectProgressDetail form .inputContent {
    padding: 16px 20px;
  }
}
@media (max-width: 576px) {
  .projectProgressDetail form .inputArea {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .projectProgressDetail form .inputArea input[type=text] {
    width: 100%;
  }
  .projectProgressDetail form .uploadArea {
    width: 100%;
  }
}

.workProgress form {
  width: 100%;
  -webkit-box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.12);
          box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.12);
  border-radius: 5px;
  padding: 16px 40px;
  margin-bottom: 20px;
  gap: 10px;
  background-color: #FFFFFF;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.workProgress form .inputData {
  width: 100%;
}
.workProgress form .inputArea {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.workProgress form .inputArea .title {
  width: 60px;
}
.workProgress form .inputArea input[type=text] {
  width: calc(100% - 70px);
  border: none;
  outline: none;
  background-color: #F9F9F9;
  -webkit-box-shadow: inset 1px 1px 4px rgba(0, 0, 0, 0.25);
          box-shadow: inset 1px 1px 4px rgba(0, 0, 0, 0.25);
  border-radius: 5px;
  padding: 10px 12px;
}
.workProgress .pageContent {
  padding: 40px;
  background-color: #FFFFFF;
  -webkit-box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.12);
          box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.12);
  border-radius: 5px;
  margin-bottom: 40px;
}
.workProgress .mainUl .mainList {
  border-radius: 5px;
  margin-bottom: 3px;
}
.workProgress .mainUl .mainList:last-child {
  margin-bottom: 0;
}
.workProgress .mainUl .mainList:nth-child(odd) {
  background-color: #F2F2F2;
}
.workProgress .mainUl .mainList:nth-child(even) {
  background-color: #E7E7E7;
}
.workProgress .mainUl .mainList:hover {
  background-color: #DFF0C9;
}
.workProgress .mainUl .mainList a {
  color: #000;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 12px 12px 12px 40px;
}
.workProgress .mainUl .mainList .text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 10px 40px;
}
.workProgress .mainUl .mainList .text span {
  font-size: 20px;
  font-weight: bold;
}
.workProgress .mainUl .mainList .subList {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.workProgress .mainUl .mainList .subList li {
  border-radius: 5px;
  padding: 10px 20px;
}
.workProgress .mainUl .mainList .subList li.done {
  background-color: #99CA8C;
  color: #FFFFFF;
}
.workProgress .mainUl .mainList .subList li.active {
  background-color: #61B136;
  color: #FFFFFF;
}
.workProgress .mainUl .mainList .subList li.nStart {
  background-color: #CCCCCC;
  color: #4D4D4D;
}
.workProgress .mainUl .mainList .subList li.line {
  padding: 0;
  width: 40px;
}
.workProgress .mainUl .mainList .subList li.line.active {
  border: 1px solid #4E4E4E;
}
.workProgress .mainUl .mainList .subList li.line.nStrat {
  border: 1px dashed #4E4E4E;
}
.workProgress .mainUl .mainList .progressCircle {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  position: relative;
}
.workProgress .mainUl .mainList .progressCircle .progressText {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 40px;
  height: 40px;
  background-color: #F2F2F2;
  border-radius: 50%;
  color: #000;
}
@media (max-width: 992px) {
  .workProgress .mainUl .mainList .text {
    width: 70%;
  }
  .workProgress .mainUl .mainList .subList {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .workProgress .mainUl .mainList .subList li.line {
    width: 1px;
    height: 20px;
  }
}
@media (max-width: 768px) {
  .workProgress form {
    padding: 16px 20px;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .workProgress .pageContent {
    padding: 20px;
  }
  .workProgress .mainUl .mainList a {
    padding: 12px 12px 12px 20px;
  }
}
@media (max-width: 375px) {
  .workProgress form .inputArea {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
  }
  .workProgress form .inputArea input[type=text] {
    width: 100%;
  }
}

.wordProgressDetail .form .formContent {
  -webkit-box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.12);
          box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.12);
  background-color: #FFFFFF;
  border-radius: 5px;
  margin-bottom: 40px;
}
.wordProgressDetail .form .inputContent {
  padding: 16px 40px;
}
.wordProgressDetail .form .inputContent.row {
  margin: 0;
}
.wordProgressDetail .form .inputArea {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  gap: 0 10px;
  margin-bottom: 20px;
}
.wordProgressDetail .form .title {
  width: 130px;
}
.wordProgressDetail .form input {
  width: calc(100% - 140px);
  border: none;
  outline: none;
  background-color: #F9F9F9;
  border-radius: 5px;
  padding: 10px 12px;
}
.wordProgressDetail .form .addArea {
  position: relative;
}
.wordProgressDetail .form .addArea .add {
  position: absolute;
  right: 20px;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.wordProgressDetail .form .addArea .add a {
  margin-bottom: 0;
}
.wordProgressDetail .form .radioArea {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  gap: 10px;
}
.wordProgressDetail .form .radioArea div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 5px;
}
.wordProgressDetail .form .radioArea label {
  white-space: nowrap;
}
.wordProgressDetail .form .radioArea input[type=radio] {
  width: auto;
  -webkit-box-shadow: none;
          box-shadow: none;
}
.wordProgressDetail .form .tableArea {
  padding: 20px;
}
.wordProgressDetail .form .tableArea .table {
  width: 100%;
  border-collapse: collapse;
  display: table;
}
.wordProgressDetail .form .tableArea .thead {
  display: table-row;
}
.wordProgressDetail .form .tableArea .tr {
  display: table-row;
  border-radius: 5px;
  margin-bottom: 3px;
}
.wordProgressDetail .form .tableArea .tr:last-child {
  margin-bottom: 0;
}
.wordProgressDetail .form .tableArea .tr:nth-child(odd) {
  background-color: #F2F2F2;
}
.wordProgressDetail .form .tableArea .tr:nth-child(even) {
  background-color: #E7E7E7;
}
.wordProgressDetail .form .tableArea .tr:hover {
  background-color: #DFF0C9;
}
.wordProgressDetail .form .tableArea .th,
.wordProgressDetail .form .tableArea .td {
  display: table-cell;
  vertical-align: middle;
  padding: 12px 20px;
}
.wordProgressDetail .form .tableArea .th:first-child,
.wordProgressDetail .form .tableArea .td:first-child {
  width: 40%;
}
.wordProgressDetail .form .tableArea .th:nth-child(2),
.wordProgressDetail .form .tableArea .td:nth-child(2) {
  width: 40%;
}
.wordProgressDetail .form .tableArea .th:nth-child(3),
.wordProgressDetail .form .tableArea .td:nth-child(3) {
  width: 10%;
}
.wordProgressDetail .form .tableArea .th:last-child,
.wordProgressDetail .form .tableArea .td:last-child {
  width: 10%;
  text-align: center;
}
.wordProgressDetail .form .tableArea .td.strange {
  color: #FD2D00;
}
.wordProgressDetail .form .tableArea .td.pass {
  color: #42A50E;
}
.wordProgressDetail .form .tableArea .td.notGo {
  color: #000;
}
.wordProgressDetail .form .tableArea a {
  color: #000;
}
.wordProgressDetail .form .progressCircle {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  position: relative;
}
.wordProgressDetail .form .progressCircle .progressText {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 40px;
  height: 40px;
  background-color: #F2F2F2;
  border-radius: 50%;
  color: #000;
}
@media (max-width: 992px) {
  .wordProgressDetail .form .inputContent.row > * {
    padding: 0;
  }
}
@media (max-width: 768px) {
  .wordProgressDetail .form .formContent {
    margin-bottom: 15px;
  }
  .wordProgressDetail .form .inputContent {
    padding: 16px 20px;
  }
}
@media (max-width: 576px) {
  .wordProgressDetail .form .inputArea {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .wordProgressDetail .form .inputArea input[type=text] {
    width: 100%;
  }
  .wordProgressDetail .form .tableArea .table {
    display: block;
    white-space: nowrap;
    overflow-x: scroll;
  }
}

.wordProgressAdd form .formContent {
  -webkit-box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.12);
          box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.12);
  background-color: #FFFFFF;
  border-radius: 5px;
  margin-bottom: 40px;
}
.wordProgressAdd form .formContent .inputContent {
  padding: 16px 40px;
}
.wordProgressAdd form .formContent .inputArea {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  gap: 0 10px;
  margin-bottom: 20px;
}
.wordProgressAdd form .formContent .title {
  width: 120px;
}
.wordProgressAdd form .formContent input,
.wordProgressAdd form .formContent textarea,
.wordProgressAdd form .formContent select {
  width: calc(100% - 130px);
  border: none;
  outline: none;
  background-color: #F9F9F9;
  -webkit-box-shadow: inset 1px 1px 4px rgba(0, 0, 0, 0.25);
          box-shadow: inset 1px 1px 4px rgba(0, 0, 0, 0.25);
  border-radius: 5px;
  padding: 10px 12px;
  resize: none;
}
.wordProgressAdd form .materialList {
  padding: 20px;
}
.wordProgressAdd form .materialList li {
  border-radius: 5px;
  margin-bottom: 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 20px;
  padding: 6px 20px;
}
.wordProgressAdd form .materialList li:last-child {
  margin-bottom: 0;
}
.wordProgressAdd form .materialList li:nth-child(odd) {
  background-color: #F2F2F2;
}
.wordProgressAdd form .materialList li:nth-child(even) {
  background-color: #E7E7E7;
}
.wordProgressAdd form .materialList li:hover {
  background-color: #DFF0C9;
}
.wordProgressAdd form .materialList li .title {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 20px;
}
.wordProgressAdd form .materialList li .title div:first-child {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
.wordProgressAdd form .materialList li .title div:first-child p {
  font-size: 18px;
  font-weight: bold;
}
.wordProgressAdd form .materialList li .title div:first-child p:first-child {
  margin-right: auto;
}
.wordProgressAdd form .materialList li .title div:nth-child(2) {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 10px;
}
.wordProgressAdd form .materialList li .title div:last-child {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 10px;
}
.wordProgressAdd form .materialList li .title div:last-child input {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}
.wordProgressAdd form .materialList li .status span {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 20px;
}
.wordProgressAdd form .materialList li .status a {
  text-align: center;
  padding: 10px 20px;
  border-radius: 5px;
}
.wordProgressAdd form .materialList li .status .yes {
  background-color: #99CA8C;
  color: #29590F;
}
.wordProgressAdd form .materialList li .status .yes2 {
  background-color: #fff;
  border: 1px solid #29590F;
  color: #29590F;
}
.wordProgressAdd form .materialList li .status .no {
  background-color: #F28067;
  color: #741D1D;
}
@media (max-width: 992px) {
  .wordProgressAdd form .materialList li {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .wordProgressAdd form .materialList li .title {
    width: 100%;
  }
  .wordProgressAdd form .materialList li .status {
    -ms-flex-item-align: end;
        align-self: flex-end;
  }
}
@media (max-width: 768px) {
  .wordProgressAdd form .formContent {
    margin-bottom: 15px;
  }
  .wordProgressAdd form .formContent .inputContent {
    padding: 16px 20px;
  }
  .wordProgressAdd form .materialList li .title {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
  }
  .wordProgressAdd form .materialList li .title div:first-child {
    width: 100%;
  }
}
@media (max-width: 375px) {
  .wordProgressAdd form .formContent .inputArea {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
  }
  .wordProgressAdd form .formContent .inputArea input,
  .wordProgressAdd form .formContent .inputArea textarea,
  .wordProgressAdd form .formContent .inputArea select {
    width: 100%;
  }
}

.workReportDetail .form .formContent {
  -webkit-box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.12);
          box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.12);
  background-color: #FFFFFF;
  border-radius: 5px;
  margin-bottom: 40px;
}
.workReportDetail .form .formContent .inputContent {
  padding: 16px 40px;
}
.workReportDetail .form .formContent .inputArea {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  gap: 0 10px;
  margin-bottom: 20px;
}
.workReportDetail .form .formContent .title {
  width: 120px;
}
.workReportDetail .form .formContent input,
.workReportDetail .form .formContent textarea {
  width: calc(100% - 130px);
  border: none;
  outline: none;
  background-color: #F9F9F9;
  border-radius: 5px;
  padding: 10px 12px;
  resize: none;
}
.workReportDetail .form .formContent .file {
  color: #000;
  text-decoration: underline;
}
@media (max-width: 768px) {
  .workReportDetail .form .formContent {
    margin-bottom: 15px;
  }
  .workReportDetail .form .formContent .inputContent {
    padding: 16px 20px;
  }
}
@media (max-width: 375px) {
  .workReportDetail .form .formContent .inputArea {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
  }
  .workReportDetail .form .formContent .inputArea input,
  .workReportDetail .form .formContent .inputArea textarea {
    width: 100%;
  }
}

.engineerProgressDetail .form .formContent {
  -webkit-box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.12);
          box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.12);
  background-color: #FFFFFF;
  border-radius: 5px;
  margin-bottom: 40px;
}
.engineerProgressDetail .form .inputContent {
  padding: 16px 40px;
}
.engineerProgressDetail .form .inputContent.row {
  margin: 0;
}
.engineerProgressDetail .form .inputArea {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  gap: 0 10px;
  margin-bottom: 20px;
}
.engineerProgressDetail .form .title {
  width: 130px;
}
.engineerProgressDetail .form input {
  width: calc(100% - 140px);
  border: none;
  outline: none;
  background-color: #F9F9F9;
  border-radius: 5px;
  padding: 10px 12px;
}
.engineerProgressDetail .form .addArea {
  position: relative;
}
.engineerProgressDetail .form .addArea .add {
  position: absolute;
  right: 20px;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.engineerProgressDetail .form .addArea .add a {
  margin-bottom: 0;
}
.engineerProgressDetail .form .radioArea {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  gap: 10px;
}
.engineerProgressDetail .form .radioArea div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 5px;
}
.engineerProgressDetail .form .radioArea label {
  white-space: nowrap;
}
.engineerProgressDetail .form .radioArea input[type=radio] {
  width: auto;
  -webkit-box-shadow: none;
          box-shadow: none;
}
.engineerProgressDetail .form .tableArea {
  padding: 20px;
}
.engineerProgressDetail .form .tableArea .table {
  width: 100%;
  border-collapse: collapse;
  display: table;
}
.engineerProgressDetail .form .tableArea .thead {
  display: table-row;
}
.engineerProgressDetail .form .tableArea .tr {
  display: table-row;
  border-radius: 5px;
  margin-bottom: 3px;
}
.engineerProgressDetail .form .tableArea .tr:last-child {
  margin-bottom: 0;
}
.engineerProgressDetail .form .tableArea .tr:nth-child(odd) {
  background-color: #F2F2F2;
}
.engineerProgressDetail .form .tableArea .tr:nth-child(even) {
  background-color: #E7E7E7;
}
.engineerProgressDetail .form .tableArea .tr:hover {
  background-color: #DFF0C9;
}
.engineerProgressDetail .form .tableArea .th,
.engineerProgressDetail .form .tableArea .td {
  display: table-cell;
  vertical-align: middle;
  padding: 12px 20px;
}
.engineerProgressDetail .form .tableArea .th:first-child,
.engineerProgressDetail .form .tableArea .td:first-child {
  width: 40%;
}
.engineerProgressDetail .form .tableArea .th:nth-child(2),
.engineerProgressDetail .form .tableArea .td:nth-child(2) {
  width: 40%;
}
.engineerProgressDetail .form .tableArea .th:nth-child(3),
.engineerProgressDetail .form .tableArea .td:nth-child(3) {
  width: 10%;
}
.engineerProgressDetail .form .tableArea .th:last-child,
.engineerProgressDetail .form .tableArea .td:last-child {
  width: 10%;
  text-align: center;
}
.engineerProgressDetail .form .tableArea .td p {
  border-radius: 5px;
  padding: 10px;
  white-space: nowrap;
}
.engineerProgressDetail .form .tableArea .td p.notGo {
  background: #999999;
}
.engineerProgressDetail .form .tableArea .td p.done {
  background: transparent;
  color: #42A50E;
}
.engineerProgressDetail .form .tableArea .td p.wrong {
  background: transparent;
  color: #FD2D00;
}
.engineerProgressDetail .form .tableArea a {
  color: #000;
}
.engineerProgressDetail .form .progressCircle {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  position: relative;
}
.engineerProgressDetail .form .progressCircle .progressText {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 40px;
  height: 40px;
  background-color: #F2F2F2;
  border-radius: 50%;
  color: #000;
}
@media (max-width: 992px) {
  .engineerProgressDetail .form .inputContent.row > * {
    padding: 0;
  }
}
@media (max-width: 768px) {
  .engineerProgressDetail .form .formContent {
    margin-bottom: 15px;
  }
  .engineerProgressDetail .form .inputContent {
    padding: 16px 20px;
  }
}
@media (max-width: 576px) {
  .engineerProgressDetail .form .inputArea {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .engineerProgressDetail .form .inputArea input[type=text] {
    width: 100%;
  }
  .engineerProgressDetail .form .tableArea .table {
    display: block;
    white-space: nowrap;
    overflow-x: scroll;
  }
}

.engineerReportDetail form .formContent {
  -webkit-box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.12);
          box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.12);
  background-color: #FFFFFF;
  border-radius: 5px;
  margin-bottom: 40px;
}
.engineerReportDetail form .formContent .inputContent {
  padding: 16px 40px;
}
.engineerReportDetail form .formContent .inputArea {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  gap: 0 10px;
  margin-bottom: 20px;
}
.engineerReportDetail form .formContent .title {
  width: 120px;
}
.engineerReportDetail form .formContent input,
.engineerReportDetail form .formContent textarea {
  width: calc(100% - 130px);
  border: none;
  outline: none;
  background-color: #F9F9F9;
  border-radius: 5px;
  padding: 10px 12px;
  resize: none;
}
.engineerReportDetail form .formContent .radioArea {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  gap: 10px;
}
.engineerReportDetail form .formContent .radioArea div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 5px;
}
.engineerReportDetail form .formContent .radioArea label {
  white-space: nowrap;
}
.engineerReportDetail form .formContent .radioArea input[type=radio] {
  width: auto;
  -webkit-box-shadow: none;
          box-shadow: none;
}
.engineerReportDetail form .formContent .file {
  color: #000;
  text-decoration: underline;
}
@media (max-width: 768px) {
  .engineerReportDetail form .formContent {
    margin-bottom: 15px;
  }
  .engineerReportDetail form .formContent .inputContent {
    padding: 16px 20px;
  }
}
@media (max-width: 375px) {
  .engineerReportDetail form .formContent .inputArea {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
  }
  .engineerReportDetail form .formContent .inputArea input,
  .engineerReportDetail form .formContent .inputArea textarea {
    width: 100%;
  }
}

.materialSign form {
  width: 100%;
  -webkit-box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.12);
          box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.12);
  border-radius: 5px;
  padding: 16px 40px;
  margin-bottom: 20px;
  gap: 10px;
  background-color: #FFFFFF;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.materialSign form .inputData {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.materialSign form .inputArea {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 50%;
}
.materialSign form .inputArea .title {
  width: 60px;
}
.materialSign form .inputArea input {
  border: none;
  outline: none;
  background-color: #F9F9F9;
  -webkit-box-shadow: inset 1px 1px 4px rgba(0, 0, 0, 0.25);
          box-shadow: inset 1px 1px 4px rgba(0, 0, 0, 0.25);
  border-radius: 5px;
  padding: 10px 12px;
}
.materialSign form .inputArea input[type=text],
.materialSign form .inputArea .dateArea {
  width: calc(100% - 70px);
}
.materialSign form .inputArea .dateArea {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 5px;
}
.materialSign form .inputArea input[type=date] {
  width: 100%;
  background: url("https://api.iconify.design/fa-solid/calendar-alt.svg?color=%2361b136&width=20&height=20") no-repeat;
  background-color: #F9F9F9;
  background-position: right 10px center;
}
.materialSign form .inputArea input[type=date]::-webkit-calendar-picker-indicator {
  background: transparent;
}
.materialSign form .radioArea {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.materialSign form .radioArea > div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 10px;
}
.materialSign .pageContent {
  padding: 40px;
  background-color: #FFFFFF;
  -webkit-box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.12);
          box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.12);
  border-radius: 5px;
  margin-bottom: 40px;
}
.materialSign .mainUl .mainList {
  border-radius: 5px;
  margin-bottom: 3px;
}
.materialSign .mainUl .mainList:last-child {
  margin-bottom: 0;
}
.materialSign .mainUl .mainList:nth-child(odd) {
  background-color: #F2F2F2;
}
.materialSign .mainUl .mainList:nth-child(even) {
  background-color: #E7E7E7;
}
.materialSign .mainUl .mainList:hover {
  background-color: #DFF0C9;
}
.materialSign .mainUl .mainList a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: #000;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 12px 12px 12px 40px;
}
.materialSign .mainUl .mainList .text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 40px;
}
.materialSign .mainUl .mainList .text span:nth-child(2) {
  font-size: 18px;
  font-weight: bold;
}
.materialSign .mainUl .mainList .status {
  border-radius: 5px;
  padding: 10px 20px;
  min-width: 90px;
  text-align: center;
}
.materialSign .mainUl .mainList .status.onGoing {
  background-color: #F3D35E;
  color: #7A551C;
}
.materialSign .mainUl .mainList .status.done {
  background-color: #99ca8c;
  color: #29590F;
}
.materialSign .mainUl .mainList .status.start {
  background-color: #F28067;
  color: #741D1D;
}
@media (max-width: 992px) {
  .materialSign form .inputData {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .materialSign form .inputArea {
    width: 100%;
    margin-bottom: 10px;
  }
  .materialSign form .inputArea:last-child {
    width: 100%;
  }
}
@media (max-width: 768px) {
  .materialSign form {
    padding: 16px 20px;
  }
  .materialSign form .inputArea {
    -webkit-box-align: baseline;
        -ms-flex-align: baseline;
            align-items: baseline;
  }
  .materialSign form .dateArea {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .materialSign form .dateArea span {
    display: none;
  }
  .materialSign .pageContent {
    padding: 20px;
  }
  .materialSign .mainUl .mainList {
    position: relative;
  }
  .materialSign .mainUl .mainList a {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    padding: 12px 20px;
  }
  .materialSign .mainUl .mainList .text {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    gap: 10px;
  }
  .materialSign .mainUl .mainList .status {
    position: absolute;
    top: 10px;
    right: 20px;
    padding: 5px 20px;
  }
}
@media (max-width: 375px) {
  .materialSign form .inputArea {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .materialSign form .inputArea input[type=text],
  .materialSign form .inputArea select,
  .materialSign form .inputArea .dateArea {
    width: 100%;
  }
  .materialSign form .radioArea > div {
    gap: 5px;
  }
}

.materialSignPending form .formContent {
  -webkit-box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.12);
          box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.12);
  background-color: #FFFFFF;
  border-radius: 5px;
  margin-bottom: 40px;
}
.materialSignPending form .inputContent {
  padding: 16px 40px;
}
.materialSignPending form .inputContent.row {
  margin: 0;
}
.materialSignPending form .inputArea {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  gap: 0 10px;
  margin-bottom: 20px;
}
.materialSignPending form .inputArea:last-child, .materialSignPending form .inputArea:nth-last-child(2) {
  margin-bottom: 0;
}
.materialSignPending form .inputArea.col-xl-4 {
  margin-bottom: 0;
}
.materialSignPending form .title {
  width: 130px;
}
.materialSignPending form input {
  width: calc(100% - 140px);
  border: none;
  outline: none;
  background-color: #F9F9F9;
  border-radius: 5px;
  padding: 10px 12px;
}
.materialSignPending form input[type=date] {
  background: url("https://api.iconify.design/fa-solid/calendar-alt.svg?color=%2361b136&width=20&height=20") no-repeat;
  background-color: #F9F9F9;
  background-position: right 10px center;
}
.materialSignPending form input[type=date]::-webkit-calendar-picker-indicator {
  background: transparent;
}
.materialSignPending form .radioArea {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  gap: 10px;
}
.materialSignPending form .radioArea div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 5px;
}
.materialSignPending form .radioArea label {
  white-space: nowrap;
}
.materialSignPending form .radioArea input[type=radio] {
  width: auto;
  -webkit-box-shadow: none;
          box-shadow: none;
}
.materialSignPending form .materialList {
  padding: 20px;
}
.materialSignPending form .materialList li {
  border-radius: 5px;
  margin-bottom: 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 20px;
  padding: 6px 20px;
}
.materialSignPending form .materialList li:last-child {
  margin-bottom: 0;
}
.materialSignPending form .materialList li:nth-child(odd) {
  background-color: #F2F2F2;
}
.materialSignPending form .materialList li:nth-child(even) {
  background-color: #E7E7E7;
}
.materialSignPending form .materialList li:hover {
  background-color: #DFF0C9;
}
.materialSignPending form .materialList li .title {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 20px;
}
.materialSignPending form .materialList li .title div:first-child {
  width: 80%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}
.materialSignPending form .materialList li .title div:first-child p {
  font-size: 18px;
  font-weight: bold;
}
.materialSignPending form .materialList li .title div:first-child p:first-child {
  margin-right: auto;
}
.materialSignPending form .materialList li .title div:last-child {
  width: 20%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 10px;
}
.materialSignPending form .materialList li .title div:last-child input {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}
.materialSignPending form .materialList li .status span {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 20px;
}
.materialSignPending form .materialList li .status a {
  text-align: center;
  padding: 10px 20px;
  border-radius: 5px;
}
.materialSignPending form .materialList li .status .yes {
  background-color: #99CA8C;
  color: #29590F;
}
.materialSignPending form .materialList li .status .yes2 {
  background-color: #fff;
  border: 1px solid #29590F;
  color: #29590F;
}
.materialSignPending form .materialList li .status .no {
  background-color: #F28067;
  color: #741D1D;
}
.materialSignPending form .btnGroup #IsEnd {
  background: #F28067;
}
@media (max-width: 1200px) {
  .materialSignPending form .inputArea.col-xl-4 {
    margin-bottom: 20px;
  }
  .materialSignPending form .inputArea.col-xl-4:last-child {
    margin-bottom: 0;
  }
}
@media (max-width: 992px) {
  .materialSignPending form .inputContent.row > * {
    padding: 0;
  }
  .materialSignPending form .inputArea:nth-last-child(2) {
    margin-bottom: 20px;
  }
  .materialSignPending form .inputArea.col-xl-4 {
    margin-bottom: 20px;
  }
  .materialSignPending form .inputArea.col-xl-4:last-child {
    margin-bottom: 0;
  }
  .materialSignPending form .materialList li {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .materialSignPending form .materialList li .title {
    width: 100%;
  }
  .materialSignPending form .materialList li .status {
    -ms-flex-item-align: end;
        align-self: flex-end;
  }
}
@media (max-width: 768px) {
  .materialSignPending form .formContent {
    margin-bottom: 15px;
  }
  .materialSignPending form .inputContent {
    padding: 16px 20px;
  }
  .materialSignPending form .materialList li .title div:first-child {
    width: 60%;
  }
  .materialSignPending form .materialList li .title div:last-child {
    width: 40%;
  }
}
@media (max-width: 576px) {
  .materialSignPending form .inputArea {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .materialSignPending form .inputArea input {
    width: 100%;
  }
  .materialSignPending form .materialList li .title {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .materialSignPending form .materialList li .title div:first-child {
    width: 100%;
  }
  .materialSignPending form .materialList li .title div:last-child {
    -ms-flex-item-align: end;
        align-self: flex-end;
  }
  .materialSignPending form .btnGroup {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 10px 20px;
  }
}
@media (max-width: 375px) {
  .materialSignPending form .materialList li .title div:last-child {
    width: 100%;
  }
}

.materialSignSolved .form .formContent {
  -webkit-box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.12);
          box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.12);
  background-color: #FFFFFF;
  border-radius: 5px;
  margin-bottom: 40px;
}
.materialSignSolved .form .inputContent {
  padding: 16px 40px;
}
.materialSignSolved .form .inputContent.row {
  margin: 0;
}
.materialSignSolved .form .inputArea {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  gap: 0 10px;
  margin-bottom: 20px;
}
.materialSignSolved .form .inputArea:last-child, .materialSignSolved .form .inputArea:nth-last-child(2) {
  margin-bottom: 0;
}
.materialSignSolved .form .inputArea.col-xl-4 {
  margin-bottom: 0;
}
.materialSignSolved .form .title {
  width: 130px;
}
.materialSignSolved .form input {
  width: calc(100% - 140px);
  border: none;
  outline: none;
  background-color: #F9F9F9;
  border-radius: 5px;
  padding: 10px 12px;
}
.materialSignSolved .form .radioArea {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  gap: 10px;
}
.materialSignSolved .form .radioArea div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 5px;
}
.materialSignSolved .form .radioArea label {
  white-space: nowrap;
}
.materialSignSolved .form .radioArea input[type=radio] {
  width: auto;
  -webkit-box-shadow: none;
          box-shadow: none;
}
.materialSignSolved .form .materialList {
  padding: 20px;
}
.materialSignSolved .form .materialList li {
  border-radius: 5px;
  margin-bottom: 3px;
  padding: 6px 20px;
}
.materialSignSolved .form .materialList li:last-child {
  margin-bottom: 0;
}
.materialSignSolved .form .materialList li:nth-child(odd) {
  background-color: #F2F2F2;
}
.materialSignSolved .form .materialList li:nth-child(even) {
  background-color: #E7E7E7;
}
.materialSignSolved .form .materialList li:hover {
  background-color: #DFF0C9;
}
.materialSignSolved .form .materialList li .title {
  width: 80%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 20px;
}
.materialSignSolved .form .materialList li .title div:first-child {
  width: 80%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.materialSignSolved .form .materialList li .title div:last-child {
  width: 20%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 10px;
}
.materialSignSolved .form .materialList li .title div:last-child input {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}
.materialSignSolved .form .materialList li .status {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 20px;
}
.materialSignSolved .form .materialList li .status a {
  text-align: center;
  padding: 10px 20px;
  border-radius: 5px;
}
.materialSignSolved .form .materialList li .status .yes {
  background-color: #99CA8C;
  color: #29590F;
}
.materialSignSolved .form .materialList li .status .no {
  background-color: #F28067;
  color: #741D1D;
}
.materialSignSolved .form .progressList {
  padding: 20px;
}
.materialSignSolved .form .progressList li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 40px;
  margin-bottom: 20px;
}
.materialSignSolved .form .progressList li:last-child {
  margin-bottom: 0;
}
.materialSignSolved .form .progressList li .title {
  width: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 10px 40px;
}
.materialSignSolved .form .progressList li .title p:first-child {
  width: 100px;
}
.materialSignSolved .form .progressList li .status {
  text-align: center;
  padding: 10px 20px;
  border-radius: 5px;
}
.materialSignSolved .form .progressList li .status.onGoing {
  background-color: #F3D35E;
  color: #7A551C;
}
.materialSignSolved .form .progressList li .status.done {
  background-color: #99ca8c;
  color: #29590F;
}
.materialSignSolved .form .progressList li .status.start {
  background-color: #F28067;
  color: #741D1D;
}
@media (max-width: 1200px) {
  .materialSignSolved .form .inputArea.col-xl-4 {
    margin-bottom: 20px;
  }
  .materialSignSolved .form .inputArea.col-xl-4:last-child {
    margin-bottom: 0;
  }
}
@media (max-width: 992px) {
  .materialSignSolved .form .inputContent.row > * {
    padding: 0;
  }
  .materialSignSolved .form .inputArea:nth-last-child(2) {
    margin-bottom: 20px;
  }
  .materialSignSolved .form .inputArea.col-xl-4 {
    margin-bottom: 20px;
  }
  .materialSignSolved .form .inputArea.col-xl-4:last-child {
    margin-bottom: 0;
  }
  .materialSignSolved .form .materialList li {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .materialSignSolved .form .materialList li .title {
    width: 100%;
  }
  .materialSignSolved .form .materialList li .status {
    -ms-flex-item-align: end;
        align-self: flex-end;
  }
}
@media (max-width: 768px) {
  .materialSignSolved .form .formContent {
    margin-bottom: 15px;
  }
  .materialSignSolved .form .inputContent {
    padding: 16px 20px;
  }
  .materialSignSolved .form .materialList li .title div:first-child, .materialSignSolved .form .materialList li .title div:last-child {
    width: 50%;
  }
  .materialSignSolved .form .progressList li {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    gap: 10px;
  }
  .materialSignSolved .form .progressList li .status {
    -ms-flex-item-align: end;
        align-self: flex-end;
  }
  .materialSignSolved .form .progressList li .arrive {
    -ms-flex-item-align: end;
        align-self: flex-end;
  }
}
@media (max-width: 576px) {
  .materialSignSolved .form .inputArea {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .materialSignSolved .form .inputArea input {
    width: 100%;
  }
  .materialSignSolved .form .materialList li .title {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .materialSignSolved .form .materialList li .title div:first-child {
    width: 100%;
  }
  .materialSignSolved .form .materialList li .title div:last-child {
    -ms-flex-item-align: end;
        align-self: flex-end;
  }
}
@media (max-width: 375px) {
  .materialSignSolved .form .materialList li .title div:last-child {
    width: 100%;
  }
}

.reissueTable form {
  width: 100%;
  -webkit-box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.12);
          box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.12);
  border-radius: 5px;
  padding: 16px 40px;
  margin-bottom: 20px;
  gap: 10px;
  background-color: #FFFFFF;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.reissueTable form .inputData {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 10px;
}
.reissueTable form input {
  border: none;
  outline: none;
  background-color: #F9F9F9;
  -webkit-box-shadow: inset 1px 1px 4px rgba(0, 0, 0, 0.25);
          box-shadow: inset 1px 1px 4px rgba(0, 0, 0, 0.25);
  border-radius: 5px;
  padding: 10px 12px;
}
.reissueTable form .inputArea {
  width: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0 10px;
}
.reissueTable form .inputArea .title {
  width: 60px;
}
.reissueTable form .inputArea input[type=text] {
  width: calc(100% - 70px);
}
.reissueTable form .inputArea .dateArea {
  width: calc(100% - 70px);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 5px;
}
.reissueTable form .inputArea .dateArea input[type=date] {
  width: 100%;
  background: url("https://api.iconify.design/fa-solid/calendar-alt.svg?color=%2361b136&width=20&height=20") no-repeat;
  background-color: #F9F9F9;
  background-position: right 10px center;
}
.reissueTable form .inputArea .dateArea input[type=date]::-webkit-calendar-picker-indicator {
  background: transparent;
}
.reissueTable .pageContent {
  padding: 40px;
  background-color: #FFFFFF;
  -webkit-box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.12);
          box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.12);
  border-radius: 5px;
  margin-bottom: 40px;
}
.reissueTable .mainUl .mainList {
  border-radius: 5px;
  margin-bottom: 3px;
}
.reissueTable .mainUl .mainList:last-child {
  margin-bottom: 0;
}
.reissueTable .mainUl .mainList:nth-child(odd) {
  background-color: #F2F2F2;
}
.reissueTable .mainUl .mainList:nth-child(even) {
  background-color: #E7E7E7;
}
.reissueTable .mainUl .mainList:hover {
  background-color: #DFF0C9;
}
.reissueTable .mainUl .mainList a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  color: #000;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 12px 12px 12px 40px;
}
.reissueTable .mainUl .mainList .text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 40px;
}
.reissueTable .mainUl .mainList .text span:nth-child(2) {
  font-size: 18px;
  font-weight: bold;
}
.reissueTable .mainUl .mainList .status {
  border-radius: 5px;
  padding: 10px 20px;
  min-width: 90px;
  text-align: center;
}
.reissueTable .mainUl .mainList .status.onGoing {
  background-color: #F3D35E;
  color: #7A551C;
}
.reissueTable .mainUl .mainList .status.done {
  background-color: #99ca8c;
  color: #29590F;
}
.reissueTable .mainUl .mainList .status.start {
  background-color: #F28067;
  color: #741D1D;
}
@media (max-width: 992px) {
  .reissueTable form {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .reissueTable form .inputData {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .reissueTable form .inputArea {
    width: 100%;
  }
}
@media (max-width: 768px) {
  .reissueTable form {
    padding: 16px 20px;
  }
  .reissueTable form .inputArea {
    -webkit-box-align: baseline;
        -ms-flex-align: baseline;
            align-items: baseline;
  }
  .reissueTable form .inputArea .dateArea {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .reissueTable form .inputArea .dateArea span {
    display: none;
  }
  .reissueTable .pageContent {
    padding: 20px;
  }
  .reissueTable .mainUl .mainList {
    position: relative;
  }
  .reissueTable .mainUl .mainList a {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    padding: 12px 20px;
  }
  .reissueTable .mainUl .mainList .text {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    gap: 10px;
  }
  .reissueTable .mainUl .mainList .status {
    position: absolute;
    top: 10px;
    right: 20px;
    padding: 5px 20px;
  }
}
@media (max-width: 375px) {
  .reissueTable form .inputArea {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .reissueTable form .inputArea input[type=text] {
    width: 100%;
  }
  .reissueTable form .inputArea .dateArea {
    width: 100%;
  }
}

.reissueTableAdd form .formContent {
  -webkit-box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.12);
          box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.12);
  background-color: #FFFFFF;
  border-radius: 5px;
  margin-bottom: 40px;
}
.reissueTableAdd form .inputContent {
  padding: 16px 40px;
}
.reissueTableAdd form .inputContent.row {
  margin: 0;
}
.reissueTableAdd form .inputArea {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  gap: 0 10px;
  margin-bottom: 20px;
}
.reissueTableAdd form .inputArea:last-child {
  margin-bottom: 0;
}
.reissueTableAdd form .inputArea.col-xl-4 {
  margin-bottom: 0;
}
.reissueTableAdd form .title {
  width: 130px;
}
.reissueTableAdd form input,
.reissueTableAdd form select {
  width: 100%;
  border: none;
  outline: none;
  background-color: #F9F9F9;
  -webkit-box-shadow: inset 1px 1px 4px rgba(0, 0, 0, 0.25);
          box-shadow: inset 1px 1px 4px rgba(0, 0, 0, 0.25);
  border-radius: 5px;
  padding: 10px 30px 10px 12px;
}
.reissueTableAdd form input[type=date] {
  background: url("https://api.iconify.design/fa-solid/calendar-alt.svg?color=%2361b136&width=20&height=20") no-repeat;
  background-color: #F9F9F9;
  background-position: right 10px center;
}
.reissueTableAdd form input[type=date]::-webkit-calendar-picker-indicator {
  background: transparent;
}
.reissueTableAdd form .radioArea {
  width: calc(100% - 140px);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  gap: 10px;
}
.reissueTableAdd form .radioArea div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 5px;
}
.reissueTableAdd form .radioArea label {
  white-space: nowrap;
}
.reissueTableAdd form .radioArea input[type=radio] {
  width: auto;
  -webkit-box-shadow: none;
          box-shadow: none;
}
.reissueTableAdd form .addressArea {
  width: calc(100% - 140px);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 10px;
}
.reissueTableAdd form .addressArea select {
  width: 25%;
}
.reissueTableAdd form .addressArea input[type=text] {
  width: 50%;
}
.reissueTableAdd form .addArea {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding-right: 20px;
}
.reissueTableAdd form .addArea .add a {
  margin-bottom: 0;
}
.reissueTableAdd form .materialList {
  padding: 20px;
}
.reissueTableAdd form .materialList li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 40px;
  border-radius: 5px;
  margin-bottom: 3px;
  padding: 12px 20px;
}
.reissueTableAdd form .materialList li:last-child {
  margin-bottom: 0;
}
.reissueTableAdd form .materialList li:nth-child(odd) {
  background-color: #F2F2F2;
}
.reissueTableAdd form .materialList li:nth-child(even) {
  background-color: #E7E7E7;
}
.reissueTableAdd form .materialList li:hover {
  background-color: #DFF0C9;
}
.reissueTableAdd form .materialList li a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.reissueTableAdd form .materialList li a iconify-icon {
  color: #61B136;
}
.reissueTableAdd form .materialList li .title {
  width: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 10px;
}
@media (max-width: 1200px) {
  .reissueTableAdd form .inputArea.col-xl-4 {
    margin-bottom: 20px;
  }
  .reissueTableAdd form .inputArea.col-xl-4:last-child {
    margin-bottom: 0;
  }
}
@media (max-width: 992px) {
  .reissueTableAdd form .inputContent.row > * {
    padding: 0;
  }
  .reissueTableAdd form .inputArea:nth-last-child(2) {
    margin-bottom: 20px;
  }
  .reissueTableAdd form .inputArea.col-xl-4 {
    margin-bottom: 20px;
  }
  .reissueTableAdd form .inputArea.col-xl-4:last-child {
    margin-bottom: 0;
  }
  .reissueTableAdd form .addressArea {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .reissueTableAdd form .addressArea select,
  .reissueTableAdd form .addressArea input[type=text] {
    width: 100%;
  }
}
@media (max-width: 768px) {
  .reissueTableAdd form .formContent {
    margin-bottom: 15px;
  }
  .reissueTableAdd form .inputContent {
    padding: 16px 20px;
  }
  .reissueTableAdd form .materialList li .title {
    width: 100%;
  }
}
@media (max-width: 576px) {
  .reissueTableAdd form .inputArea {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .reissueTableAdd form .inputArea input,
  .reissueTableAdd form .inputArea select {
    width: 100%;
  }
  .reissueTableAdd form .addressArea {
    width: 100%;
  }
  .reissueTableAdd form .radioArea {
    width: 100%;
  }
}

.reissueTableDetail .form .formContent {
  -webkit-box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.12);
          box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.12);
  background-color: #FFFFFF;
  border-radius: 5px;
  margin-bottom: 40px;
}
.reissueTableDetail .form .inputContent {
  padding: 16px 40px;
}
.reissueTableDetail .form .inputContent.row {
  margin: 0;
}
.reissueTableDetail .form .inputArea {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  gap: 0 10px;
  margin-bottom: 20px;
}
.reissueTableDetail .form .inputArea:last-child, .reissueTableDetail .form .inputArea:nth-last-child(2) {
  margin-bottom: 0;
}
.reissueTableDetail .form .inputArea.col-xl-4 {
  margin-bottom: 0;
}
.reissueTableDetail .form .search-wrapper {
  width: 100%;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
.reissueTableDetail .form .showArea {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 10px;
  position: relative;
}
.reissueTableDetail .form .showArea textarea {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  border: none;
  outline: none;
  background-color: #F9F9F9;
  -webkit-box-shadow: inset 1px 1px 4px rgba(0, 0, 0, 0.25);
          box-shadow: inset 1px 1px 4px rgba(0, 0, 0, 0.25);
  border-radius: 5px;
  padding: 10px 20px 10px 12px;
  resize: none;
  word-break: break-all;
}
.reissueTableDetail .form .showArea textarea::-webkit-scrollbar {
  display: none;
}
.reissueTableDetail .form #clear-selected {
  display: none;
  border: none;
  background: transparent;
  position: absolute;
  top: 50%;
  right: 5px;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  padding: 0;
}
.reissueTableDetail .form #selected-area {
  margin-top: 10px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 5px;
}
.reissueTableDetail .form .search-area {
  width: 100%;
  position: relative;
}
.reissueTableDetail .form .search-area input {
  width: 100%;
  border: none;
  outline: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
  padding: 8px;
}
.reissueTableDetail .form .search-area label {
  position: absolute;
  top: 50%;
  right: 10px;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.reissueTableDetail .form #search-results {
  max-height: 250px;
  width: 100%;
  overflow-y: auto;
}
.reissueTableDetail .form #search-results li {
  padding: 8px;
  cursor: pointer;
  word-break: break-all;
}
.reissueTableDetail .form #search-results li:hover {
  background: #F9F9F9;
}
.reissueTableDetail .form .title {
  width: 130px;
}
.reissueTableDetail .form .title.Subject {
  font-weight: bold;
  font-size: 18px;
}
.reissueTableDetail .form input,
.reissueTableDetail .form select,
.reissueTableDetail .form .subjectText {
  width: calc(100% - 140px);
  border: none;
  outline: none;
  background-color: #F9F9F9;
  -webkit-box-shadow: inset 1px 1px 4px rgba(0, 0, 0, 0.25);
          box-shadow: inset 1px 1px 4px rgba(0, 0, 0, 0.25);
  border-radius: 5px;
  padding: 10px 12px;
  resize: none;
}
.reissueTableDetail .form input[type=date] {
  background: url("https://api.iconify.design/fa-solid/calendar-alt.svg?color=%2361b136&width=20&height=20") no-repeat;
  background-color: #F9F9F9;
  background-position: right 10px center;
}
.reissueTableDetail .form input[type=date]::-webkit-calendar-picker-indicator {
  background: transparent;
}
.reissueTableDetail .form .addressArea {
  width: calc(100% - 140px);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 10px;
}
.reissueTableDetail .form .addressArea select {
  width: 25%;
}
.reissueTableDetail .form .addressArea input[type=text] {
  width: 50%;
}
.reissueTableDetail .form .addArea {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding-right: 20px;
}
.reissueTableDetail .form .addArea .add a {
  margin-bottom: 0;
}
.reissueTableDetail .form .radioArea {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  gap: 10px;
}
.reissueTableDetail .form .radioArea div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 5px;
}
.reissueTableDetail .form .radioArea label {
  white-space: nowrap;
}
.reissueTableDetail .form .radioArea input[type=radio] {
  width: auto;
  -webkit-box-shadow: none;
          box-shadow: none;
}
.reissueTableDetail .form .materialList {
  padding: 20px;
}
.reissueTableDetail .form .materialList li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 20px 40px;
  border-radius: 5px;
  margin-bottom: 3px;
  padding: 12px 20px;
}
.reissueTableDetail .form .materialList li:last-child {
  margin-bottom: 0;
}
.reissueTableDetail .form .materialList li:nth-child(odd) {
  background-color: #F2F2F2;
}
.reissueTableDetail .form .materialList li:nth-child(even) {
  background-color: #E7E7E7;
}
.reissueTableDetail .form .materialList li:hover {
  background-color: #DFF0C9;
}
.reissueTableDetail .form .materialList li a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.reissueTableDetail .form .materialList li a iconify-icon {
  color: #61B136;
}
.reissueTableDetail .form .materialList li .title {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 10px;
}
.reissueTableDetail .form .materialList li .title p {
  font-size: 18px;
  font-weight: bold;
}
.reissueTableDetail .form .materialList li .title div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 10px;
}
.reissueTableDetail .form .materialList li .title div input {
  width: 100%;
}
.reissueTableDetail .form .materialList li .status span {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 20px;
}
.reissueTableDetail .form .materialList li .status a {
  text-align: center;
  padding: 10px 20px;
  border-radius: 5px;
}
.reissueTableDetail .form .materialList li .status .yes {
  background-color: #99CA8C;
  color: #29590F;
}
.reissueTableDetail .form .materialList li .status .yes2 {
  background-color: #fff;
  border: 1px solid #29590F;
  color: #29590F;
}
.reissueTableDetail .form .materialList li .status .no {
  background-color: #F28067;
  color: #741D1D;
}
.reissueTableDetail .form .progressList {
  padding: 20px;
}
.reissueTableDetail .form .progressList li {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 5px 20px;
}
.reissueTableDetail .form .progressList li:first-child {
  margin-bottom: 10px;
}
.reissueTableDetail .form .progressList li .list {
  width: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0 40px;
}
.reissueTableDetail .form .progressList li .list .title {
  width: 100px;
}
.reissueTableDetail .form .progressList li .list .content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  width: calc(100% - 140px);
}
.reissueTableDetail .form .progressList li .status {
  text-align: center;
  padding: 10px 20px;
  border-radius: 5px;
}
.reissueTableDetail .form .progressList li .status.onGoing {
  background-color: #F3D35E;
  color: #7A551C;
}
.reissueTableDetail .form .progressList li .status.done {
  background-color: #99ca8c;
  color: #29590F;
}
.reissueTableDetail .form .progressList li .status.start {
  background-color: #F28067;
  color: #741D1D;
}
.reissueTableDetail .form #IsDone {
  background: #F28067;
}
@media (max-width: 1200px) {
  .reissueTableDetail .form .inputArea:nth-last-child(2) {
    margin-bottom: 20px;
  }
  .reissueTableDetail .form .inputArea.col-xl-4 {
    margin-bottom: 20px;
  }
  .reissueTableDetail .form .inputArea.col-xl-4:last-child {
    margin-bottom: 0;
  }
}
@media (max-width: 992px) {
  .reissueTableDetail .form .inputContent.row > * {
    padding: 0;
  }
  .reissueTableDetail .form .inputArea:nth-last-child(2) {
    margin-bottom: 20px;
  }
  .reissueTableDetail .form .inputArea.col-xl-4 {
    margin-bottom: 20px;
  }
  .reissueTableDetail .form .inputArea.col-xl-4:last-child {
    margin-bottom: 0;
  }
  .reissueTableDetail .form .addressArea {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .reissueTableDetail .form .addressArea select,
  .reissueTableDetail .form .addressArea input[type=text] {
    width: 100%;
  }
  .reissueTableDetail .form .progressList li {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .reissueTableDetail .form .progressList li .list {
    width: 100%;
  }
  .reissueTableDetail .form .progressList li .arrive {
    -ms-flex-item-align: end;
        align-self: flex-end;
  }
  .reissueTableDetail .form .materialList li {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
  }
  .reissueTableDetail .form .materialList li .title {
    width: 100%;
  }
}
@media (max-width: 768px) {
  .reissueTableDetail .form .formContent {
    margin-bottom: 15px;
  }
  .reissueTableDetail .form .inputContent {
    padding: 16px 20px;
  }
  .reissueTableDetail .form .materialList li .title {
    width: 100%;
  }
  .reissueTableDetail .form .progressList li .list {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
  }
  .reissueTableDetail .form .progressList li .list .content {
    width: 100%;
  }
  .reissueTableDetail .form .btnGroup {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}
@media (max-width: 576px) {
  .reissueTableDetail .form .inputArea {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .reissueTableDetail .form .inputArea input,
  .reissueTableDetail .form .inputArea .subjectText {
    width: 100%;
  }
  .reissueTableDetail .form .addressArea {
    width: 100%;
  }
  .reissueTableDetail .form .materialList li .title {
    width: 100%;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .reissueTableDetail .form .materialList li .title p {
    width: 100%;
  }
  .reissueTableDetail .form .materialList li .title div {
    width: 100%;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
  }
}

.announcemet form {
  width: 100%;
  -webkit-box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.12);
          box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.12);
  border-radius: 5px;
  padding: 16px 40px;
  margin-bottom: 20px;
  gap: 10px;
  background-color: #FFFFFF;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.announcemet form .inputData {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 10px;
}
.announcemet form input {
  border: none;
  outline: none;
  background-color: #F9F9F9;
  -webkit-box-shadow: inset 1px 1px 4px rgba(0, 0, 0, 0.25);
          box-shadow: inset 1px 1px 4px rgba(0, 0, 0, 0.25);
  border-radius: 5px;
  padding: 10px 12px;
}
.announcemet form .inputArea {
  width: 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0px 10px;
}
.announcemet form .inputArea .title {
  width: 60px;
}
.announcemet form .inputArea input[type=text] {
  width: calc(100% - 70px);
}
.announcemet form .inputArea .dateArea {
  width: calc(100% - 70px);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 5px;
}
.announcemet form .inputArea .dateArea input[type=date] {
  width: 100%;
  background: url("https://api.iconify.design/fa-solid/calendar-alt.svg?color=%2361b136&width=20&height=20") no-repeat;
  background-color: #F9F9F9;
  background-position: right 10px center;
}
.announcemet form .inputArea .dateArea input[type=date]::-webkit-calendar-picker-indicator {
  background: transparent;
}
.announcemet .pageContent {
  padding: 40px;
  background-color: #FFFFFF;
  -webkit-box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.12);
          box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.12);
  border-radius: 5px;
  margin-bottom: 40px;
}
.announcemet .mainUl .mainList {
  border-radius: 5px;
  margin-bottom: 3px;
}
.announcemet .mainUl .mainList:last-child {
  margin-bottom: 0;
}
.announcemet .mainUl .mainList:nth-child(odd) {
  background-color: #F2F2F2;
}
.announcemet .mainUl .mainList:nth-child(even) {
  background-color: #E7E7E7;
}
.announcemet .mainUl .mainList:hover {
  background-color: #DFF0C9;
}
.announcemet .mainUl .mainList a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  color: #000;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 12px 40px;
}
.announcemet .mainUl .mainList .text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 10px 40px;
}
.announcemet .mainUl .mainList .text span:nth-child(2) {
  font-size: 18px;
  font-weight: bold;
}
@media (max-width: 992px) {
  .announcemet form {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .announcemet form .inputData {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .announcemet form .inputArea {
    width: 100%;
  }
}
@media (max-width: 768px) {
  .announcemet form {
    padding: 16px 20px;
  }
  .announcemet form .inputArea {
    -webkit-box-align: baseline;
        -ms-flex-align: baseline;
            align-items: baseline;
  }
  .announcemet form .inputArea .dateArea {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .announcemet form .inputArea .dateArea span {
    display: none;
  }
  .announcemet .pageContent {
    padding: 20px;
  }
  .announcemet .mainUl .mainList a {
    padding: 12px 20px;
  }
  .announcemet .mainUl .mainList .text {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 10px 40px;
  }
}
@media (max-width: 375px) {
  .announcemet form .inputArea {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .announcemet form .inputArea input[type=text] {
    width: 100%;
  }
  .announcemet form .inputArea .dateArea {
    width: 100%;
  }
}

.announcemetDetail .pageTitle {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  background-color: #f2f2f2;
  color: #000;
  gap: 10px 20px;
}
.announcemetDetail .pageTitle span {
  color: #61B136;
  font-size: 18px;
  font-weight: normal;
  border-right: 1px solid #B3B3B3;
  padding-right: 20px;
}
.announcemetDetail .pageContent {
  background-color: #FFFFFF;
  -webkit-box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.12);
          box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.12);
  border-radius: 5px;
  margin-bottom: 40px;
}
.announcemetDetail .textArea {
  width: 80%;
  margin: auto;
  padding: 40px 0;
  font-size: 18px;
}

.owner form {
  width: 100%;
  -webkit-box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.12);
          box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.12);
  border-radius: 5px;
  padding: 16px 40px;
  margin-bottom: 20px;
  gap: 10px;
  background-color: #FFFFFF;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.owner form .inputData {
  width: 100%;
}
.owner form .inputArea {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.owner form .inputArea .title {
  width: 60px;
}
.owner form .inputArea input[type=text] {
  width: calc(100% - 70px);
  border: none;
  outline: none;
  background-color: #F9F9F9;
  -webkit-box-shadow: inset 1px 1px 4px rgba(0, 0, 0, 0.25);
          box-shadow: inset 1px 1px 4px rgba(0, 0, 0, 0.25);
  border-radius: 5px;
  padding: 10px 12px;
}
.owner .pageContent {
  padding: 40px;
  background-color: #FFFFFF;
  -webkit-box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.12);
          box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.12);
  border-radius: 5px;
  margin-bottom: 40px;
}
.owner .mainUl .mainList {
  border-radius: 5px;
  margin-bottom: 3px;
}
.owner .mainUl .mainList:last-child {
  margin-bottom: 0;
}
.owner .mainUl .mainList:nth-child(odd) {
  background-color: #F2F2F2;
}
.owner .mainUl .mainList:nth-child(even) {
  background-color: #E7E7E7;
}
.owner .mainUl .mainList:hover {
  background-color: #DFF0C9;
}
.owner .mainUl .mainList a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  color: #000;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 12px 12px 12px 40px;
}
.owner .mainUl .mainList .text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 10px 40px;
}
.owner .mainUl .mainList .text span:first-child {
  font-weight: bold;
  font-size: 18px;
}
@media (max-width: 768px) {
  .owner form {
    padding: 16px 20px;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .owner .pageContent {
    padding: 20px;
  }
  .owner .mainUl .mainList a {
    padding: 12px 12px 12px 20px;
  }
}
@media (max-width: 375px) {
  .owner form .inputArea {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
  }
  .owner form .inputArea input[type=text] {
    width: 100%;
  }
}

.ownerAdd form .formContent {
  -webkit-box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.12);
          box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.12);
  background-color: #FFFFFF;
  border-radius: 5px;
  margin-bottom: 40px;
}
.ownerAdd form .formContent:first-child .inputContent {
  width: 80%;
}
.ownerAdd form .formContent .inputContent {
  padding: 16px 40px;
}
.ownerAdd form .formContent .inputContent.row {
  margin: 0;
}
.ownerAdd form .formContent .inputArea {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0 10px;
  margin-bottom: 20px;
}
.ownerAdd form .formContent .title {
  width: 130px;
}
.ownerAdd form .formContent input {
  width: calc(100% - 140px);
  border: none;
  outline: none;
  background-color: #F9F9F9;
  -webkit-box-shadow: inset 1px 1px 4px rgba(0, 0, 0, 0.25);
          box-shadow: inset 1px 1px 4px rgba(0, 0, 0, 0.25);
  border-radius: 5px;
  padding: 10px 12px;
}
.ownerAdd form .formContent .radioArea {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  gap: 10px;
}
.ownerAdd form .formContent .radioArea div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 5px;
}
.ownerAdd form .formContent .radioArea label {
  white-space: nowrap;
}
.ownerAdd form .formContent .radioArea input[type=radio] {
  width: auto;
  -webkit-box-shadow: none;
          box-shadow: none;
}
.ownerAdd form .formContent .uploadList li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 10px;
  border-radius: 5px;
  margin-bottom: 3px;
  padding: 12px 20px;
}
.ownerAdd form .formContent .uploadList li .title {
  width: 520px;
}
.ownerAdd form .formContent .uploadList li:last-child {
  margin-bottom: 0;
}
.ownerAdd form .formContent .uploadList li:nth-child(odd) {
  background-color: #F2F2F2;
}
.ownerAdd form .formContent .uploadList li:nth-child(even) {
  background-color: #E7E7E7;
}
.ownerAdd form .formContent .uploadList li:hover {
  background-color: #DFF0C9;
}
@media (max-width: 992px) {
  .ownerAdd form .formContent:first-child .inputContent {
    width: 90%;
  }
  .ownerAdd form .formContent .inputContent.row > * {
    padding: 0;
  }
  .ownerAdd form .formContent .uploadList li {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
  }
  .ownerAdd form .formContent .uploadList li .title {
    width: auto;
  }
}
@media (max-width: 768px) {
  .ownerAdd form .formContent {
    margin-bottom: 15px;
  }
  .ownerAdd form .formContent:first-child .inputContent {
    width: 100%;
  }
  .ownerAdd form .formContent .inputContent {
    padding: 16px 20px;
  }
}
@media (max-width: 375px) {
  .ownerAdd form .formContent .inputArea {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
  }
  .ownerAdd form .formContent .inputArea input {
    width: 100%;
  }
}

.ownerRevise form .formContent {
  -webkit-box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.12);
          box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.12);
  background-color: #ffffff;
  border-radius: 5px;
  margin-bottom: 40px;
}
.ownerRevise form .formContent:first-child .inputContent {
  width: 80%;
}
.ownerRevise form .formContent .inputContent {
  padding: 16px 40px;
}
.ownerRevise form .formContent .inputContent.row {
  margin: 0;
}
.ownerRevise form .formContent .inputArea {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0 10px;
  margin-bottom: 20px;
}
.ownerRevise form .formContent .title {
  width: 130px;
}
.ownerRevise form .formContent input {
  width: calc(100% - 140px);
  border: none;
  outline: none;
  background-color: #f9f9f9;
  -webkit-box-shadow: inset 1px 1px 4px rgba(0, 0, 0, 0.25);
          box-shadow: inset 1px 1px 4px rgba(0, 0, 0, 0.25);
  border-radius: 5px;
  padding: 10px 12px;
}
.ownerRevise form .formContent .radioArea {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  gap: 10px;
}
.ownerRevise form .formContent .radioArea div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 5px;
}
.ownerRevise form .formContent .radioArea label {
  white-space: nowrap;
}
.ownerRevise form .formContent .radioArea input[type=radio] {
  width: auto;
  -webkit-box-shadow: none;
          box-shadow: none;
}
.ownerRevise form .formContent .uploadList li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 10px;
  border-radius: 5px;
  margin-bottom: 3px;
  padding: 12px 20px;
}
.ownerRevise form .formContent .uploadList li .title {
  width: 520px;
}
.ownerRevise form .formContent .uploadList li:last-child {
  margin-bottom: 0;
}
.ownerRevise form .formContent .uploadList li:nth-child(odd) {
  background-color: #f2f2f2;
}
.ownerRevise form .formContent .uploadList li:nth-child(even) {
  background-color: #e7e7e7;
}
.ownerRevise form .formContent .uploadList li:hover {
  background-color: #dff0c9;
}
.ownerRevise form .formContent .uploadList li a {
  color: #ffffff;
  display: block;
  background: #61b136;
  padding: 5px;
  border-radius: 5px;
}
.ownerRevise form .formContent .uploadList li a.up_imgbox {
  padding: 0;
  background: transparent;
}
@media (max-width: 992px) {
  .ownerRevise form .formContent:first-child .inputContent {
    width: 90%;
  }
  .ownerRevise form .formContent .inputContent.row > * {
    padding: 0;
  }
  .ownerRevise form .formContent .uploadList li {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
  }
  .ownerRevise form .formContent .uploadList li .title {
    width: auto;
  }
}
@media (max-width: 768px) {
  .ownerRevise form .formContent {
    margin-bottom: 15px;
  }
  .ownerRevise form .formContent:first-child .inputContent {
    width: 100%;
  }
  .ownerRevise form .formContent .inputContent {
    padding: 16px 20px;
  }
}
@media (max-width: 375px) {
  .ownerRevise form .formContent .inputArea {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
  }
  .ownerRevise form .formContent .inputArea input {
    width: 100%;
  }
}

.survey form {
  width: 100%;
  -webkit-box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.12);
          box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.12);
  border-radius: 5px;
  padding: 16px 40px;
  margin-bottom: 20px;
  gap: 10px;
  background-color: #FFFFFF;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  border: 1px solid #61B136;
}
.survey form .inputData {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.survey form .inputArea {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 25%;
}
.survey form .inputArea:last-child {
  width: 50%;
}
.survey form .inputArea .title {
  width: 60px;
}
.survey form .inputArea input,
.survey form .inputArea select {
  border: none;
  outline: none;
  background-color: #F9F9F9;
  -webkit-box-shadow: inset 1px 1px 4px rgba(0, 0, 0, 0.25);
          box-shadow: inset 1px 1px 4px rgba(0, 0, 0, 0.25);
  border-radius: 5px;
  padding: 10px 12px;
}
.survey form .inputArea input[type=text],
.survey form .inputArea select,
.survey form .inputArea .dateArea {
  width: calc(100% - 70px);
}
.survey form .inputArea .dateArea {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 5px;
}
.survey form .inputArea input[type=date] {
  width: 100%;
  background: url("https://api.iconify.design/fa-solid/calendar-alt.svg?color=%2361b136&width=20&height=20") no-repeat;
  background-color: #F9F9F9;
  background-position: right 10px center;
}
.survey form .inputArea input[type=date]::-webkit-calendar-picker-indicator {
  background: transparent;
}
.survey .pageContent {
  padding: 40px;
  background-color: #FFFFFF;
  -webkit-box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.12);
          box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.12);
  border-radius: 5px;
  margin-bottom: 40px;
}
.survey .mainUl .mainList {
  border-radius: 5px;
  margin-bottom: 3px;
  position: relative;
}
.survey .mainUl .mainList:last-child {
  margin-bottom: 0;
}
.survey .mainUl .mainList:nth-child(odd) {
  background-color: #F2F2F2;
}
.survey .mainUl .mainList:nth-child(even) {
  background-color: #E7E7E7;
}
.survey .mainUl .mainList:hover {
  background-color: #DFF0C9;
}
.survey .mainUl .mainList a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  color: #000;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 12px 12px 12px 40px;
}
.survey .mainUl .mainList .text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 40px;
}
.survey .mainUl .mainList .text span:last-child {
  font-size: 18px;
  font-weight: bold;
}
.survey .mainUl .mainList .status {
  border-radius: 5px;
  padding: 10px 20px;
  min-width: 90px;
  text-align: center;
}
.survey .mainUl .mainList .status.onGoing {
  background-color: #F3D35E;
  color: #7A551C;
}
.survey .mainUl .mainList .status.done {
  background-color: #99ca8c;
  color: #29590F;
}
.survey .mainUl .mainList .status.start {
  background-color: #F28067;
  color: #741D1D;
}
@media (max-width: 992px) {
  .survey form .inputData {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .survey form .inputArea {
    width: 100%;
    margin-bottom: 10px;
  }
  .survey form .inputArea:last-child {
    width: 100%;
  }
}
@media (max-width: 768px) {
  .survey form {
    padding: 16px 20px;
  }
  .survey form .inputArea {
    -webkit-box-align: baseline;
        -ms-flex-align: baseline;
            align-items: baseline;
  }
  .survey form .dateArea {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .survey form .dateArea span {
    display: none;
  }
  .survey .pageContent {
    padding: 20px;
  }
  .survey .mainUl .mainList a {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    padding: 12px 20px;
  }
  .survey .mainUl .mainList .text {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    gap: 10px;
  }
  .survey .mainUl .mainList .status {
    position: absolute;
    top: 10px;
    right: 20px;
    padding: 5px 20px;
  }
}
@media (max-width: 375px) {
  .survey form .inputArea {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .survey form .inputArea input[type=text],
  .survey form .inputArea select,
  .survey form .inputArea .dateArea {
    width: 100%;
  }
}

.surveyAdd form .title {
  width: 100px;
}
.surveyAdd form input[type=date],
.surveyAdd form .addressArea,
.surveyAdd form .addressNumArea {
  width: calc(100% - 110px);
}
.surveyAdd form .formContent {
  -webkit-box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.12);
          box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.12);
  background-color: #FFFFFF;
  border-radius: 5px;
  margin-bottom: 40px;
}
.surveyAdd form .formContent .inputContent {
  width: 80%;
}
.surveyAdd form .formContent:first-child .title {
  width: 130px;
}
.surveyAdd form .formContent:first-child input[type=text] {
  width: calc(100% - 140px);
}
.surveyAdd form .inputContent {
  padding: 16px 40px;
}
.surveyAdd form .inputContent.row {
  margin: 0;
}
.surveyAdd form .inputArea {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  gap: 0 10px;
  margin-bottom: 20px;
}
.surveyAdd form input,
.surveyAdd form select {
  width: calc(100% - 110px);
  border: none;
  outline: none;
  background-color: #F9F9F9;
  -webkit-box-shadow: inset 1px 1px 4px rgba(0, 0, 0, 0.25);
          box-shadow: inset 1px 1px 4px rgba(0, 0, 0, 0.25);
  border-radius: 5px;
  padding: 10px 12px;
}
.surveyAdd form .addressArea {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 10px;
}
.surveyAdd form .addressArea select {
  width: 25%;
}
.surveyAdd form .addressArea input[type=text] {
  width: 50%;
}
.surveyAdd form .addressNumArea {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 5px;
}
.surveyAdd form input[type=date] {
  background: url("https://api.iconify.design/fa-solid/calendar-alt.svg?color=%2361b136&width=20&height=20") no-repeat;
  background-color: #F9F9F9;
  background-position: right 10px center;
}
.surveyAdd form input[type=date]::-webkit-calendar-picker-indicator {
  background: transparent;
}
.surveyAdd form .radioArea {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  gap: 10px;
}
.surveyAdd form .radioArea div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 5px;
}
.surveyAdd form .radioArea label {
  white-space: nowrap;
}
.surveyAdd form .radioArea input[type=radio] {
  width: auto;
  -webkit-box-shadow: none;
          box-shadow: none;
}
.surveyAdd form .radioList {
  padding: 16px 12px;
}
.surveyAdd form .radioList li {
  padding: 12px 40px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.surveyAdd form .radioList li.row {
  margin: 0;
}
.surveyAdd form .radioList li:nth-child(odd) {
  background-color: #F2F2F2;
}
.surveyAdd form .radioList li:nth-child(even) {
  background-color: #E7E7E7;
}
.surveyAdd form .radioList li .inputArea {
  margin-bottom: 0;
}
.surveyAdd form .radioList li .title {
  width: 180px;
}
.surveyAdd form .radioList li input[type=text] {
  width: calc(100% - 190px);
}
.surveyAdd form .radioList li .radioArea {
  width: calc(100% - 190px);
}
.surveyAdd form .radioList li .radioArea input[type=text] {
  width: auto;
}
.surveyAdd form .radioList li .radioArea .text {
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.surveyAdd form .uploadList {
  padding: 16px 12px;
}
.surveyAdd form .uploadList li {
  padding: 12px 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.surveyAdd form .uploadList li:nth-child(odd) {
  background-color: #F2F2F2;
}
.surveyAdd form .uploadList li:nth-child(even) {
  background-color: #E7E7E7;
}
.surveyAdd form .progressList {
  width: 50%;
}
.surveyAdd form .progressList li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-bottom: 20px;
}
.surveyAdd form .progressList li .title {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 40px;
}
.surveyAdd form .progressList li .status {
  border-radius: 5px;
  padding: 10px 20px;
  min-width: 90px;
  text-align: center;
}
.surveyAdd form .progressList li .status.onGoing {
  background-color: #F3D35E;
  color: #7A551C;
}
.surveyAdd form .progressList li .status.done {
  background-color: #99ca8c;
  color: #29590F;
}
.surveyAdd form .progressList li .status.start {
  background-color: #F28067;
  color: #741D1D;
}
.surveyAdd form .linkGroup {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  gap: 20px;
}
.surveyAdd form .linkGroup a {
  display: block;
  border-radius: 5px;
  padding: 10px 20px;
  min-width: 90px;
  text-align: center;
}
.surveyAdd form .linkGroup a.finish {
  background-color: #99ca8c;
  color: #29590F;
}
.surveyAdd form .linkGroup a.start {
  background-color: #F28067;
  color: #741D1D;
}
@media (max-width: 1200px) {
  .surveyAdd form .radioList li.row > * {
    padding: 0;
  }
  .surveyAdd form .radioList li .inputArea {
    margin-bottom: 10px;
  }
  .surveyAdd form .radioList li .inputArea:last-child {
    margin-bottom: 0;
  }
}
@media (max-width: 992px) {
  .surveyAdd form .formContent .inputContent {
    width: 100%;
  }
  .surveyAdd form .inputContent.row > * {
    padding: 0;
  }
}
@media (max-width: 768px) {
  .surveyAdd form .formContent {
    margin-bottom: 15px;
  }
  .surveyAdd form .inputContent {
    padding: 16px 20px;
  }
  .surveyAdd form .addressArea {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .surveyAdd form .addressArea select,
  .surveyAdd form .addressArea input[type=text] {
    width: 100%;
  }
  .surveyAdd form .addressNumArea {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .surveyAdd form .addressNumArea input {
    width: 100%;
  }
  .surveyAdd form .addressNumArea span {
    display: none;
  }
  .surveyAdd form .radioList li {
    padding: 12px 20px;
  }
  .surveyAdd form .radioList li .inputArea {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .surveyAdd form .radioList li input[type=text] {
    width: 100%;
  }
  .surveyAdd form .radioList li .radioArea {
    width: 100%;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
  .surveyAdd form .progressList {
    width: 100%;
  }
}
@media (max-width: 375px) {
  .surveyAdd form .formContent:first-child .title {
    width: 130px;
  }
  .surveyAdd form .formContent:first-child input[type=text] {
    width: 100%;
  }
  .surveyAdd form .inputArea {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .surveyAdd form input[type=date],
  .surveyAdd form input[type=text],
  .surveyAdd form select,
  .surveyAdd form .addressArea,
  .surveyAdd form .addressNumArea {
    width: 100%;
  }
  .surveyAdd form .progressList li {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
  }
}

.surveyFinish form .formContent {
  -webkit-box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.12);
          box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.12);
  background-color: #FFFFFF;
  border-radius: 5px;
  margin-bottom: 40px;
}
.surveyFinish form .inputContent {
  padding: 16px 40px;
}
.surveyFinish form .inputArea {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  gap: 0 10px;
  margin-bottom: 20px;
}
.surveyFinish form .title {
  width: 80px;
}
.surveyFinish form textarea {
  width: calc(100% - 100px);
  border: none;
  outline: none;
  background-color: #F9F9F9;
  -webkit-box-shadow: inset 1px 1px 4px rgba(0, 0, 0, 0.25);
          box-shadow: inset 1px 1px 4px rgba(0, 0, 0, 0.25);
  border-radius: 5px;
  padding: 10px 12px;
  resize: none;
}
@media (max-width: 768px) {
  .surveyFinish form .formContent {
    margin-bottom: 15px;
  }
  .surveyFinish form .inputArea {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .surveyFinish form .inputContent {
    padding: 16px 20px;
  }
  .surveyFinish form textarea {
    width: 100%;
  }
}

.surveyRevise form .title {
  width: 100px;
}
.surveyRevise form input[type=date],
.surveyRevise form .addressArea,
.surveyRevise form .addressNumArea {
  width: calc(100% - 110px);
}
.surveyRevise form .formContent {
  -webkit-box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.12);
          box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.12);
  background-color: #FFFFFF;
  border-radius: 5px;
  margin-bottom: 40px;
}
.surveyRevise form .formContent .inputContent {
  width: 80%;
}
.surveyRevise form .formContent:first-child .title {
  width: 130px;
}
.surveyRevise form .formContent:first-child input[type=text] {
  width: calc(100% - 140px);
}
.surveyRevise form .formContent:nth-last-child(2) .inputContent {
  width: 100%;
}
.surveyRevise form .inputContent {
  padding: 16px 40px;
}
.surveyRevise form .inputContent.row {
  margin: 0;
}
.surveyRevise form .inputArea {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  gap: 0 10px;
  margin-bottom: 20px;
}
.surveyRevise form input,
.surveyRevise form select {
  width: calc(100% - 110px);
  border: none;
  outline: none;
  background-color: #F9F9F9;
  -webkit-box-shadow: inset 1px 1px 4px rgba(0, 0, 0, 0.25);
          box-shadow: inset 1px 1px 4px rgba(0, 0, 0, 0.25);
  border-radius: 5px;
  padding: 10px 12px;
}
.surveyRevise form .addressArea {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 10px;
}
.surveyRevise form .addressArea select {
  width: 25%;
}
.surveyRevise form .addressArea input[type=text] {
  width: 50%;
}
.surveyRevise form .addressNumArea {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 5px;
}
.surveyRevise form input[type=date] {
  background: url("https://api.iconify.design/fa-solid/calendar-alt.svg?color=%2361b136&width=20&height=20") no-repeat;
  background-color: #F9F9F9;
  background-position: right 10px center;
}
.surveyRevise form input[type=date]::-webkit-calendar-picker-indicator {
  background: transparent;
}
.surveyRevise form .radioArea {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  gap: 10px;
}
.surveyRevise form .radioArea div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 5px;
}
.surveyRevise form .radioArea label {
  white-space: nowrap;
}
.surveyRevise form .radioArea input[type=radio] {
  width: auto;
  -webkit-box-shadow: none;
          box-shadow: none;
}
.surveyRevise form .radioArea input[type=checkbox] {
  width: 100%;
  -webkit-box-shadow: none;
          box-shadow: none;
}
.surveyRevise form .radioList {
  padding: 16px 12px;
}
.surveyRevise form .radioList li {
  padding: 12px 40px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.surveyRevise form .radioList li.row {
  margin: 0;
}
.surveyRevise form .radioList li:nth-child(odd) {
  background-color: #F2F2F2;
}
.surveyRevise form .radioList li:nth-child(even) {
  background-color: #E7E7E7;
}
.surveyRevise form .radioList li .inputArea {
  margin-bottom: 0;
}
.surveyRevise form .radioList li .title {
  width: 180px;
}
.surveyRevise form .radioList li input[type=text] {
  width: calc(100% - 190px);
}
.surveyRevise form .radioList li .radioArea {
  width: calc(100% - 190px);
}
.surveyRevise form .radioList li .radioArea input[type=text] {
  width: auto;
}
.surveyRevise form .radioList li .radioArea .text {
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.surveyRevise form .uploadList {
  padding: 16px 12px;
}
.surveyRevise form .uploadList li {
  padding: 12px 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.surveyRevise form .uploadList li:nth-child(odd) {
  background-color: #F2F2F2;
}
.surveyRevise form .uploadList li:nth-child(even) {
  background-color: #E7E7E7;
}
.surveyRevise form .uploadList li .inputArea {
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.surveyRevise form .progressList {
  width: 50%;
}
.surveyRevise form .progressList li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-bottom: 20px;
}
.surveyRevise form .progressList li .title {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 40px;
}
.surveyRevise form .progressList li .status {
  border-radius: 5px;
  padding: 10px 20px;
  min-width: 90px;
  text-align: center;
}
.surveyRevise form .progressList li .status.onGoing {
  background-color: #F3D35E;
  color: #7A551C;
}
.surveyRevise form .progressList li .status.done {
  background-color: #99ca8c;
  color: #29590F;
}
.surveyRevise form .progressList li .status.start {
  background-color: #F28067;
  color: #741D1D;
}
.surveyRevise form .linkGroup {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  gap: 20px;
}
.surveyRevise form .linkGroup a {
  display: block;
  border-radius: 5px;
  padding: 10px 20px;
  min-width: 90px;
  text-align: center;
}
.surveyRevise form .linkGroup a.finish {
  background-color: #99ca8c;
  color: #29590F;
}
.surveyRevise form .linkGroup a.start {
  background-color: #F28067;
  color: #741D1D;
}
@media (max-width: 1200px) {
  .surveyRevise form .radioList li.row > * {
    padding: 0;
  }
  .surveyRevise form .radioList li .inputArea {
    margin-bottom: 10px;
  }
  .surveyRevise form .radioList li .inputArea:last-child {
    margin-bottom: 0;
  }
}
@media (max-width: 992px) {
  .surveyRevise form .formContent .inputContent {
    width: 100%;
  }
  .surveyRevise form .inputContent.row > * {
    padding: 0;
  }
}
@media (max-width: 768px) {
  .surveyRevise form .formContent {
    margin-bottom: 15px;
  }
  .surveyRevise form .inputContent {
    padding: 16px 20px;
  }
  .surveyRevise form .addressArea {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .surveyRevise form .addressArea select,
  .surveyRevise form .addressArea input[type=text] {
    width: 100%;
  }
  .surveyRevise form .addressNumArea {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .surveyRevise form .addressNumArea input {
    width: 100%;
  }
  .surveyRevise form .addressNumArea span {
    display: none;
  }
  .surveyRevise form .radioList li {
    padding: 12px 20px;
  }
  .surveyRevise form .radioList li .inputArea {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .surveyRevise form .radioList li input[type=text] {
    width: 100%;
  }
  .surveyRevise form .radioList li .radioArea {
    width: 100%;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
  .surveyRevise form .progressList {
    width: 100%;
  }
}
@media (max-width: 375px) {
  .surveyRevise form .formContent:first-child .title {
    width: 130px;
  }
  .surveyRevise form .formContent:first-child input[type=text] {
    width: 100%;
  }
  .surveyRevise form .inputArea {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .surveyRevise form input[type=date],
  .surveyRevise form input[type=text],
  .surveyRevise form select,
  .surveyRevise form .addressArea,
  .surveyRevise form .addressNumArea {
    width: 100%;
  }
  .surveyRevise form .progressList li .title {
    gap: 20px;
  }
}

.surveyStart form .formContent {
  -webkit-box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.12);
          box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.12);
  background-color: #FFFFFF;
  border-radius: 5px;
  margin-bottom: 40px;
}
.surveyStart form .formContent:first-child .inputContent {
  width: 80%;
}
.surveyStart form .formContent:nth-child(2) .inputContent {
  width: 50%;
}
.surveyStart form .inputContent {
  padding: 16px 40px;
}
.surveyStart form .inputContent.row {
  margin: 0;
}
.surveyStart form .inputArea {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  gap: 0 10px;
  margin-bottom: 20px;
}
.surveyStart form input,
.surveyStart form select {
  width: calc(100% - 110px);
  border: none;
  outline: none;
  background-color: #F9F9F9;
  -webkit-box-shadow: inset 1px 1px 4px rgba(0, 0, 0, 0.25);
          box-shadow: inset 1px 1px 4px rgba(0, 0, 0, 0.25);
  border-radius: 5px;
  padding: 10px 12px;
}
.surveyStart form .addressArea {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 10px;
}
.surveyStart form .addressArea select {
  width: 25%;
}
.surveyStart form .addressArea input[type=text] {
  width: 50%;
}
.surveyStart form .addressNumArea {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 5px;
}
.surveyStart form .title {
  width: 100px;
}
.surveyStart form input[type=date],
.surveyStart form .addressArea,
.surveyStart form .addressNumArea {
  width: calc(100% - 110px);
}
.surveyStart form input[type=date] {
  background: url("https://api.iconify.design/fa-solid/calendar-alt.svg?color=%2361b136&width=20&height=20") no-repeat;
  background-color: #F9F9F9;
  background-position: right 10px center;
}
.surveyStart form input[type=date]::-webkit-calendar-picker-indicator {
  background: transparent;
}
@media (max-width: 992px) {
  .surveyStart form .formContent:first-child .inputContent {
    width: 100%;
  }
  .surveyStart form .formContent:nth-child(2) .inputContent {
    width: 100%;
  }
  .surveyStart form .inputContent.row > * {
    padding: 0;
  }
}
@media (max-width: 768px) {
  .surveyStart form .formContent {
    margin-bottom: 15px;
  }
  .surveyStart form .inputContent {
    padding: 16px 20px;
  }
  .surveyStart form .addressArea {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .surveyStart form .addressArea select,
  .surveyStart form .addressArea input[type=text] {
    width: 100%;
  }
  .surveyStart form .addressNumArea {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .surveyStart form .addressNumArea input {
    width: 100%;
  }
  .surveyStart form .addressNumArea span {
    display: none;
  }
}
@media (max-width: 375px) {
  .surveyStart form .inputArea {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .surveyStart form input[type=date],
  .surveyStart form input[type=text],
  .surveyStart form select,
  .surveyStart form .addressArea,
  .surveyStart form .addressNumArea {
    width: 100%;
  }
}

.surveyAdd1 form .title {
  width: 100px;
}
.surveyAdd1 form .formContent {
  -webkit-box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.12);
          box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.12);
  background-color: #FFFFFF;
  border-radius: 5px;
  margin-bottom: 40px;
}
.surveyAdd1 form .inputContent {
  width: 60%;
  padding: 16px 40px;
}
.surveyAdd1 form .inputContent.row {
  margin: 0;
}
.surveyAdd1 form .search-wrapper {
  width: 100%;
}
.surveyAdd1 form .showArea {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 10px;
  position: relative;
}
.surveyAdd1 form .showArea textarea {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  border: none;
  outline: none;
  background-color: #F9F9F9;
  -webkit-box-shadow: inset 1px 1px 4px rgba(0, 0, 0, 0.25);
          box-shadow: inset 1px 1px 4px rgba(0, 0, 0, 0.25);
  border-radius: 5px;
  padding: 10px 20px 10px 12px;
  resize: none;
  word-break: break-all;
}
.surveyAdd1 form .showArea textarea::-webkit-scrollbar {
  display: none;
}
.surveyAdd1 form #clear-selected {
  display: none;
  border: none;
  background: transparent;
  position: absolute;
  top: 50%;
  right: 5px;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  padding: 0;
}
.surveyAdd1 form #selected-area {
  margin-top: 10px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 5px;
}
.surveyAdd1 form .search-area {
  width: 100%;
  position: relative;
}
.surveyAdd1 form .search-area input {
  width: 100%;
  border: none;
  outline: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
  padding: 8px;
}
.surveyAdd1 form .search-area label {
  position: absolute;
  top: 50%;
  right: 10px;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.surveyAdd1 form #search-results {
  max-height: 250px;
  width: 100%;
  overflow-y: auto;
}
.surveyAdd1 form #search-results li {
  padding: 8px;
  cursor: pointer;
  word-break: break-all;
}
.surveyAdd1 form #search-results li:hover {
  background: #F9F9F9;
}
.surveyAdd1 form .inputArea {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  gap: 0 10px;
  margin-bottom: 20px;
}
@media (max-width: 992px) {
  .surveyAdd1 form .inputContent {
    width: 100%;
    padding: 20px;
  }
}
@media (max-width: 576px) {
  .surveyAdd1 form .inputArea {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .surveyAdd1 form .btnGroup {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}

.privacyPolicy .pageTitle {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  background-color: #f2f2f2;
  color: #000;
  gap: 10px 20px;
}
.privacyPolicy .pageTitle span {
  color: #61B136;
  font-size: 18px;
  font-weight: normal;
  border-right: 1px solid #B3B3B3;
  padding-right: 20px;
}
.privacyPolicy .pageContent {
  background-color: #FFFFFF;
  -webkit-box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.12);
          box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.12);
  border-radius: 5px;
  margin-bottom: 40px;
}
.privacyPolicy .textArea {
  width: 80%;
  margin: auto;
  padding: 40px 0;
  font-size: 18px;
  line-height: 2;
}
.privacyPolicy .textArea ul li:last-child {
  margin-bottom: 0;
}
.privacyPolicy .textArea .sub {
  list-style: disc;
  list-style-position: inside;
  padding-left: 10px;
}

.waybill form {
  width: 100%;
  -webkit-box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.12);
          box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.12);
  border-radius: 5px;
  padding: 16px 40px;
  margin-bottom: 20px;
  gap: 10px;
  background-color: #FFFFFF;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.waybill form .inputData {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.waybill form .inputArea {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 50%;
}
.waybill form .inputArea .title {
  width: 60px;
}
.waybill form .inputArea input {
  border: none;
  outline: none;
  background-color: #F9F9F9;
  -webkit-box-shadow: inset 1px 1px 4px rgba(0, 0, 0, 0.25);
          box-shadow: inset 1px 1px 4px rgba(0, 0, 0, 0.25);
  border-radius: 5px;
  padding: 10px 12px;
}
.waybill form .inputArea input[type=text],
.waybill form .inputArea .dateArea {
  width: calc(100% - 70px);
}
.waybill form .inputArea .dateArea {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 5px;
}
.waybill form .inputArea input[type=date] {
  width: 100%;
  background: url("https://api.iconify.design/fa-solid/calendar-alt.svg?color=%2361b136&width=20&height=20") no-repeat;
  background-color: #F9F9F9;
  background-position: right 10px center;
}
.waybill form .inputArea input[type=date]::-webkit-calendar-picker-indicator {
  background: transparent;
}
.waybill form .radioArea {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.waybill form .radioArea > div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 10px;
}
.waybill .pageContent {
  padding: 40px;
  background-color: #FFFFFF;
  -webkit-box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.12);
          box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.12);
  border-radius: 5px;
  margin-bottom: 40px;
}
.waybill .mainUl .mainList {
  border-radius: 5px;
  margin-bottom: 3px;
}
.waybill .mainUl .mainList:last-child {
  margin-bottom: 0;
}
.waybill .mainUl .mainList:nth-child(odd) {
  background-color: #F2F2F2;
}
.waybill .mainUl .mainList:nth-child(even) {
  background-color: #E7E7E7;
}
.waybill .mainUl .mainList:hover {
  background-color: #DFF0C9;
}
.waybill .mainUl .mainList a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  color: #000;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 12px 12px 12px 40px;
}
.waybill .mainUl .mainList .text {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 40px;
}
.waybill .mainUl .mainList .status {
  border-radius: 5px;
  padding: 10px 20px;
  min-width: 90px;
  text-align: center;
}
.waybill .mainUl .mainList .status.onGoing {
  background-color: #F3D35E;
  color: #7A551C;
}
.waybill .mainUl .mainList .status.done {
  background-color: #99ca8c;
  color: #29590F;
}
.waybill .mainUl .mainList .status.start {
  background-color: #F28067;
  color: #741D1D;
}
@media (max-width: 992px) {
  .waybill form .inputData {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .waybill form .inputArea {
    width: 100%;
    margin-bottom: 10px;
  }
  .waybill form .inputArea:last-child {
    width: 100%;
  }
}
@media (max-width: 768px) {
  .waybill form {
    padding: 16px 20px;
  }
  .waybill form .inputArea {
    -webkit-box-align: baseline;
        -ms-flex-align: baseline;
            align-items: baseline;
  }
  .waybill form .dateArea {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .waybill form .dateArea span {
    display: none;
  }
  .waybill .pageContent {
    padding: 20px;
  }
  .waybill .mainUl .mainList {
    position: relative;
  }
  .waybill .mainUl .mainList a {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    padding: 12px 20px;
  }
  .waybill .mainUl .mainList .text {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    gap: 10px;
  }
  .waybill .mainUl .mainList .status {
    position: absolute;
    top: 10px;
    right: 20px;
    padding: 5px 20px;
  }
}
@media (max-width: 375px) {
  .waybill form .inputArea {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .waybill form .inputArea input[type=text],
  .waybill form .inputArea select,
  .waybill form .inputArea .dateArea {
    width: 100%;
  }
  .waybill form .radioArea > div {
    gap: 5px;
  }
}

.waybillPending form .formContent {
  -webkit-box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.12);
          box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.12);
  background-color: #FFFFFF;
  border-radius: 5px;
  margin-bottom: 40px;
}
.waybillPending form .formContent.workReport .inputContent {
  width: 50%;
}
.waybillPending form .inputContent {
  padding: 16px 40px;
}
.waybillPending form .inputContent.row {
  margin: 0;
}
.waybillPending form .inputArea {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  gap: 0 10px;
  margin-bottom: 20px;
}
.waybillPending form .title {
  width: 130px;
}
.waybillPending form input {
  width: calc(100% - 140px);
  border: none;
  outline: none;
  background-color: #F9F9F9;
  border-radius: 5px;
  padding: 10px 12px;
}
.waybillPending form input[type=date] {
  background: url("https://api.iconify.design/fa-solid/calendar-alt.svg?color=%2361b136&width=20&height=20") no-repeat;
  background-color: #F9F9F9;
  background-position: right 10px center;
}
.waybillPending form input[type=date]::-webkit-calendar-picker-indicator {
  background: transparent;
}
.waybillPending form .uploadArea {
  width: calc(100% - 140px);
}
.waybillPending form .addArea {
  position: relative;
}
.waybillPending form .addArea .add {
  position: absolute;
  right: 20px;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.waybillPending form .addArea .add a {
  margin-bottom: 0;
}
.waybillPending form .radioArea {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  gap: 10px;
}
.waybillPending form .radioArea div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 5px;
}
.waybillPending form .radioArea label {
  white-space: nowrap;
}
.waybillPending form .radioArea input[type=radio] {
  width: auto;
  -webkit-box-shadow: none;
          box-shadow: none;
}
@media (max-width: 992px) {
  .waybillPending form .formContent.workReport .inputContent {
    width: 100%;
  }
  .waybillPending form .inputContent.row > * {
    padding: 0;
  }
}
@media (max-width: 768px) {
  .waybillPending form .formContent {
    margin-bottom: 15px;
  }
  .waybillPending form .inputContent {
    padding: 16px 20px;
  }
}
@media (max-width: 576px) {
  .waybillPending form .inputArea {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .waybillPending form .inputArea input[type=text],
  .waybillPending form .inputArea input[type=date] {
    width: 100%;
  }
}

.waybillSolved .form .formContent {
  -webkit-box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.12);
          box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.12);
  background-color: #FFFFFF;
  border-radius: 5px;
  margin-bottom: 40px;
}
.waybillSolved .form .formContent.workReport .inputContent {
  width: 50%;
}
.waybillSolved .form .inputContent {
  padding: 16px 40px;
}
.waybillSolved .form .inputContent.row {
  margin: 0;
}
.waybillSolved .form .inputArea {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  gap: 0 10px;
  margin-bottom: 20px;
}
.waybillSolved .form .title {
  width: 130px;
}
.waybillSolved .form input {
  width: calc(100% - 140px);
  border: none;
  outline: none;
  background-color: #F9F9F9;
  border-radius: 5px;
  padding: 10px 12px;
}
.waybillSolved .form .file {
  color: #000;
  text-decoration: underline;
}
.waybillSolved .form .addArea {
  position: relative;
}
.waybillSolved .form .addArea .add {
  position: absolute;
  right: 20px;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.waybillSolved .form .addArea .add a {
  margin-bottom: 0;
}
.waybillSolved .form .radioArea {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
  gap: 10px;
}
.waybillSolved .form .radioArea div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 5px;
}
.waybillSolved .form .radioArea label {
  white-space: nowrap;
}
.waybillSolved .form .radioArea input[type=radio] {
  width: auto;
  -webkit-box-shadow: none;
          box-shadow: none;
}
@media (max-width: 992px) {
  .waybillSolved .form .formContent.workReport .inputContent {
    width: 100%;
  }
  .waybillSolved .form .inputContent.row > * {
    padding: 0;
  }
}
@media (max-width: 768px) {
  .waybillSolved .form .formContent {
    margin-bottom: 15px;
  }
  .waybillSolved .form .inputContent {
    padding: 16px 20px;
  }
}
@media (max-width: 576px) {
  .waybillSolved .form .inputArea {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .waybillSolved .form .inputArea input[type=text] {
    width: 100%;
  }
}

.dashBoard .header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background-color: rgba(255, 255, 255, 0.8);
  -webkit-box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.16);
          box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.16);
}
.dashBoard .header h2 a {
  display: block;
  width: 240px;
  height: 120px;
  background: url("../tw_img/logo/Logo.png") no-repeat center;
  background-size: contain;
  white-space: nowrap;
  text-indent: 101%;
  overflow: hidden;
}
.dashBoard .container-fluid {
  padding-top: 60px;
  padding-bottom: 100px;
  padding-left: 40px;
  padding-right: 40px;
}
.dashBoard .right {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.dashBoard .box {
  -webkit-box-shadow: 2px 2px 16px 0 rgba(0, 0, 0, 0.16);
          box-shadow: 2px 2px 16px 0 rgba(0, 0, 0, 0.16);
  border-radius: 20px;
  background: #fff;
  padding: 20px;
}
.dashBoard .c3-chart-arc text {
  fill: #fff;
}
.dashBoard h3 {
  color: #000;
  font-weight: bold;
  font-size: 24px;
  margin-bottom: 20px;
  position: relative;
  margin-left: 20px;
}
.dashBoard h3::after {
  content: "";
  display: block;
  position: absolute;
  width: 6px;
  height: 30px;
  background: #63BA41;
  top: 50%;
  left: -15px;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.dashBoard .progressCircle {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  position: relative;
}
.dashBoard .progressCircle .progressText {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 40px;
  height: 40px;
  background-color: #F2F2F2;
  border-radius: 50%;
  color: #000;
}
.dashBoard .tableArea {
  max-height: 320px;
  white-space: nowrap;
  overflow: auto;
}
.dashBoard #map {
  min-height: 800px;
  height: 100%;
}
.dashBoard table {
  width: 100%;
}
.dashBoard table th {
  padding: 15px 20px;
  background: #ADDFA5;
  border: 1px solid #fff;
}
.dashBoard table tr:nth-child(odd) td {
  background: #F2F2F2;
}
.dashBoard table tr:nth-child(even) td {
  background: #E7E7E7;
}
.dashBoard table tr td {
  padding: 15px 20px;
  vertical-align: middle;
  border: 1px solid #fff;
}
.dashBoard table tr td.unprocessed {
  color: #E43D3D;
}
.dashBoard table.progressTable tr td:first-child p {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 5px;
}
.dashBoard table.progressTable tr td:first-child p span {
  border-radius: 5px;
  color: #fff;
  background: #F28067;
  padding: 3px 10px;
}
.dashBoard table.progressTable tr td:nth-child(3), .dashBoard table.progressTable tr td:nth-child(4) {
  padding: 0;
}
.dashBoard table.progressTable ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.dashBoard table.progressTable ul li {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  border-bottom: 1px solid #fff;
  padding: 16px 20px;
}
.dashBoard table.progressTable ul li:last-child {
  border-bottom: none;
}
@media (max-width: 992px) {
  .dashBoard .container-fluid {
    padding-left: 20px;
    padding-right: 20px;
  }
  .dashBoard table {
    display: block;
    white-space: nowrap;
    overflow: auto;
  }
  .dashBoard .mapArea {
    margin-bottom: 40px;
  }
  .dashBoard .right .row {
    margin-bottom: 40px;
  }
}
@media (max-width: 768px) {
  .dashBoard .pieArea {
    margin-bottom: 40px;
  }
}